@valbuild/react 0.13.4 → 0.14.0

package/dist/valbuild-react.cjs.prod.js

@@ -2,8 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ValProvider = require('./ValProvider-d8fe7dc4.cjs.prod.js');
+var ValProvider = require('./ValProvider-74eef393.cjs.prod.js');
 var core = require('@valbuild/core');
+var React = require('react');
+var parse = require('style-to-object');
+var ReactJSXRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var parse__default = /*#__PURE__*/_interopDefault(parse);
 
 function useVal(selector, locale) {
   // const mod = selectable.getModule();
@@ -27,8 +34,142 @@ function useVal(selector, locale) {
   return core.Internal.getVal(selector, locale);
 }
 
+function ValRichText(_ref) {
+  var children = _ref.children;
+  var root = children;
+  var path = root.valPath;
+  return /*#__PURE__*/ReactJSXRuntime.jsx("div", {
+    "data-val-path": path,
+    children: root.children.map(function (child, i) {
+      var childType = child.type;
+      var childPath = "".concat(path, ".").concat(i);
+      switch (childType) {
+        case "heading":
+          return /*#__PURE__*/ReactJSXRuntime.jsx(HeadingNodeComponent, {
+            path: childPath,
+            node: child
+          }, childPath);
+        case "paragraph":
+          return /*#__PURE__*/ReactJSXRuntime.jsx(ParagraphNodeComponent, {
+            path: childPath,
+            node: child
+          }, childPath);
+        case "list":
+          return /*#__PURE__*/ReactJSXRuntime.jsx(ListNodeComponent, {
+            path: childPath,
+            node: child
+          }, childPath);
+        default:
+          throw Error("Unknown root node type: " + childType);
+      }
+    })
+  });
+}
+function TextNodeComponent(_ref2) {
+  var _parse, _node$format;
+  var node = _ref2.node;
+  var styleProps = node.style ? (_parse = parse__default["default"](node.style)) !== null && _parse !== void 0 ? _parse : {} : {};
+  // TODO: Ugly! We should do this before serializing instead
+  if (styleProps["font-family"]) {
+    styleProps["fontFamily"] = styleProps["font-family"];
+    delete styleProps["font-family"];
+  }
+  if (styleProps["font-size"]) {
+    styleProps["fontSize"] = styleProps["font-size"];
+    delete styleProps["font-size"];
+  }
+  var bitmask = (_node$format = node.format) === null || _node$format === void 0 ? void 0 : _node$format.toString(2);
+  var bitmaskOffset = bitmask ? bitmask.length - 1 : 0;
+  function isBitOne(bit) {
+    if (!bitmask) {
+      return false;
+    }
+    return bitmask.length >= bitmaskOffset - bit && bitmask[bitmaskOffset - bit] === "1";
+  }
+  if (isBitOne(0)) {
+    styleProps["fontWeight"] = "bold";
+  }
+  if (isBitOne(1)) {
+    styleProps["fontStyle"] = "italic";
+  }
+  if (isBitOne(2)) {
+    if (!styleProps["textDecoration"]) {
+      styleProps["textDecoration"] = "line-through";
+    } else {
+      styleProps["textDecoration"] += " line-through";
+    }
+  }
+  if (isBitOne(3)) {
+    if (!styleProps["textDecoration"]) {
+      styleProps["textDecoration"] = "underline";
+    } else {
+      styleProps["textDecoration"] += " underline";
+    }
+  }
+  return /*#__PURE__*/ReactJSXRuntime.jsx("span", {
+    style: styleProps,
+    children: node.text
+  });
+}
+function HeadingNodeComponent(_ref3) {
+  var node = _ref3.node,
+    path = _ref3.path;
+  return /*#__PURE__*/React.createElement(node.tag, {}, node.children.map(function (child, i) {
+    var childPath = "".concat(path, ".").concat(i);
+    return /*#__PURE__*/ReactJSXRuntime.jsx(TextNodeComponent, {
+      node: child
+    }, childPath);
+  }));
+}
+function ParagraphNodeComponent(_ref4) {
+  var node = _ref4.node,
+    path = _ref4.path;
+  return /*#__PURE__*/ReactJSXRuntime.jsx("p", {
+    children: node.children.map(function (child, i) {
+      var childPath = "".concat(path, ".").concat(i);
+      switch (child.type) {
+        case "text":
+          return /*#__PURE__*/ReactJSXRuntime.jsx(TextNodeComponent, {
+            node: child
+          }, childPath);
+        default:
+          throw Error("Unknown paragraph node type: " + (child === null || child === void 0 ? void 0 : child.type));
+      }
+    })
+  });
+}
+function ListNodeComponent(_ref5) {
+  var node = _ref5.node,
+    path = _ref5.path;
+  return /*#__PURE__*/React.createElement(node.tag, {}, node.children.map(function (child, i) {
+    var childPath = "".concat(path, ".").concat(i);
+    return /*#__PURE__*/ReactJSXRuntime.jsx(ListItemComponent, {
+      path: childPath,
+      node: child
+    }, childPath);
+  }));
+}
+function ListItemComponent(_ref6) {
+  var node = _ref6.node,
+    path = _ref6.path;
+  return /*#__PURE__*/ReactJSXRuntime.jsx("li", {
+    children: node.children.map(function (child, i) {
+      var childPath = "".concat(path, ".").concat(i);
+      switch (child.type) {
+        case "text":
+          return /*#__PURE__*/ReactJSXRuntime.jsx(TextNodeComponent, {
+            node: child
+          }, childPath);
+        default:
+          throw Error("Unknown list item node type: " + (child === null || child === void 0 ? void 0 : child.type));
+      }
+    })
+  });
+}
+
 Object.defineProperty(exports, 'ValProvider', {
   enumerable: true,
   get: function () { return ValProvider.ValProvider; }
 });
+exports.ValRichText = ValRichText;
 exports.useVal = useVal;

package/dist/valbuild-react.esm.js

@@ -1,5 +1,8 @@
-export { ValProvider } from './ValProvider-07551558.esm.js';
+export { ValProvider } from './ValProvider-2eb6c2f2.esm.js';
 import { Internal } from '@valbuild/core';
+import { createElement } from 'react';
+import parse from 'style-to-object';
+import { jsx } from 'react/jsx-runtime';
 
 function useVal(selector, locale) {
   // const mod = selectable.getModule();
@@ -23,4 +26,137 @@ function useVal(selector, locale) {
   return Internal.getVal(selector, locale);
 }
 
-export { useVal };
+function ValRichText(_ref) {
+  var children = _ref.children;
+  var root = children;
+  var path = root.valPath;
+  return /*#__PURE__*/jsx("div", {
+    "data-val-path": path,
+    children: root.children.map(function (child, i) {
+      var childType = child.type;
+      var childPath = "".concat(path, ".").concat(i);
+      switch (childType) {
+        case "heading":
+          return /*#__PURE__*/jsx(HeadingNodeComponent, {
+            path: childPath,
+            node: child
+          }, childPath);
+        case "paragraph":
+          return /*#__PURE__*/jsx(ParagraphNodeComponent, {
+            path: childPath,
+            node: child
+          }, childPath);
+        case "list":
+          return /*#__PURE__*/jsx(ListNodeComponent, {
+            path: childPath,
+            node: child
+          }, childPath);
+        default:
+          throw Error("Unknown root node type: " + childType);
+      }
+    })
+  });
+}
+function TextNodeComponent(_ref2) {
+  var _parse, _node$format;
+  var node = _ref2.node;
+  var styleProps = node.style ? (_parse = parse(node.style)) !== null && _parse !== void 0 ? _parse : {} : {};
+  // TODO: Ugly! We should do this before serializing instead
+  if (styleProps["font-family"]) {
+    styleProps["fontFamily"] = styleProps["font-family"];
+    delete styleProps["font-family"];
+  }
+  if (styleProps["font-size"]) {
+    styleProps["fontSize"] = styleProps["font-size"];
+    delete styleProps["font-size"];
+  }
+  var bitmask = (_node$format = node.format) === null || _node$format === void 0 ? void 0 : _node$format.toString(2);
+  var bitmaskOffset = bitmask ? bitmask.length - 1 : 0;
+  function isBitOne(bit) {
+    if (!bitmask) {
+      return false;
+    }
+    return bitmask.length >= bitmaskOffset - bit && bitmask[bitmaskOffset - bit] === "1";
+  }
+  if (isBitOne(0)) {
+    styleProps["fontWeight"] = "bold";
+  }
+  if (isBitOne(1)) {
+    styleProps["fontStyle"] = "italic";
+  }
+  if (isBitOne(2)) {
+    if (!styleProps["textDecoration"]) {
+      styleProps["textDecoration"] = "line-through";
+    } else {
+      styleProps["textDecoration"] += " line-through";
+    }
+  }
+  if (isBitOne(3)) {
+    if (!styleProps["textDecoration"]) {
+      styleProps["textDecoration"] = "underline";
+    } else {
+      styleProps["textDecoration"] += " underline";
+    }
+  }
+  return /*#__PURE__*/jsx("span", {
+    style: styleProps,
+    children: node.text
+  });
+}
+function HeadingNodeComponent(_ref3) {
+  var node = _ref3.node,
+    path = _ref3.path;
+  return /*#__PURE__*/createElement(node.tag, {}, node.children.map(function (child, i) {
+    var childPath = "".concat(path, ".").concat(i);
+    return /*#__PURE__*/jsx(TextNodeComponent, {
+      node: child
+    }, childPath);
+  }));
+}
+function ParagraphNodeComponent(_ref4) {
+  var node = _ref4.node,
+    path = _ref4.path;
+  return /*#__PURE__*/jsx("p", {
+    children: node.children.map(function (child, i) {
+      var childPath = "".concat(path, ".").concat(i);
+      switch (child.type) {
+        case "text":
+          return /*#__PURE__*/jsx(TextNodeComponent, {
+            node: child
+          }, childPath);
+        default:
+          throw Error("Unknown paragraph node type: " + (child === null || child === void 0 ? void 0 : child.type));
+      }
+    })
+  });
+}
+function ListNodeComponent(_ref5) {
+  var node = _ref5.node,
+    path = _ref5.path;
+  return /*#__PURE__*/createElement(node.tag, {}, node.children.map(function (child, i) {
+    var childPath = "".concat(path, ".").concat(i);
+    return /*#__PURE__*/jsx(ListItemComponent, {
+      path: childPath,
+      node: child
+    }, childPath);
+  }));
+}
+function ListItemComponent(_ref6) {
+  var node = _ref6.node,
+    path = _ref6.path;
+  return /*#__PURE__*/jsx("li", {
+    children: node.children.map(function (child, i) {
+      var childPath = "".concat(path, ".").concat(i);
+      switch (child.type) {
+        case "text":
+          return /*#__PURE__*/jsx(TextNodeComponent, {
+            node: child
+          }, childPath);
+        default:
+          throw Error("Unknown list item node type: " + (child === null || child === void 0 ? void 0 : child.type));
+      }
+    })
+  });
+}
+
+export { ValRichText, useVal };

package/dist/valbuild-react.worker.esm.js

@@ -1,5 +1,8 @@
-export { ValProvider } from './ValProvider-50aa4ba8.worker.esm.js';
+export { ValProvider } from './ValProvider-cb5a2161.worker.esm.js';
 import { Internal } from '@valbuild/core';
+import { createElement } from 'react';
+import parse from 'style-to-object';
+import { jsx } from 'react/jsx-runtime';
 
 function useVal(selector, locale) {
   // const mod = selectable.getModule();
@@ -23,4 +26,137 @@ function useVal(selector, locale) {
   return Internal.getVal(selector, locale);
 }
 
-export { useVal };
+function ValRichText(_ref) {
+  var children = _ref.children;
+  var root = children;
+  var path = root.valPath;
+  return /*#__PURE__*/jsx("div", {
+    "data-val-path": path,
+    children: root.children.map(function (child, i) {
+      var childType = child.type;
+      var childPath = "".concat(path, ".").concat(i);
+      switch (childType) {
+        case "heading":
+          return /*#__PURE__*/jsx(HeadingNodeComponent, {
+            path: childPath,
+            node: child
+          }, childPath);
+        case "paragraph":
+          return /*#__PURE__*/jsx(ParagraphNodeComponent, {
+            path: childPath,
+            node: child
+          }, childPath);
+        case "list":
+          return /*#__PURE__*/jsx(ListNodeComponent, {
+            path: childPath,
+            node: child
+          }, childPath);
+        default:
+          throw Error("Unknown root node type: " + childType);
+      }
+    })
+  });
+}
+function TextNodeComponent(_ref2) {
+  var _parse, _node$format;
+  var node = _ref2.node;
+  var styleProps = node.style ? (_parse = parse(node.style)) !== null && _parse !== void 0 ? _parse : {} : {};
+  // TODO: Ugly! We should do this before serializing instead
+  if (styleProps["font-family"]) {
+    styleProps["fontFamily"] = styleProps["font-family"];
+    delete styleProps["font-family"];
+  }
+  if (styleProps["font-size"]) {
+    styleProps["fontSize"] = styleProps["font-size"];
+    delete styleProps["font-size"];
+  }
+  var bitmask = (_node$format = node.format) === null || _node$format === void 0 ? void 0 : _node$format.toString(2);
+  var bitmaskOffset = bitmask ? bitmask.length - 1 : 0;
+  function isBitOne(bit) {
+    if (!bitmask) {
+      return false;
+    }
+    return bitmask.length >= bitmaskOffset - bit && bitmask[bitmaskOffset - bit] === "1";
+  }
+  if (isBitOne(0)) {
+    styleProps["fontWeight"] = "bold";
+  }
+  if (isBitOne(1)) {
+    styleProps["fontStyle"] = "italic";
+  }
+  if (isBitOne(2)) {
+    if (!styleProps["textDecoration"]) {
+      styleProps["textDecoration"] = "line-through";
+    } else {
+      styleProps["textDecoration"] += " line-through";
+    }
+  }
+  if (isBitOne(3)) {
+    if (!styleProps["textDecoration"]) {
+      styleProps["textDecoration"] = "underline";
+    } else {
+      styleProps["textDecoration"] += " underline";
+    }
+  }
+  return /*#__PURE__*/jsx("span", {
+    style: styleProps,
+    children: node.text
+  });
+}
+function HeadingNodeComponent(_ref3) {
+  var node = _ref3.node,
+    path = _ref3.path;
+  return /*#__PURE__*/createElement(node.tag, {}, node.children.map(function (child, i) {
+    var childPath = "".concat(path, ".").concat(i);
+    return /*#__PURE__*/jsx(TextNodeComponent, {
+      node: child
+    }, childPath);
+  }));
+}
+function ParagraphNodeComponent(_ref4) {
+  var node = _ref4.node,
+    path = _ref4.path;
+  return /*#__PURE__*/jsx("p", {
+    children: node.children.map(function (child, i) {
+      var childPath = "".concat(path, ".").concat(i);
+      switch (child.type) {
+        case "text":
+          return /*#__PURE__*/jsx(TextNodeComponent, {
+            node: child
+          }, childPath);
+        default:
+          throw Error("Unknown paragraph node type: " + (child === null || child === void 0 ? void 0 : child.type));
+      }
+    })
+  });
+}
+function ListNodeComponent(_ref5) {
+  var node = _ref5.node,
+    path = _ref5.path;
+  return /*#__PURE__*/createElement(node.tag, {}, node.children.map(function (child, i) {
+    var childPath = "".concat(path, ".").concat(i);
+    return /*#__PURE__*/jsx(ListItemComponent, {
+      path: childPath,
+      node: child
+    }, childPath);
+  }));
+}
+function ListItemComponent(_ref6) {
+  var node = _ref6.node,
+    path = _ref6.path;
+  return /*#__PURE__*/jsx("li", {
+    children: node.children.map(function (child, i) {
+      var childPath = "".concat(path, ".").concat(i);
+      switch (child.type) {
+        case "text":
+          return /*#__PURE__*/jsx(TextNodeComponent, {
+            node: child
+          }, childPath);
+        default:
+          throw Error("Unknown list item node type: " + (child === null || child === void 0 ? void 0 : child.type));
+      }
+    })
+  });
+}
+
+export { ValRichText, useVal };

package/jsx-dev-runtime/dist/valbuild-react-jsx-dev-runtime.browser.esm.js

@@ -1,6 +1,6 @@
 import { _ as _slicedToArray, a as _typeof } from '../../dist/slicedToArray-1a246338.browser.esm.js';
 import { Internal } from '@valbuild/core';
-import * as ReactJSXRuntimeDev from 'react/jsx-dev-runtime';
+import * as jsxRuntimeDev from 'react/jsx-dev-runtime';
 export * from 'react/jsx-dev-runtime';
 import '../../dist/unsupportedIterableToArray-d3087ed5.browser.esm.js';
 
@@ -36,7 +36,7 @@ function jsxDEV(type, props, key, isStaticChildren, source, self) {
   // console.log("jsxDEV", type, props, key, isStaticChildren, source, self);
 
   devalProps(type, props);
-  return ReactJSXRuntimeDev.jsxDEV(type, props, key, isStaticChildren, source, self);
+  return jsxRuntimeDev.jsxDEV(type, props, key, isStaticChildren, source, self);
 }
 
 export { jsxDEV };

package/jsx-dev-runtime/dist/valbuild-react-jsx-dev-runtime.cjs.dev.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var slicedToArray = require('../../dist/slicedToArray-b7cf26e0.cjs.dev.js');
 var core = require('@valbuild/core');
-var ReactJSXRuntimeDev = require('react/jsx-dev-runtime');
+var jsxRuntimeDev = require('react/jsx-dev-runtime');
 require('../../dist/unsupportedIterableToArray-9e97e24a.cjs.dev.js');
 
 function _interopNamespace(e) {
@@ -25,7 +25,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var ReactJSXRuntimeDev__namespace = /*#__PURE__*/_interopNamespace(ReactJSXRuntimeDev);
+var jsxRuntimeDev__namespace = /*#__PURE__*/_interopNamespace(jsxRuntimeDev);
 
 var isIntrinsicElement = function isIntrinsicElement(type) {
   // TODO: think this is not correct, but good enough for now?
@@ -59,13 +59,13 @@ function jsxDEV(type, props, key, isStaticChildren, source, self) {
   // console.log("jsxDEV", type, props, key, isStaticChildren, source, self);
 
   devalProps(type, props);
-  return ReactJSXRuntimeDev__namespace.jsxDEV(type, props, key, isStaticChildren, source, self);
+  return jsxRuntimeDev__namespace.jsxDEV(type, props, key, isStaticChildren, source, self);
 }
 
 exports.jsxDEV = jsxDEV;
-Object.keys(ReactJSXRuntimeDev).forEach(function (k) {
+Object.keys(jsxRuntimeDev).forEach(function (k) {
   if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
     enumerable: true,
-    get: function () { return ReactJSXRuntimeDev[k]; }
+    get: function () { return jsxRuntimeDev[k]; }
   });
 });

package/jsx-dev-runtime/dist/valbuild-react-jsx-dev-runtime.cjs.prod.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var slicedToArray = require('../../dist/slicedToArray-0eb0bcdb.cjs.prod.js');
 var core = require('@valbuild/core');
-var ReactJSXRuntimeDev = require('react/jsx-dev-runtime');
+var jsxRuntimeDev = require('react/jsx-dev-runtime');
 require('../../dist/unsupportedIterableToArray-afbea1dd.cjs.prod.js');
 
 function _interopNamespace(e) {
@@ -25,7 +25,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var ReactJSXRuntimeDev__namespace = /*#__PURE__*/_interopNamespace(ReactJSXRuntimeDev);
+var jsxRuntimeDev__namespace = /*#__PURE__*/_interopNamespace(jsxRuntimeDev);
 
 var isIntrinsicElement = function isIntrinsicElement(type) {
   // TODO: think this is not correct, but good enough for now?
@@ -59,13 +59,13 @@ function jsxDEV(type, props, key, isStaticChildren, source, self) {
   // console.log("jsxDEV", type, props, key, isStaticChildren, source, self);
 
   devalProps(type, props);
-  return ReactJSXRuntimeDev__namespace.jsxDEV(type, props, key, isStaticChildren, source, self);
+  return jsxRuntimeDev__namespace.jsxDEV(type, props, key, isStaticChildren, source, self);
 }
 
 exports.jsxDEV = jsxDEV;
-Object.keys(ReactJSXRuntimeDev).forEach(function (k) {
+Object.keys(jsxRuntimeDev).forEach(function (k) {
   if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
     enumerable: true,
-    get: function () { return ReactJSXRuntimeDev[k]; }
+    get: function () { return jsxRuntimeDev[k]; }
   });
 });

package/jsx-dev-runtime/dist/valbuild-react-jsx-dev-runtime.esm.js

@@ -1,6 +1,6 @@
 import { _ as _slicedToArray, a as _typeof } from '../../dist/slicedToArray-d846e1d2.esm.js';
 import { Internal } from '@valbuild/core';
-import * as ReactJSXRuntimeDev from 'react/jsx-dev-runtime';
+import * as jsxRuntimeDev from 'react/jsx-dev-runtime';
 export * from 'react/jsx-dev-runtime';
 import '../../dist/unsupportedIterableToArray-51bb61c2.esm.js';
 
@@ -36,7 +36,7 @@ function jsxDEV(type, props, key, isStaticChildren, source, self) {
   // console.log("jsxDEV", type, props, key, isStaticChildren, source, self);
 
   devalProps(type, props);
-  return ReactJSXRuntimeDev.jsxDEV(type, props, key, isStaticChildren, source, self);
+  return jsxRuntimeDev.jsxDEV(type, props, key, isStaticChildren, source, self);
 }
 
 export { jsxDEV };

package/jsx-dev-runtime/dist/valbuild-react-jsx-dev-runtime.worker.esm.js

@@ -1,6 +1,6 @@
 import { _ as _slicedToArray, a as _typeof } from '../../dist/slicedToArray-9e7d1407.worker.esm.js';
 import { Internal } from '@valbuild/core';
-import * as ReactJSXRuntimeDev from 'react/jsx-dev-runtime';
+import * as jsxRuntimeDev from 'react/jsx-dev-runtime';
 export * from 'react/jsx-dev-runtime';
 import '../../dist/unsupportedIterableToArray-738344ef.worker.esm.js';
 
@@ -36,7 +36,7 @@ function jsxDEV(type, props, key, isStaticChildren, source, self) {
   // console.log("jsxDEV", type, props, key, isStaticChildren, source, self);
 
   devalProps(type, props);
-  return ReactJSXRuntimeDev.jsxDEV(type, props, key, isStaticChildren, source, self);
+  return jsxRuntimeDev.jsxDEV(type, props, key, isStaticChildren, source, self);
 }
 
 export { jsxDEV };

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@valbuild/react",
-  "version": "0.13.4",
+  "version": "0.14.0",
   "private": false,
-  "description": "Val - React",
+  "description": "Val - React internal helpers",
   "sideEffects": false,
   "scripts": {
     "typecheck": "tsc --noEmit",
     "test": "jest"
   },
   "dependencies": {
-    "@valbuild/core": "~0.13.4",
+    "@valbuild/core": "~0.14.0",
     "@valbuild/ui": "~0.13.4",
+    "@vercel/stega": "^0.1.0",
     "base64-arraybuffer": "^1.0.2",
     "style-to-object": "^0.4.1"
   },
@@ -34,7 +35,8 @@
     "entrypoints": [
       "./index.ts",
       "./jsx-runtime.js",
-      "./jsx-dev-runtime.js"
+      "./jsx-dev-runtime.js",
+      "./stega/index.ts"
     ],
     "exports": {
       "envConditions": [
@@ -68,6 +70,14 @@
       },
       "default": "./jsx-runtime/dist/valbuild-react-jsx-runtime.cjs.js"
     },
+    "./stega": {
+      "module": {
+        "worker": "./stega/dist/valbuild-react-stega.worker.esm.js",
+        "browser": "./stega/dist/valbuild-react-stega.browser.esm.js",
+        "default": "./stega/dist/valbuild-react-stega.esm.js"
+      },
+      "default": "./stega/dist/valbuild-react-stega.cjs.js"
+    },
     "./jsx-dev-runtime": {
       "module": {
         "worker": "./jsx-dev-runtime/dist/valbuild-react-jsx-dev-runtime.worker.esm.js",

package/src/ShadowRoot.tsx

@@ -17,10 +17,14 @@ export const ShadowRoot = ({ children }: { children: React.ReactNode }) => {
 
   useLayoutEffect(() => {
     if (node.current) {
-      const root = node.current.attachShadow({
-        mode: "closed",
-      });
-      setRoot(root);
+      if (node.current.shadowRoot) {
+        setRoot(node.current.shadowRoot);
+      } else {
+        const root = node.current.attachShadow({
+          mode: "open",
+        });
+        setRoot(root);
+      }
     }
   }, []);