@gravity-platform/unoverse-react 0.0.2 → 0.0.4

package/dist/index.d.cts

@@ -86,8 +86,14 @@ interface UnoverseComponentProps {
      * (e.g. the workbench's light/dark toggle); swap it to restyle, zero def changes.
      */
     theme?: ResolvedTheme;
+    /**
+     * Render inside a Shadow DOM for full CSS isolation (default true). The SDK owns the
+     * isolation boundary so every consumer is protected identically; the canvas/channel no
+     * longer wrap it themselves. Set false only for a host that manages its own isolation.
+     */
+    isolate?: boolean;
 }
-declare function UnoverseComponent({ client, uri, data, onAction, theme }: UnoverseComponentProps): react.JSX.Element;
+declare function UnoverseComponent({ client, uri, data, onAction, theme, isolate }: UnoverseComponentProps): react.JSX.Element;
 
 /** Subscribe to a component instance in the store (re-renders on merge). */
 declare function useUnoverseInstance(store: ComponentStore, chatId: string, nodeId: string): {
@@ -118,14 +124,20 @@ interface StreamedUnoverseTemplateProps {
     /** Channel overrides for the template's declared props (e.g. per-tenant logoUrl/brandName).
      *  Merged OVER the definition's own `props` defaults into the root data scope. */
     props?: Record<string, unknown>;
+    /** Render inside a Shadow DOM for full CSS isolation (default true). See UnoverseComponent. */
+    isolate?: boolean;
 }
 /** Resolve a ComponentSlot's `select` against the store → ordered pointers. Exported for testing. */
 declare function selectPointers(store: ComponentStore, node: UnoverseNode): string[];
-declare function StreamedUnoverseTemplate({ client, store, uri, onAction, theme: themeProp, props }: StreamedUnoverseTemplateProps): react.JSX.Element;
+declare function StreamedUnoverseTemplate({ client, store, uri, onAction, theme: themeProp, props, isolate }: StreamedUnoverseTemplateProps): react.JSX.Element;
 
 /** Returns the resolved theme (null until the first fetch resolves). */
 declare function useUnoverseTheme(client: UnoverseClient, name?: string): ResolvedTheme | null;
 
+declare function IsolatedRoot({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+
 interface UnoverseConnectionConfig {
     /** Gravity API base, e.g. "http://localhost:4100". REST execute lives here. */
     apiUrl: string;
@@ -163,4 +175,4 @@ declare function useUnoverseConnection(config: UnoverseConnectionConfig, session
     enabled?: boolean;
 }): UnoverseConnection;
 
-export { type ActionHandler, type SlotResolver, StreamedUnoverseComponent, type StreamedUnoverseComponentProps, StreamedUnoverseTemplate, type StreamedUnoverseTemplateProps, UnoverseComponent, type UnoverseComponentProps, type UnoverseConnection, type UnoverseConnectionConfig, type UnoverseSessionParams, keyframesCss, renderNode, selectPointers, styleToCss, useUnoverseConnection, useUnoverseInstance, useUnoverseTheme };
+export { type ActionHandler, IsolatedRoot, type SlotResolver, StreamedUnoverseComponent, type StreamedUnoverseComponentProps, StreamedUnoverseTemplate, type StreamedUnoverseTemplateProps, UnoverseComponent, type UnoverseComponentProps, type UnoverseConnection, type UnoverseConnectionConfig, type UnoverseSessionParams, keyframesCss, renderNode, selectPointers, styleToCss, useUnoverseConnection, useUnoverseInstance, useUnoverseTheme };

package/dist/index.d.ts

@@ -86,8 +86,14 @@ interface UnoverseComponentProps {
      * (e.g. the workbench's light/dark toggle); swap it to restyle, zero def changes.
      */
     theme?: ResolvedTheme;
+    /**
+     * Render inside a Shadow DOM for full CSS isolation (default true). The SDK owns the
+     * isolation boundary so every consumer is protected identically; the canvas/channel no
+     * longer wrap it themselves. Set false only for a host that manages its own isolation.
+     */
+    isolate?: boolean;
 }
-declare function UnoverseComponent({ client, uri, data, onAction, theme }: UnoverseComponentProps): react.JSX.Element;
+declare function UnoverseComponent({ client, uri, data, onAction, theme, isolate }: UnoverseComponentProps): react.JSX.Element;
 
 /** Subscribe to a component instance in the store (re-renders on merge). */
 declare function useUnoverseInstance(store: ComponentStore, chatId: string, nodeId: string): {
@@ -118,14 +124,20 @@ interface StreamedUnoverseTemplateProps {
     /** Channel overrides for the template's declared props (e.g. per-tenant logoUrl/brandName).
      *  Merged OVER the definition's own `props` defaults into the root data scope. */
     props?: Record<string, unknown>;
+    /** Render inside a Shadow DOM for full CSS isolation (default true). See UnoverseComponent. */
+    isolate?: boolean;
 }
 /** Resolve a ComponentSlot's `select` against the store → ordered pointers. Exported for testing. */
 declare function selectPointers(store: ComponentStore, node: UnoverseNode): string[];
-declare function StreamedUnoverseTemplate({ client, store, uri, onAction, theme: themeProp, props }: StreamedUnoverseTemplateProps): react.JSX.Element;
+declare function StreamedUnoverseTemplate({ client, store, uri, onAction, theme: themeProp, props, isolate }: StreamedUnoverseTemplateProps): react.JSX.Element;
 
 /** Returns the resolved theme (null until the first fetch resolves). */
 declare function useUnoverseTheme(client: UnoverseClient, name?: string): ResolvedTheme | null;
 
+declare function IsolatedRoot({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+
 interface UnoverseConnectionConfig {
     /** Gravity API base, e.g. "http://localhost:4100". REST execute lives here. */
     apiUrl: string;
@@ -163,4 +175,4 @@ declare function useUnoverseConnection(config: UnoverseConnectionConfig, session
     enabled?: boolean;
 }): UnoverseConnection;
 
-export { type ActionHandler, type SlotResolver, StreamedUnoverseComponent, type StreamedUnoverseComponentProps, StreamedUnoverseTemplate, type StreamedUnoverseTemplateProps, UnoverseComponent, type UnoverseComponentProps, type UnoverseConnection, type UnoverseConnectionConfig, type UnoverseSessionParams, keyframesCss, renderNode, selectPointers, styleToCss, useUnoverseConnection, useUnoverseInstance, useUnoverseTheme };
+export { type ActionHandler, IsolatedRoot, type SlotResolver, StreamedUnoverseComponent, type StreamedUnoverseComponentProps, StreamedUnoverseTemplate, type StreamedUnoverseTemplateProps, UnoverseComponent, type UnoverseComponentProps, type UnoverseConnection, type UnoverseConnectionConfig, type UnoverseSessionParams, keyframesCss, renderNode, selectPointers, styleToCss, useUnoverseConnection, useUnoverseInstance, useUnoverseTheme };

package/dist/index.js

@@ -6885,7 +6885,7 @@ var require_dist = __commonJS({
 });
 
 // src/UnoverseComponent.tsx
-import { useEffect as useEffect2, useState as useState3 } from "react";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 
 // src/primitives.tsx
 import { createElement, useMemo, useState } from "react";
@@ -7192,14 +7192,43 @@ function useUnoverseTheme(client, name = "light") {
   return theme;
 }
 
-// src/UnoverseComponent.tsx
+// src/isolate.tsx
+import { useEffect as useEffect2, useRef, useState as useState3 } from "react";
+import { createPortal } from "react-dom";
 import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function UnoverseComponent({ client, uri, data, onAction, theme }) {
-  const [def, setDef] = useState3(null);
-  const [error2, setError] = useState3(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 = useRef(null);
+  const [shadow, setShadow] = useState3(null);
+  useEffect2(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    setShadow(host.shadowRoot ?? host.attachShadow({ mode: "open" }));
+  }, []);
+  return /* @__PURE__ */ jsx3("div", { ref: hostRef, style: { display: "contents" }, children: shadow && createPortal(
+    /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx3("style", { children: RESET_CSS }),
+      /* @__PURE__ */ jsx3("div", { className: "uno-isolate-root", children })
+    ] }),
+    shadow
+  ) });
+}
+
+// src/UnoverseComponent.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function UnoverseComponent({ client, uri, data, onAction, theme, isolate = true }) {
+  const [def, setDef] = useState4(null);
+  const [error2, setError] = useState4(null);
   const fetched = useUnoverseTheme(client, "light");
   const activeTheme = theme ?? fetched;
-  useEffect2(() => {
+  useEffect3(() => {
     let alive = true;
     setDef(null);
     setError(null);
@@ -7208,11 +7237,11 @@ function UnoverseComponent({ client, uri, data, onAction, theme }) {
       alive = false;
     };
   }, [client, uri]);
-  if (error2) return /* @__PURE__ */ jsxs2("div", { children: [
+  if (error2) return /* @__PURE__ */ jsxs3("div", { children: [
     "Unoverse error: ",
     error2
   ] });
-  if (!def || !activeTheme) return /* @__PURE__ */ jsxs2("div", { children: [
+  if (!def || !activeTheme) return /* @__PURE__ */ jsxs3("div", { children: [
     "Loading ",
     uri,
     "\u2026"
@@ -7220,17 +7249,18 @@ function UnoverseComponent({ client, uri, data, onAction, theme }) {
   const propDefaults2 = Object.fromEntries(
     Object.entries(def.props ?? {}).map(([k, v]) => [k, v?.default])
   );
-  const merged = { ...propDefaults2, ...data ?? {} };
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx3("style", { children: keyframesCss(activeTheme) }),
-    /* @__PURE__ */ jsx3("div", { style: { display: "contents", ...activeTheme.root }, children: renderNode(def.root, merged, onAction, activeTheme) })
+  const merged = data ?? propDefaults2;
+  const body = /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx4("style", { children: keyframesCss(activeTheme) }),
+    /* @__PURE__ */ jsx4("div", { style: { display: "contents", ...activeTheme.root }, children: renderNode(def.root, merged, onAction, activeTheme) })
   ] });
+  return isolate ? /* @__PURE__ */ jsx4(IsolatedRoot, { children: body }) : body;
 }
 
 // src/streamed.tsx
 import { useCallback, useMemo as useMemo2, useSyncExternalStore } from "react";
 import { dispatchAction } from "@gravity-platform/unoverse-core";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function useUnoverseInstance(store, chatId, nodeId) {
   const subscribe = useCallback((cb) => store.subscribe(cb), [store]);
   const getVersion = useCallback(() => store.getVersion(), [store]);
@@ -7248,14 +7278,14 @@ function StreamedUnoverseComponent({ client, store, chatId, nodeId, onAction, th
     }),
     [store, chatId, nodeId, onAction]
   );
-  if (!type) return /* @__PURE__ */ jsx4("div", { children: "waiting for COMPONENT_INIT\u2026" });
+  if (!type) return /* @__PURE__ */ jsx5("div", { children: "waiting for COMPONENT_INIT\u2026" });
   const merged = extraData ? { ...data, ...extraData } : data;
-  return /* @__PURE__ */ jsx4(UnoverseComponent, { client, uri: `unoverse://components/${type}`, data: merged, onAction: handleAction, theme });
+  return /* @__PURE__ */ jsx5(UnoverseComponent, { client, uri: `unoverse://components/${type}`, data: merged, onAction: handleAction, theme });
 }
 
 // src/template.tsx
-import { useEffect as useEffect3, useState as useState4, useSyncExternalStore as useSyncExternalStore2 } from "react";
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useState as useState5, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function propDefaults(props) {
   const out = {};
   for (const [k, v] of Object.entries(props ?? {})) {
@@ -7286,16 +7316,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] = useState4(null);
-  const [error2, setError] = useState4(null);
+function StreamedUnoverseTemplate({ client, store, uri, onAction, theme: themeProp, props, isolate = true }) {
+  const [def, setDef] = useState5(null);
+  const [error2, setError] = useState5(null);
   const fetched = useUnoverseTheme(client, "light");
   const theme = themeProp ?? fetched;
   useSyncExternalStore2(
     (cb) => store.subscribe(cb),
     () => store.getVersion()
   );
-  useEffect3(() => {
+  useEffect4(() => {
     let alive = true;
     setDef(null);
     setError(null);
@@ -7304,18 +7334,18 @@ function StreamedUnoverseTemplate({ client, store, uri, onAction, theme: themePr
       alive = false;
     };
   }, [client, uri]);
-  if (error2) return /* @__PURE__ */ jsxs3("div", { children: [
+  if (error2) return /* @__PURE__ */ jsxs4("div", { children: [
     "Unoverse error: ",
     error2
   ] });
-  if (!def || !theme) return /* @__PURE__ */ jsxs3("div", { children: [
+  if (!def || !theme) return /* @__PURE__ */ jsxs4("div", { children: [
     "Loading ",
     uri,
     "\u2026"
   ] });
   const leaf = (pointer, extraData) => {
     const { chatId, nodeId } = store.split(pointer);
-    return /* @__PURE__ */ jsx5(StreamedUnoverseComponent, { client, store, chatId, nodeId, onAction, theme, extraData }, pointer);
+    return /* @__PURE__ */ jsx6(StreamedUnoverseComponent, { client, store, chatId, nodeId, onAction, theme, extraData }, pointer);
   };
   const resolveSlot = (node, key) => {
     const pointers = selectPointers(store, node);
@@ -7325,7 +7355,7 @@ function StreamedUnoverseTemplate({ client, store, uri, onAction, theme: themePr
     return pointers.map((p) => leaf(p));
   };
   const resolveTimeline = (node, key) => {
-    return /* @__PURE__ */ jsx5("div", { style: styleToCss(node.style, theme), children: store.getTimeline().map((turn) => {
+    return /* @__PURE__ */ jsx6("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) => {
@@ -7364,14 +7394,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__ */ jsxs3(Fragment2, { children: [
-    /* @__PURE__ */ jsx5("style", { children: keyframesCss(theme) }),
-    /* @__PURE__ */ jsx5("div", { style: { display: "contents", ...theme.root }, children: renderNode(def.root, rootData, onAction, theme, void 0, resolve) })
+  const body = /* @__PURE__ */ jsxs4(Fragment3, { children: [
+    /* @__PURE__ */ jsx6("style", { children: keyframesCss(theme) }),
+    /* @__PURE__ */ jsx6("div", { style: { display: "contents", ...theme.root }, children: renderNode(def.root, rootData, onAction, theme, void 0, resolve) })
   ] });
+  return isolate ? /* @__PURE__ */ jsx6(IsolatedRoot, { children: body }) : body;
 }
 
 // src/connection.tsx
-import { useCallback as useCallback2, useEffect as useEffect4, useRef, useState as useState5, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect5, useRef as useRef2, useState as useState6, useSyncExternalStore as useSyncExternalStore3 } from "react";
 import { applyServerMessage } from "@gravity-platform/unoverse-core";
 
 // ../node_modules/zod/v4/core/core.js
@@ -17596,11 +17627,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] = useState5(false);
-  const [isReady, setIsReady] = useState5(false);
-  const clientRef = useRef(null);
-  const seenRef = useRef(/* @__PURE__ */ new Set());
-  useEffect4(() => {
+  const [isConnected, setIsConnected] = useState6(false);
+  const [isReady, setIsReady] = useState6(false);
+  const clientRef = useRef2(null);
+  const seenRef = useRef2(/* @__PURE__ */ new Set());
+  useEffect5(() => {
     if (!enabled) return;
     if (!workflowId || !userId || !conversationId) {
       console.warn("[unoverse] connection missing workflowId/userId/conversationId");
@@ -17700,6 +17731,7 @@ function useUnoverseConnection(config2, session, store, options = {}) {
   return { isConnected, isReady, sendMessage, trigger, sendAction, activeTemplate };
 }
 export {
+  IsolatedRoot,
   StreamedUnoverseComponent,
   StreamedUnoverseTemplate,
   UnoverseComponent,