@xanui/core 1.2.42 → 1.2.44

package/AppRoot/{context.js → AppRootProvider.cjs}

@@ -17,4 +17,4 @@ const useAppRootElement = () => {
 
 exports.AppRootProvider = AppRootProvider;
 exports.useAppRootElement = useAppRootElement;
-//# sourceMappingURL=context.js.map
+//# sourceMappingURL=AppRootProvider.cjs.map

package/AppRoot/AppRootProvider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppRootProvider.cjs","sources":["../../src/AppRoot/AppRootProvider.tsx"],"sourcesContent":["import React from \"react\";\r\n\r\nconst AppRootContext = React.createContext<HTMLElement | null>(null);\r\n\r\nexport const AppRootProvider: React.FC<{ element: HTMLElement | null; children: React.ReactNode }> = ({ element, children }) => {\r\n   return (\r\n      <AppRootContext.Provider value={element}>\r\n         {children}\r\n      </AppRootContext.Provider>\r\n   );\r\n}\r\n\r\nexport const useAppRootElement = (): HTMLElement => {\r\n   const context = React.useContext(AppRootContext);\r\n   if (typeof window === 'undefined') {\r\n      return null as any;\r\n   }\r\n   return context as HTMLElement\r\n}\r\n"],"names":["_jsx"],"mappings":";;;;;AAEA,MAAM,cAAc,GAAG,KAAK,CAAC,aAAa,CAAqB,IAAI,CAAC;AAE7D,MAAM,eAAe,GAAyE,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAI;AAC5H,IAAA,QACGA,cAAA,CAAC,cAAc,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,OAAO,EAAA,QAAA,EACnC,QAAQ,EAAA,CACc;AAEhC;AAEO,MAAM,iBAAiB,GAAG,MAAkB;IAChD,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC;AAChD,IAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;AAChC,QAAA,OAAO,IAAW;IACrB;AACA,IAAA,OAAO,OAAsB;AAChC;;;;;"}

package/AppRoot/{context.mjs → AppRootProvider.js}

@@ -14,4 +14,4 @@ const useAppRootElement = () => {
 };
 
 export { AppRootProvider, useAppRootElement };
-//# sourceMappingURL=context.mjs.map
+//# sourceMappingURL=AppRootProvider.js.map

package/AppRoot/AppRootProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppRootProvider.js","sources":["../../src/AppRoot/AppRootProvider.tsx"],"sourcesContent":["import React from \"react\";\r\n\r\nconst AppRootContext = React.createContext<HTMLElement | null>(null);\r\n\r\nexport const AppRootProvider: React.FC<{ element: HTMLElement | null; children: React.ReactNode }> = ({ element, children }) => {\r\n   return (\r\n      <AppRootContext.Provider value={element}>\r\n         {children}\r\n      </AppRootContext.Provider>\r\n   );\r\n}\r\n\r\nexport const useAppRootElement = (): HTMLElement => {\r\n   const context = React.useContext(AppRootContext);\r\n   if (typeof window === 'undefined') {\r\n      return null as any;\r\n   }\r\n   return context as HTMLElement\r\n}\r\n"],"names":["React","_jsx"],"mappings":";;;AAEA,MAAM,cAAc,GAAGA,cAAK,CAAC,aAAa,CAAqB,IAAI,CAAC;AAE7D,MAAM,eAAe,GAAyE,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAI;AAC5H,IAAA,QACGC,GAAA,CAAC,cAAc,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,OAAO,EAAA,QAAA,EACnC,QAAQ,EAAA,CACc;AAEhC;AAEO,MAAM,iBAAiB,GAAG,MAAkB;IAChD,MAAM,OAAO,GAAGD,cAAK,CAAC,UAAU,CAAC,cAAc,CAAC;AAChD,IAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;AAChC,QAAA,OAAO,IAAW;IACrB;AACA,IAAA,OAAO,OAAsB;AAChC;;;;"}

package/AppRoot/Renderar.cjs

@@ -0,0 +1,89 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../Document/index.cjs');
+
+const State = new Map();
+const Dispatch = new Map();
+class Renderar {
+    static render(component, props) {
+        const docid = Renderar.doc.id;
+        let components = State.get(docid) || [];
+        components.push({ component, props });
+        State.set(Renderar.doc.id, components);
+        const dispatch = Dispatch.get(docid);
+        if (dispatch) {
+            dispatch();
+        }
+        return {
+            unrender: () => {
+                this.unrender(component);
+            },
+            updateProps: (newProps) => {
+                this.updateProps(component, newProps);
+            }
+        };
+    }
+    static unrender(component) {
+        const docid = Renderar.doc.id;
+        let components = State.get(docid) || [];
+        const index = components.findIndex((c) => c.component === component);
+        if (index > -1) {
+            components.splice(index, 1);
+            const dispatch = Dispatch.get(docid);
+            if (dispatch) {
+                dispatch();
+            }
+        }
+    }
+    static updateProps(component, props) {
+        const docid = Renderar.doc.id;
+        let components = State.get(docid) || [];
+        const storedComponent = components.find((c) => c.component === component);
+        if (storedComponent) {
+            storedComponent.props = Object.assign(Object.assign({}, storedComponent.props), props);
+        }
+        const dispatch = Dispatch.get(docid);
+        if (dispatch) {
+            dispatch();
+        }
+    }
+}
+const RenderRenderar = () => {
+    const [, setState] = React.useState(0);
+    const doc = index.useDocument();
+    React.useMemo(() => {
+        const render = Renderar.render;
+        const unrender = Renderar.unrender;
+        const updateProps = Renderar.updateProps;
+        Renderar.render = ((component, props) => {
+            Renderar.doc = doc;
+            render(component, Object.assign(Object.assign({}, props), { $doc: doc }));
+            Renderar.doc = null;
+        });
+        Renderar.unrender = ((component) => {
+            Renderar.doc = doc;
+            unrender(component);
+            Renderar.doc = null;
+        });
+        Renderar.updateProps = ((component, props) => {
+            Renderar.doc = doc;
+            updateProps(component, props);
+            Renderar.doc = null;
+        });
+    }, [doc.id]);
+    if (!Dispatch.has(doc.id)) {
+        Dispatch.set(doc.id, () => {
+            setState((prev) => prev + 1);
+        });
+    }
+    const components = State.get(doc.id) || [];
+    return components.map(({ component: Component, props }, index) => {
+        return jsxRuntime.jsx(Component, Object.assign({}, props), index);
+    });
+};
+
+exports.RenderRenderar = RenderRenderar;
+exports.Renderar = Renderar;
+//# sourceMappingURL=Renderar.cjs.map

package/AppRoot/Renderar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Renderar.cjs","sources":["../../src/AppRoot/Renderar.tsx"],"sourcesContent":["import React, { ReactElement, useMemo } from \"react\";\r\nimport { DocumentID, useDocument } from \"../Document\";\r\n\r\ntype StoredComponent = {\r\n   component: React.FunctionComponent<any>;\r\n   props: any;\r\n};\r\n\r\nconst State = new Map<DocumentID, StoredComponent[]>()\r\nconst Dispatch = new Map<DocumentID, Function>()\r\n\r\nexport class Renderar {\r\n   static doc: any\r\n   static render(component: React.FunctionComponent, props?: any) {\r\n      const docid = Renderar.doc.id\r\n      let components = State.get(docid) || []\r\n      components.push({ component, props })\r\n      State.set(Renderar.doc.id, components)\r\n      const dispatch = Dispatch.get(docid)\r\n      if (dispatch) {\r\n         dispatch()\r\n      }\r\n\r\n      return {\r\n         unrender: () => {\r\n            this.unrender(component);\r\n         },\r\n         updateProps: (newProps: any) => {\r\n            this.updateProps(component, newProps);\r\n         }\r\n      };\r\n   }\r\n\r\n   static unrender(component: React.FunctionComponent) {\r\n      const docid = Renderar.doc.id\r\n      let components = State.get(docid) || []\r\n\r\n      const index = components.findIndex((c) => c.component === component);\r\n      if (index > -1) {\r\n         components.splice(index, 1);\r\n         const dispatch = Dispatch.get(docid)\r\n         if (dispatch) {\r\n            dispatch()\r\n         }\r\n      }\r\n   }\r\n\r\n   static updateProps(component: React.FunctionComponent, props: any) {\r\n      const docid = Renderar.doc.id\r\n      let components = State.get(docid) || []\r\n\r\n      const storedComponent = components.find((c) => c.component === component);\r\n      if (storedComponent) {\r\n         storedComponent.props = { ...storedComponent.props, ...props };\r\n      }\r\n      const dispatch = Dispatch.get(docid)\r\n      if (dispatch) {\r\n         dispatch()\r\n      }\r\n   }\r\n}\r\n\r\nexport const RenderRenderar = () => {\r\n   const [, setState] = React.useState(0);\r\n   const doc = useDocument()\r\n\r\n   useMemo(() => {\r\n      const render = Renderar.render\r\n      const unrender = Renderar.unrender\r\n      const updateProps = Renderar.updateProps\r\n      Renderar.render = ((component: React.FunctionComponent, props?: any) => {\r\n         Renderar.doc = doc\r\n         render(component, { ...props, $doc: doc })\r\n         Renderar.doc = null\r\n      }) as any\r\n\r\n      Renderar.unrender = ((component: React.FunctionComponent) => {\r\n         Renderar.doc = doc\r\n         unrender(component)\r\n         Renderar.doc = null\r\n      }) as any\r\n\r\n      Renderar.updateProps = ((component: React.FunctionComponent, props: any) => {\r\n         Renderar.doc = doc\r\n         updateProps(component, props)\r\n         Renderar.doc = null\r\n      }) as any\r\n\r\n   }, [doc.id])\r\n\r\n   if (!Dispatch.has(doc.id)) {\r\n      Dispatch.set(doc.id, () => {\r\n         setState((prev) => prev + 1);\r\n      })\r\n   }\r\n   const components = State.get(doc.id) || []\r\n\r\n   return components.map(({ component: Component, props }, index): ReactElement => {\r\n      return <Component key={index} {...props} />;\r\n   });\r\n}\r\n"],"names":["useDocument","useMemo","_jsx"],"mappings":";;;;;;AAQA,MAAM,KAAK,GAAG,IAAI,GAAG,EAAiC;AACtD,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAwB;MAEnC,QAAQ,CAAA;AAElB,IAAA,OAAO,MAAM,CAAC,SAAkC,EAAE,KAAW,EAAA;AAC1D,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,EAAE;QAC7B,IAAI,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE;QACvC,UAAU,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;QACrC,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,EAAE,UAAU,CAAC;QACtC,MAAM,QAAQ,GAAG,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;QACpC,IAAI,QAAQ,EAAE;AACX,YAAA,QAAQ,EAAE;QACb;QAEA,OAAO;YACJ,QAAQ,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC;YAC3B,CAAC;AACD,YAAA,WAAW,EAAE,CAAC,QAAa,KAAI;AAC5B,gBAAA,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,QAAQ,CAAC;YACxC;SACF;IACJ;IAEA,OAAO,QAAQ,CAAC,SAAkC,EAAA;AAC/C,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,EAAE;QAC7B,IAAI,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE;AAEvC,QAAA,MAAM,KAAK,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC;AACpE,QAAA,IAAI,KAAK,GAAG,EAAE,EAAE;AACb,YAAA,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;YAC3B,MAAM,QAAQ,GAAG,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;YACpC,IAAI,QAAQ,EAAE;AACX,gBAAA,QAAQ,EAAE;YACb;QACH;IACH;AAEA,IAAA,OAAO,WAAW,CAAC,SAAkC,EAAE,KAAU,EAAA;AAC9D,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,EAAE;QAC7B,IAAI,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE;AAEvC,QAAA,MAAM,eAAe,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC;QACzE,IAAI,eAAe,EAAE;YAClB,eAAe,CAAC,KAAK,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,eAAe,CAAC,KAAK,CAAA,EAAK,KAAK,CAAE;QACjE;QACA,MAAM,QAAQ,GAAG,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;QACpC,IAAI,QAAQ,EAAE;AACX,YAAA,QAAQ,EAAE;QACb;IACH;AACF;AAEM,MAAM,cAAc,GAAG,MAAK;IAChC,MAAM,GAAG,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;AACtC,IAAA,MAAM,GAAG,GAAGA,iBAAW,EAAE;IAEzBC,aAAO,CAAC,MAAK;AACV,QAAA,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAM;AAC9B,QAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,QAAQ;AAClC,QAAA,MAAM,WAAW,GAAG,QAAQ,CAAC,WAAW;QACxC,QAAQ,CAAC,MAAM,IAAI,CAAC,SAAkC,EAAE,KAAW,KAAI;AACpE,YAAA,QAAQ,CAAC,GAAG,GAAG,GAAG;YAClB,MAAM,CAAC,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAO,KAAK,KAAE,IAAI,EAAE,GAAG,EAAA,CAAA,CAAG;AAC1C,YAAA,QAAQ,CAAC,GAAG,GAAG,IAAI;AACtB,QAAA,CAAC,CAAQ;AAET,QAAA,QAAQ,CAAC,QAAQ,IAAI,CAAC,SAAkC,KAAI;AACzD,YAAA,QAAQ,CAAC,GAAG,GAAG,GAAG;YAClB,QAAQ,CAAC,SAAS,CAAC;AACnB,YAAA,QAAQ,CAAC,GAAG,GAAG,IAAI;AACtB,QAAA,CAAC,CAAQ;QAET,QAAQ,CAAC,WAAW,IAAI,CAAC,SAAkC,EAAE,KAAU,KAAI;AACxE,YAAA,QAAQ,CAAC,GAAG,GAAG,GAAG;AAClB,YAAA,WAAW,CAAC,SAAS,EAAE,KAAK,CAAC;AAC7B,YAAA,QAAQ,CAAC,GAAG,GAAG,IAAI;AACtB,QAAA,CAAC,CAAQ;AAEZ,IAAA,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAEZ,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE;QACxB,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,EAAE,MAAK;YACvB,QAAQ,CAAC,CAAC,IAAI,KAAK,IAAI,GAAG,CAAC,CAAC;AAC/B,QAAA,CAAC,CAAC;IACL;AACA,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,EAAE;AAE1C,IAAA,OAAO,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,KAAkB;AAC5E,QAAA,OAAOC,eAAC,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAiB,KAAK,CAAA,EAAhB,KAAK,CAAe;AAC9C,IAAA,CAAC,CAAC;AACL;;;;;"}

package/AppRoot/Renderar.d.ts

@@ -1,6 +1,7 @@
 import React__default from 'react';
 
 declare class Renderar {
+    static doc: any;
     static render(component: React__default.FunctionComponent, props?: any): {
         unrender: () => void;
         updateProps: (newProps: any) => void;

package/AppRoot/Renderar.js

@@ -1,13 +1,16 @@
-'use strict';
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useMemo } from 'react';
+import { useDocument } from '../Document/index.js';
 
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-
-const Components = [];
-let dispatch = null;
+const State = new Map();
+const Dispatch = new Map();
 class Renderar {
     static render(component, props) {
-        Components.push({ component, props });
+        const docid = Renderar.doc.id;
+        let components = State.get(docid) || [];
+        components.push({ component, props });
+        State.set(Renderar.doc.id, components);
+        const dispatch = Dispatch.get(docid);
         if (dispatch) {
             dispatch();
         }
@@ -21,34 +24,63 @@ class Renderar {
         };
     }
     static unrender(component) {
-        const index = Components.findIndex((c) => c.component === component);
+        const docid = Renderar.doc.id;
+        let components = State.get(docid) || [];
+        const index = components.findIndex((c) => c.component === component);
         if (index > -1) {
-            Components.splice(index, 1);
-            if (dispatch)
+            components.splice(index, 1);
+            const dispatch = Dispatch.get(docid);
+            if (dispatch) {
                 dispatch();
+            }
         }
     }
     static updateProps(component, props) {
-        const storedComponent = Components.find((c) => c.component === component);
+        const docid = Renderar.doc.id;
+        let components = State.get(docid) || [];
+        const storedComponent = components.find((c) => c.component === component);
         if (storedComponent) {
             storedComponent.props = Object.assign(Object.assign({}, storedComponent.props), props);
         }
-        if (dispatch)
+        const dispatch = Dispatch.get(docid);
+        if (dispatch) {
             dispatch();
+        }
     }
 }
 const RenderRenderar = () => {
-    const [, setState] = React.useState(0);
-    if (!dispatch) {
-        dispatch = () => {
+    const [, setState] = React__default.useState(0);
+    const doc = useDocument();
+    useMemo(() => {
+        const render = Renderar.render;
+        const unrender = Renderar.unrender;
+        const updateProps = Renderar.updateProps;
+        Renderar.render = ((component, props) => {
+            Renderar.doc = doc;
+            render(component, Object.assign(Object.assign({}, props), { $doc: doc }));
+            Renderar.doc = null;
+        });
+        Renderar.unrender = ((component) => {
+            Renderar.doc = doc;
+            unrender(component);
+            Renderar.doc = null;
+        });
+        Renderar.updateProps = ((component, props) => {
+            Renderar.doc = doc;
+            updateProps(component, props);
+            Renderar.doc = null;
+        });
+    }, [doc.id]);
+    if (!Dispatch.has(doc.id)) {
+        Dispatch.set(doc.id, () => {
             setState((prev) => prev + 1);
-        };
+        });
     }
-    return Components.map(({ component: Component, props }, index) => {
-        return jsxRuntime.jsx(Component, Object.assign({}, props), index);
+    const components = State.get(doc.id) || [];
+    return components.map(({ component: Component, props }, index) => {
+        return jsx(Component, Object.assign({}, props), index);
     });
 };
 
-exports.RenderRenderar = RenderRenderar;
-exports.Renderar = Renderar;
+export { RenderRenderar, Renderar };
 //# sourceMappingURL=Renderar.js.map

package/AppRoot/Renderar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Renderar.js","sources":["../../src/AppRoot/Renderar.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\r\n\r\ntype StoredComponent = {\r\n   component: React.FunctionComponent<any>;\r\n   props: any;\r\n};\r\n\r\nconst Components: StoredComponent[] = [];\r\nlet dispatch: (() => void) | null = null;\r\n\r\nexport class Renderar {\r\n   static render(component: React.FunctionComponent, props?: any) {\r\n      Components.push({ component, props });\r\n\r\n      if (dispatch) {\r\n         dispatch();\r\n      }\r\n\r\n      return {\r\n         unrender: () => {\r\n            this.unrender(component);\r\n         },\r\n         updateProps: (newProps: any) => {\r\n            this.updateProps(component, newProps);\r\n         }\r\n      };\r\n   }\r\n\r\n   static unrender(component: React.FunctionComponent) {\r\n      const index = Components.findIndex((c) => c.component === component);\r\n      if (index > -1) {\r\n         Components.splice(index, 1);\r\n         if (dispatch) dispatch();\r\n      }\r\n   }\r\n\r\n   static updateProps(component: React.FunctionComponent, props: any) {\r\n      const storedComponent = Components.find((c) => c.component === component);\r\n      if (storedComponent) {\r\n         storedComponent.props = { ...storedComponent.props, ...props };\r\n      }\r\n      if (dispatch) dispatch();\r\n   }\r\n}\r\n\r\nexport const RenderRenderar = () => {\r\n   const [, setState] = React.useState(0);\r\n\r\n   if (!dispatch) {\r\n      dispatch = () => {\r\n         setState((prev) => prev + 1);\r\n      };\r\n   }\r\n\r\n   return Components.map(({ component: Component, props }, index): ReactElement => {\r\n      return <Component key={index} {...props} />;\r\n   });\r\n};\r\n"],"names":["_jsx"],"mappings":";;;;;AAOA,MAAM,UAAU,GAAsB,EAAE;AACxC,IAAI,QAAQ,GAAwB,IAAI;MAE3B,QAAQ,CAAA;AAClB,IAAA,OAAO,MAAM,CAAC,SAAkC,EAAE,KAAW,EAAA;QAC1D,UAAU,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;QAErC,IAAI,QAAQ,EAAE;AACX,YAAA,QAAQ,EAAE;QACb;QAEA,OAAO;YACJ,QAAQ,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC;YAC3B,CAAC;AACD,YAAA,WAAW,EAAE,CAAC,QAAa,KAAI;AAC5B,gBAAA,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,QAAQ,CAAC;YACxC;SACF;IACJ;IAEA,OAAO,QAAQ,CAAC,SAAkC,EAAA;AAC/C,QAAA,MAAM,KAAK,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC;AACpE,QAAA,IAAI,KAAK,GAAG,EAAE,EAAE;AACb,YAAA,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;AAC3B,YAAA,IAAI,QAAQ;AAAE,gBAAA,QAAQ,EAAE;QAC3B;IACH;AAEA,IAAA,OAAO,WAAW,CAAC,SAAkC,EAAE,KAAU,EAAA;AAC9D,QAAA,MAAM,eAAe,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC;QACzE,IAAI,eAAe,EAAE;YAClB,eAAe,CAAC,KAAK,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,eAAe,CAAC,KAAK,CAAA,EAAK,KAAK,CAAE;QACjE;AACA,QAAA,IAAI,QAAQ;AAAE,YAAA,QAAQ,EAAE;IAC3B;AACF;AAEM,MAAM,cAAc,GAAG,MAAK;IAChC,MAAM,GAAG,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEtC,IAAI,CAAC,QAAQ,EAAE;QACZ,QAAQ,GAAG,MAAK;YACb,QAAQ,CAAC,CAAC,IAAI,KAAK,IAAI,GAAG,CAAC,CAAC;AAC/B,QAAA,CAAC;IACJ;AAEA,IAAA,OAAO,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,KAAkB;AAC5E,QAAA,OAAOA,eAAC,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAiB,KAAK,CAAA,EAAhB,KAAK,CAAe;AAC9C,IAAA,CAAC,CAAC;AACL;;;;;"}
+{"version":3,"file":"Renderar.js","sources":["../../src/AppRoot/Renderar.tsx"],"sourcesContent":["import React, { ReactElement, useMemo } from \"react\";\r\nimport { DocumentID, useDocument } from \"../Document\";\r\n\r\ntype StoredComponent = {\r\n   component: React.FunctionComponent<any>;\r\n   props: any;\r\n};\r\n\r\nconst State = new Map<DocumentID, StoredComponent[]>()\r\nconst Dispatch = new Map<DocumentID, Function>()\r\n\r\nexport class Renderar {\r\n   static doc: any\r\n   static render(component: React.FunctionComponent, props?: any) {\r\n      const docid = Renderar.doc.id\r\n      let components = State.get(docid) || []\r\n      components.push({ component, props })\r\n      State.set(Renderar.doc.id, components)\r\n      const dispatch = Dispatch.get(docid)\r\n      if (dispatch) {\r\n         dispatch()\r\n      }\r\n\r\n      return {\r\n         unrender: () => {\r\n            this.unrender(component);\r\n         },\r\n         updateProps: (newProps: any) => {\r\n            this.updateProps(component, newProps);\r\n         }\r\n      };\r\n   }\r\n\r\n   static unrender(component: React.FunctionComponent) {\r\n      const docid = Renderar.doc.id\r\n      let components = State.get(docid) || []\r\n\r\n      const index = components.findIndex((c) => c.component === component);\r\n      if (index > -1) {\r\n         components.splice(index, 1);\r\n         const dispatch = Dispatch.get(docid)\r\n         if (dispatch) {\r\n            dispatch()\r\n         }\r\n      }\r\n   }\r\n\r\n   static updateProps(component: React.FunctionComponent, props: any) {\r\n      const docid = Renderar.doc.id\r\n      let components = State.get(docid) || []\r\n\r\n      const storedComponent = components.find((c) => c.component === component);\r\n      if (storedComponent) {\r\n         storedComponent.props = { ...storedComponent.props, ...props };\r\n      }\r\n      const dispatch = Dispatch.get(docid)\r\n      if (dispatch) {\r\n         dispatch()\r\n      }\r\n   }\r\n}\r\n\r\nexport const RenderRenderar = () => {\r\n   const [, setState] = React.useState(0);\r\n   const doc = useDocument()\r\n\r\n   useMemo(() => {\r\n      const render = Renderar.render\r\n      const unrender = Renderar.unrender\r\n      const updateProps = Renderar.updateProps\r\n      Renderar.render = ((component: React.FunctionComponent, props?: any) => {\r\n         Renderar.doc = doc\r\n         render(component, { ...props, $doc: doc })\r\n         Renderar.doc = null\r\n      }) as any\r\n\r\n      Renderar.unrender = ((component: React.FunctionComponent) => {\r\n         Renderar.doc = doc\r\n         unrender(component)\r\n         Renderar.doc = null\r\n      }) as any\r\n\r\n      Renderar.updateProps = ((component: React.FunctionComponent, props: any) => {\r\n         Renderar.doc = doc\r\n         updateProps(component, props)\r\n         Renderar.doc = null\r\n      }) as any\r\n\r\n   }, [doc.id])\r\n\r\n   if (!Dispatch.has(doc.id)) {\r\n      Dispatch.set(doc.id, () => {\r\n         setState((prev) => prev + 1);\r\n      })\r\n   }\r\n   const components = State.get(doc.id) || []\r\n\r\n   return components.map(({ component: Component, props }, index): ReactElement => {\r\n      return <Component key={index} {...props} />;\r\n   });\r\n}\r\n"],"names":["React","_jsx"],"mappings":"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"}

package/AppRoot/index.cjs

@@ -0,0 +1,43 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+require('../theme/core.cjs');
+require('../css/getValue.cjs');
+require('oncss');
+var ThemeProvider = require('../theme/ThemeProvider.cjs');
+require('react-state-bucket');
+var BreakpointProvider = require('../breakpoint/BreakpointProvider.cjs');
+var Renderar = require('./Renderar.cjs');
+var index = require('../Document/index.cjs');
+var AppRootProvider = require('./AppRootProvider.cjs');
+var useMergeRefs = require('../hooks/useMergeRefs.cjs');
+var CSSCacheProvider = require('../css/CSSCacheProvider.cjs');
+
+const AppRoot = React.forwardRef((_a, ref) => {
+    var { children, noScrollbarCss, CSSCacheId, theme, document: _document } = _a, props = tslib.__rest(_a, ["children", "noScrollbarCss", "CSSCacheId", "theme", "document"]);
+    noScrollbarCss !== null && noScrollbarCss !== void 0 ? noScrollbarCss : (noScrollbarCss = false);
+    _document !== null && _document !== void 0 ? _document : (_document = document);
+    const docid = React.useId();
+    const csscacheId = React.useId();
+    CSSCacheId !== null && CSSCacheId !== void 0 ? CSSCacheId : (CSSCacheId = csscacheId);
+    const [visibility, setVisibility] = React.useState("hidden");
+    const rootRef = React.useRef(null);
+    const mergeRef = useMergeRefs(rootRef, ref);
+    React.useEffect(() => {
+        setVisibility("visible");
+        // move oncss style tags to head
+        if (typeof _document === 'undefined')
+            return;
+        const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));
+        styles.forEach((style) => {
+            _document.head.appendChild(style);
+        });
+    }, []);
+    return (jsxRuntime.jsx(index.DocumentProvider, { document: _document, id: docid, children: jsxRuntime.jsx(CSSCacheProvider.CSSCacheProvider, { cacheId: CSSCacheId, children: jsxRuntime.jsx(AppRootProvider.AppRootProvider, { element: rootRef.current, children: jsxRuntime.jsx(ThemeProvider, Object.assign({ ref: mergeRef, theme: theme }, props, { isRoot: true, sx: Object.assign(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), children: jsxRuntime.jsxs(BreakpointProvider.BreakpointProvider, { children: [children, jsxRuntime.jsx(Renderar.RenderRenderar, {})] }) })) }) }) }));
+});
+
+module.exports = AppRoot;
+//# sourceMappingURL=index.cjs.map

package/AppRoot/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useId, useRef } from 'react';\r\nimport { TagComponentType } from '../Tag/types';\r\nimport { ThemeProvider, ThemeProviderProps } from '../theme';\r\nimport { BreakpointProvider } from '../breakpoint';\r\nimport { RenderRenderar } from './Renderar';\r\nimport { DocumentProvider } from '../Document';\r\nimport { AppRootProvider } from './AppRootProvider';\r\nimport useMergeRefs from '../hooks/useMergeRefs';\r\nimport { CSSCacheProvider } from '../css/CSSCacheProvider';\r\n\r\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\r\n   noScrollbarCss?: boolean;\r\n   document?: Document;\r\n   CSSCacheId?: string;\r\n}\r\n\r\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, CSSCacheId, theme, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\r\n   noScrollbarCss ??= false\r\n   _document ??= document\r\n   const docid = useId()\r\n\r\n   const csscacheId = useId()\r\n   CSSCacheId ??= csscacheId\r\n\r\n\r\n   const [visibility, setVisibility] = React.useState<string>(\"hidden\");\r\n   const rootRef = useRef(null)\r\n   const mergeRef = useMergeRefs(rootRef, ref)\r\n\r\n   useEffect(() => {\r\n      setVisibility(\"visible\");\r\n\r\n      // move oncss style tags to head\r\n      if (typeof _document === 'undefined') return;\r\n      const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));\r\n      styles.forEach((style) => {\r\n         _document.head.appendChild(style);\r\n      });\r\n   }, [])\r\n\r\n   return (\r\n      <DocumentProvider document={_document} id={docid}>\r\n         <CSSCacheProvider cacheId={CSSCacheId}>\r\n            <AppRootProvider element={rootRef.current}>\r\n               <ThemeProvider\r\n                  ref={mergeRef}\r\n                  theme={theme}\r\n                  {...props}\r\n                  isRoot\r\n                  sx={{\r\n                     ...props.sx,\r\n                     ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {})\r\n                  }}\r\n               >\r\n                  <BreakpointProvider>\r\n                     {children}\r\n                     <RenderRenderar />\r\n                  </BreakpointProvider>\r\n               </ThemeProvider>\r\n            </AppRootProvider>\r\n         </CSSCacheProvider>\r\n      </DocumentProvider>\r\n   )\r\n})\r\n\r\nexport default AppRoot\r\n\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAiBA;AAAsE;;;AAGnE;AAEA;;AAIA;AACA;;;;;;;AAQG;AACA;AACG;AACH;;AAGH;AAuBH;;"}

package/AppRoot/index.d.ts

@@ -5,9 +5,9 @@ import { ThemeProviderProps } from '../theme/ThemeProvider.js';
 type AppRootProps<T extends TagComponentType = "div"> = ThemeProviderProps<T> & {
     noScrollbarCss?: boolean;
     document?: Document;
+    CSSCacheId?: string;
 };
-declare const APP_ROOT_CLASSNAME = "xui-app-root";
 declare const AppRoot: React__default.ForwardRefExoticComponent<Omit<AppRootProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
 
-export { APP_ROOT_CLASSNAME, AppRoot as default };
+export { AppRoot as default };
 export type { AppRootProps };

package/AppRoot/index.js

@@ -1,111 +1,30 @@
 "use client";
-'use strict';
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useId, useRef, useEffect } from 'react';
+import '../theme/core.js';
+import '../css/getValue.js';
+import 'oncss';
+import ThemeProvider from '../theme/ThemeProvider.js';
+import 'react-state-bucket';
+import { BreakpointProvider } from '../breakpoint/BreakpointProvider.js';
+import { RenderRenderar } from './Renderar.js';
+import { DocumentProvider } from '../Document/index.js';
+import { AppRootProvider } from './AppRootProvider.js';
+import useMergeRefs from '../hooks/useMergeRefs.js';
+import { CSSCacheProvider } from '../css/CSSCacheProvider.js';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var index$1 = require('../theme/index.js');
-var BreakpointProvider = require('../breakpoint/BreakpointProvider.js');
-var index = require('../css/index.js');
-var Renderar = require('./Renderar.js');
-var ServerStyleTag = require('../Tag/ServerStyleTag.js');
-var index$2 = require('../Document/index.js');
-var context = require('./context.js');
-var useMergeRefs = require('../hooks/useMergeRefs.js');
-var ThemeProvider = require('../theme/ThemeProvider.js');
-
-const APP_ROOT_CLASSNAME = "xui-app-root";
-const AppRoot = React.forwardRef((_a, ref) => {
-    var { children, noScrollbarCss, theme, document: _document } = _a, props = tslib.__rest(_a, ["children", "noScrollbarCss", "theme", "document"]);
+const AppRoot = React__default.forwardRef((_a, ref) => {
+    var { children, noScrollbarCss, CSSCacheId, theme, document: _document } = _a, props = __rest(_a, ["children", "noScrollbarCss", "CSSCacheId", "theme", "document"]);
     noScrollbarCss !== null && noScrollbarCss !== void 0 ? noScrollbarCss : (noScrollbarCss = false);
     _document !== null && _document !== void 0 ? _document : (_document = document);
-    const [visibility, setVisibility] = React.useState("hidden");
-    const rootRef = React.useRef(null);
+    const docid = useId();
+    const csscacheId = useId();
+    CSSCacheId !== null && CSSCacheId !== void 0 ? CSSCacheId : (CSSCacheId = csscacheId);
+    const [visibility, setVisibility] = React__default.useState("hidden");
+    const rootRef = useRef(null);
     const mergeRef = useMergeRefs(rootRef, ref);
-    const scrollbarCss = React.useMemo(() => {
-        if (noScrollbarCss)
-            return;
-        const cls = (cls) => `${index$1.themeRootClass(theme)} ${cls}`;
-        let thumbSize = 6;
-        let thumbColor = "var(--color-text-secondary)";
-        let trackColor = "transparent";
-        return index.css({
-            "@global": {
-                [cls('*::-webkit-scrollbar')]: {
-                    width: thumbSize,
-                    height: thumbSize,
-                },
-                [cls("*::-webkit-scrollbar-thumb")]: {
-                    backgroundColor: thumbColor,
-                    borderRadius: "6px",
-                    opacity: 0.6,
-                },
-                [cls("*::-webkit-scrollbar-thumb:hover")]: {
-                    backgroundColor: thumbColor,
-                    opacity: 0.0,
-                },
-                [cls("*::-webkit-scrollbar-track")]: {
-                    backgroundColor: trackColor,
-                    borderRadius: "6px",
-                },
-            }
-        }, {
-            injectStyle: typeof window !== 'undefined',
-            container: _document,
-        });
-    }, [noScrollbarCss, theme]);
-    const globalStyle = React.useMemo(() => {
-        return index.css({
-            "@global": {
-                "*": {
-                    m: 0,
-                    p: 0,
-                    outline: "none",
-                    boxSizing: "border-box",
-                    verticalAlign: "baseline",
-                },
-                "html, body": {
-                    minHeight: "100%",
-                    "-webkit-font-smoothing": "antialiased",
-                    "-moz-osx-font-smoothing": "grayscale",
-                },
-                "img, picture, video, canvas, svg": {
-                    maxWidth: "100%",
-                    display: "block"
-                },
-                "input, button, textarea, select": {
-                    font: "inherit"
-                },
-                "table": {
-                    borderCollapse: "collapse",
-                    borderSpacing: 0,
-                },
-                "ol, ul": {
-                    listStyle: "none",
-                    padding: 0,
-                    margin: 0,
-                },
-                "a": {
-                    display: "inline-block",
-                    color: "inherit",
-                    textDecoration: "none",
-                    cursor: "pointer",
-                    "&:hover": {
-                        textDecoration: "underline"
-                    }
-                },
-                "p, h1, h2, h3, h4, h5, h6": {
-                    overflowWrap: "break-word",
-                },
-            }
-        }, {
-            injectStyle: typeof window !== 'undefined',
-            container: _document,
-        });
-    }, []);
-    React.useEffect(() => {
+    useEffect(() => {
         setVisibility("visible");
         // move oncss style tags to head
         if (typeof _document === 'undefined')
@@ -115,9 +34,8 @@ const AppRoot = React.forwardRef((_a, ref) => {
             _document.head.appendChild(style);
         });
     }, []);
-    return (jsxRuntime.jsx(index$2.DocumentProvider, { document: _document, children: jsxRuntime.jsx(context.AppRootProvider, { element: rootRef.current, children: jsxRuntime.jsxs(ThemeProvider, Object.assign({ ref: mergeRef, theme: theme }, props, { sx: Object.assign(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), classNames: [APP_ROOT_CLASSNAME], children: [jsxRuntime.jsx(ServerStyleTag, { factory: globalStyle }), scrollbarCss && jsxRuntime.jsx(ServerStyleTag, { factory: scrollbarCss }), jsxRuntime.jsxs(BreakpointProvider.BreakpointProvider, { children: [children, jsxRuntime.jsx(Renderar.RenderRenderar, {})] })] })) }) }));
+    return (jsx(DocumentProvider, { document: _document, id: docid, children: jsx(CSSCacheProvider, { cacheId: CSSCacheId, children: jsx(AppRootProvider, { element: rootRef.current, children: jsx(ThemeProvider, Object.assign({ ref: mergeRef, theme: theme }, props, { isRoot: true, sx: Object.assign(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), children: jsxs(BreakpointProvider, { children: [children, jsx(RenderRenderar, {})] }) })) }) }) }));
 });
 
-exports.APP_ROOT_CLASSNAME = APP_ROOT_CLASSNAME;
-exports.default = AppRoot;
+export { AppRoot as default };
 //# sourceMappingURL=index.js.map

package/AppRoot/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo, useRef } from 'react';\r\nimport { TagComponentType } from '../Tag/types';\r\nimport { ThemeProvider, ThemeProviderProps, themeRootClass } from '../theme';\r\nimport { BreakpointProvider } from '../breakpoint';\r\nimport { css } from '../css';\r\nimport { RenderRenderar } from './Renderar';\r\nimport ServerStyleTag from '../Tag/ServerStyleTag';\r\nimport { DocumentProvider } from '../Document';\r\nimport { AppRootProvider } from './context';\r\nimport useMergeRefs from '../hooks/useMergeRefs';\r\n\r\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\r\n   noScrollbarCss?: boolean;\r\n   document?: Document;\r\n}\r\n\r\nexport const APP_ROOT_CLASSNAME = \"xui-app-root\"\r\n\r\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, theme, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\r\n   noScrollbarCss ??= false\r\n   _document ??= document\r\n\r\n   const [visibility, setVisibility] = React.useState<string>(\"hidden\");\r\n   const rootRef = useRef(null)\r\n   const mergeRef = useMergeRefs(rootRef, ref)\r\n\r\n   const scrollbarCss: any = useMemo(() => {\r\n      if (noScrollbarCss) return;\r\n      const cls = (cls: string) => `${themeRootClass(theme)} ${cls}`\r\n      let thumbSize = 6\r\n      let thumbColor = \"var(--color-text-secondary)\"\r\n      let trackColor = \"transparent\"\r\n\r\n      return css({\r\n         \"@global\": {\r\n            [cls('*::-webkit-scrollbar')]: {\r\n               width: thumbSize,\r\n               height: thumbSize,\r\n            },\r\n            [cls(\"*::-webkit-scrollbar-thumb\")]: {\r\n               backgroundColor: thumbColor,\r\n               borderRadius: \"6px\",\r\n               opacity: 0.6,\r\n            },\r\n            [cls(\"*::-webkit-scrollbar-thumb:hover\")]: {\r\n               backgroundColor: thumbColor,\r\n               opacity: 0.0,\r\n            },\r\n            [cls(\"*::-webkit-scrollbar-track\")]: {\r\n               backgroundColor: trackColor,\r\n               borderRadius: \"6px\",\r\n            },\r\n         }\r\n      }, {\r\n         injectStyle: typeof window !== 'undefined',\r\n         container: _document,\r\n      }) as any\r\n   }, [noScrollbarCss, theme])\r\n\r\n   const globalStyle = useMemo(() => {\r\n      return css({\r\n         \"@global\": {\r\n            \"*\": {\r\n               m: 0,\r\n               p: 0,\r\n               outline: \"none\",\r\n               boxSizing: \"border-box\",\r\n               verticalAlign: \"baseline\",\r\n            },\r\n            \"html, body\": {\r\n               minHeight: \"100%\",\r\n               \"-webkit-font-smoothing\": \"antialiased\",\r\n               \"-moz-osx-font-smoothing\": \"grayscale\",\r\n            } as any,\r\n            \"img, picture, video, canvas, svg\": {\r\n               maxWidth: \"100%\",\r\n               display: \"block\"\r\n            },\r\n            \"input, button, textarea, select\": {\r\n               font: \"inherit\"\r\n            },\r\n            \"table\": {\r\n               borderCollapse: \"collapse\",\r\n               borderSpacing: 0,\r\n            },\r\n            \"ol, ul\": {\r\n               listStyle: \"none\",\r\n               padding: 0,\r\n               margin: 0,\r\n            },\r\n            \"a\": {\r\n               display: \"inline-block\",\r\n               color: \"inherit\",\r\n               textDecoration: \"none\",\r\n               cursor: \"pointer\",\r\n               \"&:hover\": {\r\n                  textDecoration: \"underline\"\r\n               }\r\n            },\r\n            \"p, h1, h2, h3, h4, h5, h6\": {\r\n               overflowWrap: \"break-word\",\r\n            },\r\n         }\r\n      }, {\r\n         injectStyle: typeof window !== 'undefined',\r\n         container: _document,\r\n      })\r\n   }, [])\r\n\r\n   useEffect(() => {\r\n      setVisibility(\"visible\");\r\n\r\n      // move oncss style tags to head\r\n      if (typeof _document === 'undefined') return;\r\n      const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));\r\n      styles.forEach((style) => {\r\n         _document.head.appendChild(style);\r\n      });\r\n\r\n   }, [])\r\n\r\n   return (\r\n      <DocumentProvider document={_document}>\r\n         <AppRootProvider element={rootRef.current}>\r\n            <ThemeProvider\r\n               ref={mergeRef}\r\n               theme={theme}\r\n               {...props}\r\n               sx={{\r\n                  ...props.sx,\r\n                  ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {})\r\n               }}\r\n               classNames={[APP_ROOT_CLASSNAME]}\r\n            >\r\n               <ServerStyleTag factory={globalStyle} />\r\n               {\r\n                  scrollbarCss && <ServerStyleTag factory={scrollbarCss} />\r\n               }\r\n               <BreakpointProvider>\r\n                  {children}\r\n                  <RenderRenderar />\r\n               </BreakpointProvider>\r\n            </ThemeProvider>\r\n         </AppRootProvider>\r\n      </DocumentProvider>\r\n   )\r\n})\r\n\r\nexport default AppRoot\r\n\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAiBO;AAEP;AAAsE;;;AAInE;AACA;;AAGA;AACG;;AACA;;;;AAKA;AACG;AACG;AACG;AACA;AACF;AACD;AACG;AACA;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACH;;AAED;AACA;AACF;AACJ;AAEA;AACG;AACG;AACG;AACG;AACA;AACA;AACA;AACA;AACF;AACD;AACG;AACA;AACA;AACK;AACR;AACG;AACA;AACF;AACD;AACG;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACA;AACF;AACD;AACG;AACA;AACA;AACA;AACA;AACG;AACF;AACH;AACD;AACG;AACF;AACH;;AAED;AACA;AACF;;;;;;;AAQD;AACA;AACG;AACH;;AAIH;AAyBH;;;"}
+{"version":3,"file":"index.js","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useId, useRef } from 'react';\r\nimport { TagComponentType } from '../Tag/types';\r\nimport { ThemeProvider, ThemeProviderProps } from '../theme';\r\nimport { BreakpointProvider } from '../breakpoint';\r\nimport { RenderRenderar } from './Renderar';\r\nimport { DocumentProvider } from '../Document';\r\nimport { AppRootProvider } from './AppRootProvider';\r\nimport useMergeRefs from '../hooks/useMergeRefs';\r\nimport { CSSCacheProvider } from '../css/CSSCacheProvider';\r\n\r\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\r\n   noScrollbarCss?: boolean;\r\n   document?: Document;\r\n   CSSCacheId?: string;\r\n}\r\n\r\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, CSSCacheId, theme, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\r\n   noScrollbarCss ??= false\r\n   _document ??= document\r\n   const docid = useId()\r\n\r\n   const csscacheId = useId()\r\n   CSSCacheId ??= csscacheId\r\n\r\n\r\n   const [visibility, setVisibility] = React.useState<string>(\"hidden\");\r\n   const rootRef = useRef(null)\r\n   const mergeRef = useMergeRefs(rootRef, ref)\r\n\r\n   useEffect(() => {\r\n      setVisibility(\"visible\");\r\n\r\n      // move oncss style tags to head\r\n      if (typeof _document === 'undefined') return;\r\n      const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));\r\n      styles.forEach((style) => {\r\n         _document.head.appendChild(style);\r\n      });\r\n   }, [])\r\n\r\n   return (\r\n      <DocumentProvider document={_document} id={docid}>\r\n         <CSSCacheProvider cacheId={CSSCacheId}>\r\n            <AppRootProvider element={rootRef.current}>\r\n               <ThemeProvider\r\n                  ref={mergeRef}\r\n                  theme={theme}\r\n                  {...props}\r\n                  isRoot\r\n                  sx={{\r\n                     ...props.sx,\r\n                     ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {})\r\n                  }}\r\n               >\r\n                  <BreakpointProvider>\r\n                     {children}\r\n                     <RenderRenderar />\r\n                  </BreakpointProvider>\r\n               </ThemeProvider>\r\n            </AppRootProvider>\r\n         </CSSCacheProvider>\r\n      </DocumentProvider>\r\n   )\r\n})\r\n\r\nexport default AppRoot\r\n\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAiBA;AAAsE;;;AAGnE;AAEA;;AAIA;AACA;;;;;;;AAQG;AACA;AACG;AACH;;AAGH;AAuBH;;"}

package/Document/index.cjs

@@ -0,0 +1,21 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+const DocumentContext = React.createContext(null);
+const DocumentProvider = ({ document, id, children }) => {
+    return (jsxRuntime.jsx(DocumentContext.Provider, { value: { document, id }, children: children }));
+};
+const useDocument = () => {
+    const context = React.useContext(DocumentContext);
+    if (typeof window === 'undefined') {
+        return null;
+    }
+    return context;
+};
+
+exports.DocumentProvider = DocumentProvider;
+exports.useDocument = useDocument;
+//# sourceMappingURL=index.cjs.map

package/Document/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/Document/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { useContext, createContext } from \"react\";\r\n\r\n\r\nexport type DocumentID = string\r\nexport type DocumentContextValue = { document: Document; id: DocumentID }\r\nconst DocumentContext = createContext<DocumentContextValue | null>(null);\r\n\r\nexport const DocumentProvider: React.FC<{ children: React.ReactNode } & DocumentContextValue> = ({ document, id, children }) => {\r\n   return (\r\n      <DocumentContext.Provider value={{ document, id }}>\r\n         {children}\r\n      </DocumentContext.Provider>\r\n   );\r\n}\r\n\r\nexport const useDocument = (): DocumentContextValue => {\r\n   const context = useContext(DocumentContext);\r\n   if (typeof window === 'undefined') {\r\n      return null as any;\r\n   }\r\n   return context as DocumentContextValue\r\n}"],"names":[],"mappings":";;;;;;AAMA;AAEO;AACJ;AAKH;AAEO;AACJ;AACA;AACG;;AAEH;AACH;;;"}

package/Document/index.d.ts

@@ -1,3 +1,9 @@
-declare const useDocument: () => Document;
+type DocumentID = string;
+type DocumentContextValue = {
+    document: Document;
+    id: DocumentID;
+};
+declare const useDocument: () => DocumentContextValue;
 
 export { useDocument };
+export type { DocumentContextValue, DocumentID };

package/Document/index.js

@@ -1,21 +1,18 @@
 "use client";
-'use strict';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext } from 'react';
 
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-
-const DocumentContext = React.createContext(null);
-const DocumentProvider = ({ document, children }) => {
-    return (jsxRuntime.jsx(DocumentContext.Provider, { value: document, children: children }));
+const DocumentContext = createContext(null);
+const DocumentProvider = ({ document, id, children }) => {
+    return (jsx(DocumentContext.Provider, { value: { document, id }, children: children }));
 };
 const useDocument = () => {
-    const context = React.useContext(DocumentContext);
+    const context = useContext(DocumentContext);
     if (typeof window === 'undefined') {
         return null;
     }
-    return context || document;
+    return context;
 };
 
-exports.DocumentProvider = DocumentProvider;
-exports.useDocument = useDocument;
+export { DocumentProvider, useDocument };
 //# sourceMappingURL=index.js.map

package/Document/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Document/index.tsx"],"sourcesContent":["'use client'\r\nimport React from \"react\";\r\n\r\nconst DocumentContext = React.createContext<Document | null>(null);\r\n\r\nexport const DocumentProvider: React.FC<{ document: Document; children: React.ReactNode }> = ({ document, children }) => {\r\n   return (\r\n      <DocumentContext.Provider value={document}>\r\n         {children}\r\n      </DocumentContext.Provider>\r\n   );\r\n}\r\n\r\nexport const useDocument = (): Document => {\r\n   const context = React.useContext(DocumentContext);\r\n   if (typeof window === 'undefined') {\r\n      return null as any;\r\n   }\r\n   return context || document;\r\n}"],"names":[],"mappings":";;;;;;AAGA;AAEO;AACJ;AAKH;AAEO;;AAEJ;AACG;;;AAGN;;;"}
+{"version":3,"file":"index.js","sources":["../../src/Document/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { useContext, createContext } from \"react\";\r\n\r\n\r\nexport type DocumentID = string\r\nexport type DocumentContextValue = { document: Document; id: DocumentID }\r\nconst DocumentContext = createContext<DocumentContextValue | null>(null);\r\n\r\nexport const DocumentProvider: React.FC<{ children: React.ReactNode } & DocumentContextValue> = ({ document, id, children }) => {\r\n   return (\r\n      <DocumentContext.Provider value={{ document, id }}>\r\n         {children}\r\n      </DocumentContext.Provider>\r\n   );\r\n}\r\n\r\nexport const useDocument = (): DocumentContextValue => {\r\n   const context = useContext(DocumentContext);\r\n   if (typeof window === 'undefined') {\r\n      return null as any;\r\n   }\r\n   return context as DocumentContextValue\r\n}"],"names":[],"mappings":";;;;AAMA;AAEO;AACJ;AAKH;AAEO;AACJ;AACA;AACG;;AAEH;AACH;;"}

package/Iframe/index.cjs

@@ -0,0 +1,45 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('../theme/core.cjs');
+require('../css/getValue.cjs');
+require('oncss');
+require('../theme/ThemeProvider.cjs');
+require('react-state-bucket');
+var index$1 = require('../Tag/index.cjs');
+var reactDom = require('react-dom');
+var index$2 = require('../AppRoot/index.cjs');
+var useMergeRefs = require('../hooks/useMergeRefs.cjs');
+
+const IframeContext = React.createContext({
+    document: null,
+    window: null,
+});
+const Iframe = (_a, ref) => {
+    var { children, sxr, theme, CSSCacheId } = _a, props = tslib.__rest(_a, ["children", "sxr", "theme", "CSSCacheId"]);
+    const [doc, setDoc] = React.useState(null);
+    const iframeRef = React.useRef(null);
+    const _ref = useMergeRefs(iframeRef, ref);
+    const parentTheme = core.useTheme();
+    theme !== null && theme !== void 0 ? theme : (theme = parentTheme.name);
+    React.useEffect(() => {
+        if (!iframeRef.current)
+            return;
+        const iframe = iframeRef.current;
+        const onLoad = () => setDoc(iframe.contentDocument);
+        iframe.addEventListener("load", onLoad);
+        return () => iframe.removeEventListener("load", onLoad);
+    }, []);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index$1, Object.assign({}, props, { component: "iframe", sxr: Object.assign({ border: 'none', width: "100%", height: "100%", p: 0, m: 0 }, sxr), ref: _ref, srcDoc: "<!DOCTYPE html><html><head></head><body></body></html>" })), doc &&
+                reactDom.createPortal(jsxRuntime.jsx(IframeContext.Provider, { value: {
+                        document: doc,
+                        window: doc.defaultView,
+                    }, children: jsxRuntime.jsx(index$2, { theme: theme, document: doc, CSSCacheId: CSSCacheId, children: children }) }), doc.body)] }));
+};
+var index = React.forwardRef(Iframe);
+
+module.exports = index;
+//# sourceMappingURL=index.cjs.map