@peers-app/peers-ui 0.14.0 → 0.15.0

package/dist/ui-router/ui-loader.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.peersSystemPackageId = exports.UIRouter = void 0;
 exports.registerInternalPeersUI = registerInternalPeersUI;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 const lodash_1 = require("lodash");
 const react_1 = __importStar(require("react"));
@@ -53,7 +54,7 @@ class UIErrorBoundary extends react_1.Component {
         return { hasError: true, error, errorInfo: null };
     }
     componentDidCatch(error, errorInfo) {
-        console.error('UIErrorBoundary caught an error:', error, errorInfo);
+        console.error("UIErrorBoundary caught an error:", error, errorInfo);
         this.setState({
             error,
             errorInfo,
@@ -63,67 +64,37 @@ class UIErrorBoundary extends react_1.Component {
         if (this.state.hasError) {
             const { peersUIId, packageName, componentName } = this.props;
             const { error, errorInfo } = this.state;
-            return (react_1.default.createElement("div", { style: {
-                    padding: '20px',
-                    border: '2px solid #ff6b6b',
-                    borderRadius: '8px',
-                    backgroundColor: '#fff5f5',
-                    color: '#721c24',
-                    fontFamily: 'monospace',
-                    margin: '10px 0'
-                } },
-                react_1.default.createElement("h3", { style: { color: '#c53030', marginTop: 0 } }, "UI Component Error"),
-                react_1.default.createElement("div", { style: { marginBottom: '15px' } },
-                    peersUIId && react_1.default.createElement("div", null,
-                        react_1.default.createElement("strong", null, "Peers UI ID:"),
-                        " ",
-                        peersUIId),
-                    packageName && react_1.default.createElement("div", null,
-                        react_1.default.createElement("strong", null, "Package:"),
-                        " ",
-                        packageName),
-                    componentName && react_1.default.createElement("div", null,
-                        react_1.default.createElement("strong", null, "Component:"),
-                        " ",
-                        componentName)),
-                react_1.default.createElement("details", { style: { marginBottom: '15px' } },
-                    react_1.default.createElement("summary", { style: { cursor: 'pointer', fontWeight: 'bold', marginBottom: '10px' } }, "Error Details"),
-                    react_1.default.createElement("div", { style: {
-                            backgroundColor: '#fed7d7',
-                            padding: '10px',
-                            borderRadius: '4px',
-                            whiteSpace: 'pre-wrap',
-                            overflow: 'auto',
-                            maxHeight: '200px'
-                        } },
-                        react_1.default.createElement("strong", null, "Error:"),
-                        " ",
-                        error?.message || 'Unknown error',
-                        error?.stack && (react_1.default.createElement(react_1.default.Fragment, null,
-                            react_1.default.createElement("br", null),
-                            react_1.default.createElement("br", null),
-                            react_1.default.createElement("strong", null, "Stack Trace:"),
-                            react_1.default.createElement("br", null),
-                            error.stack)))),
-                errorInfo && (react_1.default.createElement("details", null,
-                    react_1.default.createElement("summary", { style: { cursor: 'pointer', fontWeight: 'bold', marginBottom: '10px' } }, "Component Stack"),
-                    react_1.default.createElement("div", { style: {
-                            backgroundColor: '#fed7d7',
-                            padding: '10px',
-                            borderRadius: '4px',
-                            whiteSpace: 'pre-wrap',
-                            overflow: 'auto',
-                            maxHeight: '200px'
-                        } }, errorInfo.componentStack))),
-                react_1.default.createElement("button", { onClick: () => this.setState({ hasError: false, error: null, errorInfo: null }), style: {
-                        marginTop: '15px',
-                        padding: '8px 16px',
-                        backgroundColor: '#c53030',
-                        color: 'white',
-                        border: 'none',
-                        borderRadius: '4px',
-                        cursor: 'pointer'
-                    } }, "Try Again")));
+            return ((0, jsx_runtime_1.jsxs)("div", { style: {
+                    padding: "20px",
+                    border: "2px solid #ff6b6b",
+                    borderRadius: "8px",
+                    backgroundColor: "#fff5f5",
+                    color: "#721c24",
+                    fontFamily: "monospace",
+                    margin: "10px 0",
+                }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { color: "#c53030", marginTop: 0 }, children: "UI Component Error" }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "15px" }, children: [peersUIId && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Peers UI ID:" }), " ", peersUIId] })), packageName && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Package:" }), " ", packageName] })), componentName && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Component:" }), " ", componentName] }))] }), (0, jsx_runtime_1.jsxs)("details", { style: { marginBottom: "15px" }, children: [(0, jsx_runtime_1.jsx)("summary", { style: { cursor: "pointer", fontWeight: "bold", marginBottom: "10px" }, children: "Error Details" }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                    backgroundColor: "#fed7d7",
+                                    padding: "10px",
+                                    borderRadius: "4px",
+                                    whiteSpace: "pre-wrap",
+                                    overflow: "auto",
+                                    maxHeight: "200px",
+                                }, children: [(0, jsx_runtime_1.jsx)("strong", { children: "Error:" }), " ", error?.message || "Unknown error", error?.stack && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("strong", { children: "Stack Trace:" }), (0, jsx_runtime_1.jsx)("br", {}), error.stack] }))] })] }), errorInfo && ((0, jsx_runtime_1.jsxs)("details", { children: [(0, jsx_runtime_1.jsx)("summary", { style: { cursor: "pointer", fontWeight: "bold", marginBottom: "10px" }, children: "Component Stack" }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                    backgroundColor: "#fed7d7",
+                                    padding: "10px",
+                                    borderRadius: "4px",
+                                    whiteSpace: "pre-wrap",
+                                    overflow: "auto",
+                                    maxHeight: "200px",
+                                }, children: errorInfo.componentStack })] })), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => this.setState({ hasError: false, error: null, errorInfo: null }), style: {
+                            marginTop: "15px",
+                            padding: "8px 16px",
+                            backgroundColor: "#c53030",
+                            color: "white",
+                            border: "none",
+                            borderRadius: "4px",
+                            cursor: "pointer",
+                        }, children: "Try Again" })] }));
         }
         return this.props.children;
     }
@@ -131,12 +102,21 @@ class UIErrorBoundary extends react_1.Component {
 const UIRouter = (props) => {
     let matchingRoute;
     const allRoutes = _window.getPeersUIRoutes();
-    const filteredRoutes = allRoutes.filter(r => {
-        if (props.uiEditMode && props.uiEditMode !== '*' && r.uiEditMode !== '*' && r.uiEditMode !== props.uiEditMode)
+    const filteredRoutes = allRoutes.filter((r) => {
+        if (props.uiEditMode &&
+            props.uiEditMode !== "*" &&
+            r.uiEditMode !== "*" &&
+            r.uiEditMode !== props.uiEditMode)
             return false;
-        if (props.uiCategory && props.uiCategory !== '*' && r.uiCategory !== '*' && r.uiCategory !== props.uiCategory)
+        if (props.uiCategory &&
+            props.uiCategory !== "*" &&
+            r.uiCategory !== "*" &&
+            r.uiCategory !== props.uiCategory)
             return false;
-        if (props.uiSubcategory && props.uiSubcategory !== '*' && r.uiSubcategory !== '*' && r.uiSubcategory !== props.uiSubcategory)
+        if (props.uiSubcategory &&
+            props.uiSubcategory !== "*" &&
+            r.uiSubcategory !== "*" &&
+            r.uiSubcategory !== props.uiSubcategory)
             return false;
         return true;
     });
@@ -149,7 +129,7 @@ const UIRouter = (props) => {
         // <todo> test this
         if (route.path) {
             // since `isMatch` can already be used to match the path, this might be overkill
-            // but if you just need a simple regex match this makes it nice instead of having to declare a whole function 
+            // but if you just need a simple regex match this makes it nice instead of having to declare a whole function
             const match = route.path.match(/^\/(.+)\/([gimsuy]{0,6})$/);
             if (match) {
                 const [, pattern, flags] = match;
@@ -194,39 +174,21 @@ const UILoader = (args) => {
     if (peersUI?.content) {
         const parseResult = peersUI.propsSchema.safeParse(props);
         if (!parseResult.success) {
-            console.error('props did not match schema', { props, schema: peersUI.propsSchema, errors: parseResult.error });
-            return (react_1.default.createElement("div", null,
-                react_1.default.createElement("pre", null,
-                    "Peers UI could not be loaded ",
-                    react_1.default.createElement("br", null),
-                    "peersUIId: ",
-                    peersUI.peersUIId,
-                    " ",
-                    react_1.default.createElement("br", null),
-                    "Component name: ",
-                    peersUI.content?.name,
-                    " ",
-                    react_1.default.createElement("br", null),
-                    "Props did not match schema ",
-                    react_1.default.createElement("br", null),
-                    "Errors: ",
-                    JSON.stringify(parseResult.error, null, 2),
-                    " ",
-                    react_1.default.createElement("br", null),
-                    react_1.default.createElement("br", null),
-                    "Props ",
-                    JSON.stringify((0, peers_sdk_1.toJSON)(props), null, 2),
-                    react_1.default.createElement("br", null))));
+            console.error("props did not match schema", {
+                props,
+                schema: peersUI.propsSchema,
+                errors: parseResult.error,
+            });
+            return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("pre", { children: ["Peers UI could not be loaded ", (0, jsx_runtime_1.jsx)("br", {}), "peersUIId: ", peersUI.peersUIId, " ", (0, jsx_runtime_1.jsx)("br", {}), "Component name: ", peersUI.content?.name, " ", (0, jsx_runtime_1.jsx)("br", {}), "Props did not match schema ", (0, jsx_runtime_1.jsx)("br", {}), "Errors: ", JSON.stringify(parseResult.error, null, 2), " ", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), "Props ", JSON.stringify((0, peers_sdk_1.toJSON)(props), null, 2), (0, jsx_runtime_1.jsx)("br", {})] }) }));
         }
         const Component = peersUI.content;
-        return (react_1.default.createElement(UIErrorBoundary, { peersUIId: peersUIId, componentName: peersUI.content?.name },
-            react_1.default.createElement(Component, { ...args.props })));
+        return ((0, jsx_runtime_1.jsx)(UIErrorBoundary, { peersUIId: peersUIId, componentName: peersUI.content?.name, children: (0, jsx_runtime_1.jsx)(Component, { ...args.props }) }));
     }
-    return react_1.default.createElement(UIAsyncLoader, { ...args });
+    return (0, jsx_runtime_1.jsx)(UIAsyncLoader, { ...args });
 };
 const uiLoadingPromises = {};
 // Check if we're running in a React Native WebView (has injectUIBundle available)
-const isReactNativeWebView = typeof window.ReactNativeWebView !== 'undefined';
+const isReactNativeWebView = typeof window.ReactNativeWebView !== "undefined";
 async function resolveUiBundleFileId(pkg) {
     if (!pkg.activePackageVersionId)
         return undefined;
@@ -243,54 +205,50 @@ function loadUIBundle(pkg, forceRefresh) {
     if (!importPromise || forceRefresh) {
         const sTime = Date.now();
         console.log(`loading ui bundle for ${pkg.name}`);
-        importPromise = new Promise(async (resolve, reject) => {
-            try {
-                const uiBundleFileId = await resolveUiBundleFileId(pkg);
-                if (!uiBundleFileId) {
-                    resolve();
-                    return;
-                }
-                if (isReactNativeWebView && peers_sdk_1.rpcServerCalls.injectUIBundle) {
-                    const _window = window;
-                    _window.__peersUIs = _window.__peersUIs || {};
-                    const loadPromise = new Promise((resolveLoad, rejectLoad) => {
-                        _window.__peersUIBundleLoaded = (loadedFileId) => {
-                            if (loadedFileId === uiBundleFileId) {
-                                Object.keys(_window.__peersUIs || {}).forEach(peersUIId => {
-                                    peersUIs[peersUIId] = _window.__peersUIs[peersUIId];
-                                });
-                                resolveLoad();
-                            }
-                        };
-                        _window.__peersUIBundleError = (errorFileId, errorMsg) => {
-                            if (errorFileId === uiBundleFileId) {
-                                rejectLoad(new Error(errorMsg));
-                            }
-                        };
-                    });
-                    await peers_sdk_1.rpcServerCalls.injectUIBundle(uiBundleFileId);
-                    await loadPromise;
-                    console.log(`finished loading ui bundle for ${pkg.name}: ${(Date.now() - sTime).toFixed(0)}ms`);
-                }
-                else {
-                    let bundleCode = await peers_sdk_1.rpcServerCalls.getFileContents(uiBundleFileId);
-                    if (bundleCode) {
-                        const exportUIs = (peerUIs) => {
-                            peerUIs?.uis?.forEach(ui => {
-                                peersUIs[ui.peersUIId] = ui;
+        importPromise = (async () => {
+            const uiBundleFileId = await resolveUiBundleFileId(pkg);
+            if (!uiBundleFileId) {
+                return;
+            }
+            if (isReactNativeWebView && peers_sdk_1.rpcServerCalls.injectUIBundle) {
+                const _w = window;
+                _w.__peersUIs = _w.__peersUIs || {};
+                const loadPromise = new Promise((resolveLoad, rejectLoad) => {
+                    _w.__peersUIBundleLoaded = (loadedFileId) => {
+                        if (loadedFileId === uiBundleFileId) {
+                            const store = _w.__peersUIs || {};
+                            Object.keys(store).forEach((peersUIId) => {
+                                peersUIs[peersUIId] = store[peersUIId];
                             });
-                        };
-                        const bundleFunction = new Function('exportUIs', bundleCode);
-                        await bundleFunction(exportUIs);
-                    }
-                    console.log(`finished loading ui bundle for ${pkg.name}: ${(Date.now() - sTime).toFixed(0)}ms, ${(bundleCode.length / 1000).toFixed(0)} KB`);
-                }
-                resolve();
+                            resolveLoad();
+                        }
+                    };
+                    _w.__peersUIBundleError = (errorFileId, errorMsg) => {
+                        if (errorFileId === uiBundleFileId) {
+                            rejectLoad(new Error(errorMsg));
+                        }
+                    };
+                });
+                await peers_sdk_1.rpcServerCalls.injectUIBundle(uiBundleFileId);
+                await loadPromise;
+                console.log(`finished loading ui bundle for ${pkg.name}: ${(Date.now() - sTime).toFixed(0)}ms`);
             }
-            catch (err) {
-                console.error(`Error while loading ui module for ${pkg.name}`, err);
-                reject(err);
+            else {
+                const bundleCode = await peers_sdk_1.rpcServerCalls.getFileContents(uiBundleFileId);
+                if (bundleCode) {
+                    const exportUIs = (peerUIs) => {
+                        peerUIs?.uis?.forEach((ui) => {
+                            peersUIs[ui.peersUIId] = ui;
+                        });
+                    };
+                    const bundleFunction = new Function("exportUIs", bundleCode);
+                    await bundleFunction(exportUIs);
+                }
+                console.log(`finished loading ui bundle for ${pkg.name}: ${(Date.now() - sTime).toFixed(0)}ms, ${bundleCode ? (bundleCode.length / 1000).toFixed(0) : "0"} KB`);
             }
+        })().catch((err) => {
+            console.error(`Error while loading ui module for ${pkg.name}`, err);
+            throw err;
         });
         uiLoadingPromises[pkg.packageId] = importPromise;
     }
@@ -301,88 +259,60 @@ const UIAsyncLoader = (props) => {
     const [loaded, setLoaded] = react_1.default.useState(false);
     const [loadError, setLoadError] = react_1.default.useState(null);
     const allRoutes = _window.getPeersUIRoutes();
-    const uiPackageId = allRoutes.find(r => r.peersUIId === peersUIId)?.packageId;
+    const uiPackageId = allRoutes.find((r) => r.peersUIId === peersUIId)?.packageId;
     (0, hooks_1.useObservable)(routes_loader_1.allPackages);
-    const pkg = (0, routes_loader_1.allPackages)().find(p => p.packageId === uiPackageId);
+    const pkg = (0, routes_loader_1.allPackages)().find((p) => p.packageId === uiPackageId);
     (0, react_1.useEffect)(() => {
         if (!pkg)
             return;
+        const pkgRef = pkg;
         setLoadError(null);
-        loadUIBundle(pkg)
+        loadUIBundle(pkgRef)
             .then(() => setLoaded(true))
             .catch((error) => {
-            console.error(`Failed to load UI bundle for package ${pkg.name}:`, error);
+            console.error(`Failed to load UI bundle for package ${pkgRef.name}:`, error);
             setLoadError(error);
         });
-    }, [pkg?.packageId]);
+    }, [pkg?.packageId, pkg?.name, pkg]);
     if (!pkg) {
-        return react_1.default.createElement("div", null,
-            "Could not find package that owns peersUIId ",
-            peersUIId);
+        return (0, jsx_runtime_1.jsxs)("div", { children: ["Could not find package that owns peersUIId ", peersUIId] });
     }
     if (loadError) {
-        return (react_1.default.createElement("div", { style: {
-                padding: '20px',
-                border: '2px solid #ff6b6b',
-                borderRadius: '8px',
-                backgroundColor: '#fff5f5',
-                color: '#721c24',
-                fontFamily: 'monospace',
-                margin: '10px 0'
-            } },
-            react_1.default.createElement("h3", { style: { color: '#c53030', marginTop: 0 } }, "Bundle Loading Error"),
-            react_1.default.createElement("div", { style: { marginBottom: '15px' } },
-                react_1.default.createElement("div", null,
-                    react_1.default.createElement("strong", null, "Peers UI ID:"),
-                    " ",
-                    peersUIId),
-                react_1.default.createElement("div", null,
-                    react_1.default.createElement("strong", null, "Package:"),
-                    " ",
-                    pkg.name),
-                react_1.default.createElement("div", null,
-                    react_1.default.createElement("strong", null, "Package ID:"),
-                    " ",
-                    pkg.packageId)),
-            react_1.default.createElement("details", { style: { marginBottom: '15px' } },
-                react_1.default.createElement("summary", { style: { cursor: 'pointer', fontWeight: 'bold', marginBottom: '10px' } }, "Error Details"),
-                react_1.default.createElement("div", { style: {
-                        backgroundColor: '#fed7d7',
-                        padding: '10px',
-                        borderRadius: '4px',
-                        whiteSpace: 'pre-wrap',
-                        overflow: 'auto',
-                        maxHeight: '200px'
-                    } },
-                    react_1.default.createElement("strong", null, "Error:"),
-                    " ",
-                    loadError.message || 'Unknown error',
-                    loadError.stack && (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement("br", null),
-                        react_1.default.createElement("br", null),
-                        react_1.default.createElement("strong", null, "Stack Trace:"),
-                        react_1.default.createElement("br", null),
-                        loadError.stack)))),
-            react_1.default.createElement("button", { onClick: () => {
-                    setLoadError(null);
-                    setLoaded(false);
-                    if (pkg) {
-                        loadUIBundle(pkg, true)
-                            .then(() => setLoaded(true))
-                            .catch(setLoadError);
-                    }
-                }, style: {
-                    marginTop: '15px',
-                    padding: '8px 16px',
-                    backgroundColor: '#c53030',
-                    color: 'white',
-                    border: 'none',
-                    borderRadius: '4px',
-                    cursor: 'pointer'
-                } }, "Retry Loading")));
+        return ((0, jsx_runtime_1.jsxs)("div", { style: {
+                padding: "20px",
+                border: "2px solid #ff6b6b",
+                borderRadius: "8px",
+                backgroundColor: "#fff5f5",
+                color: "#721c24",
+                fontFamily: "monospace",
+                margin: "10px 0",
+            }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { color: "#c53030", marginTop: 0 }, children: "Bundle Loading Error" }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "15px" }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Peers UI ID:" }), " ", peersUIId] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Package:" }), " ", pkg.name] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Package ID:" }), " ", pkg.packageId] })] }), (0, jsx_runtime_1.jsxs)("details", { style: { marginBottom: "15px" }, children: [(0, jsx_runtime_1.jsx)("summary", { style: { cursor: "pointer", fontWeight: "bold", marginBottom: "10px" }, children: "Error Details" }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                backgroundColor: "#fed7d7",
+                                padding: "10px",
+                                borderRadius: "4px",
+                                whiteSpace: "pre-wrap",
+                                overflow: "auto",
+                                maxHeight: "200px",
+                            }, children: [(0, jsx_runtime_1.jsx)("strong", { children: "Error:" }), " ", loadError.message || "Unknown error", loadError.stack && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("strong", { children: "Stack Trace:" }), (0, jsx_runtime_1.jsx)("br", {}), loadError.stack] }))] })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => {
+                        setLoadError(null);
+                        setLoaded(false);
+                        if (pkg) {
+                            loadUIBundle(pkg, true)
+                                .then(() => setLoaded(true))
+                                .catch(setLoadError);
+                        }
+                    }, style: {
+                        marginTop: "15px",
+                        padding: "8px 16px",
+                        backgroundColor: "#c53030",
+                        color: "white",
+                        border: "none",
+                        borderRadius: "4px",
+                        cursor: "pointer",
+                    }, children: "Retry Loading" })] }));
     }
     if (!loaded) {
-        return (react_1.default.createElement(loading_indicator_1.LoadingIndicator, null));
+        return (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {});
     }
     const peersUI = peersUIs[peersUIId];
     if (peersUI?.content) {
@@ -390,98 +320,72 @@ const UIAsyncLoader = (props) => {
         try {
             peersUI.propsSchema.parse(_props);
             const Component = peersUI.content;
-            return (react_1.default.createElement(UIErrorBoundary, { peersUIId: peersUIId, packageName: pkg.name, componentName: peersUI.content?.name },
-                react_1.default.createElement(Component, { ..._props })));
+            return ((0, jsx_runtime_1.jsx)(UIErrorBoundary, { peersUIId: peersUIId, packageName: pkg.name, componentName: peersUI.content?.name, children: (0, jsx_runtime_1.jsx)(Component, { ..._props }) }));
         }
         catch (parseError) {
-            return (react_1.default.createElement("div", { style: {
-                    padding: '20px',
-                    border: '2px solid #ff6b6b',
-                    borderRadius: '8px',
-                    backgroundColor: '#fff5f5',
-                    color: '#721c24',
-                    fontFamily: 'monospace',
-                    margin: '10px 0'
-                } },
-                react_1.default.createElement("h3", { style: { color: '#c53030', marginTop: 0 } }, "Props Validation Error"),
-                react_1.default.createElement("div", { style: { marginBottom: '15px' } },
-                    react_1.default.createElement("div", null,
-                        react_1.default.createElement("strong", null, "Peers UI ID:"),
-                        " ",
-                        peersUIId),
-                    react_1.default.createElement("div", null,
-                        react_1.default.createElement("strong", null, "Package:"),
-                        " ",
-                        pkg.name),
-                    react_1.default.createElement("div", null,
-                        react_1.default.createElement("strong", null, "Component:"),
-                        " ",
-                        peersUI.content?.name)),
-                react_1.default.createElement("div", { style: {
-                        backgroundColor: '#fed7d7',
-                        padding: '10px',
-                        borderRadius: '4px',
-                        whiteSpace: 'pre-wrap',
-                        overflow: 'auto',
-                        maxHeight: '200px',
-                        marginBottom: '15px'
-                    } },
-                    react_1.default.createElement("strong", null, "Error:"),
-                    " Props did not match schema",
-                    react_1.default.createElement("br", null),
-                    react_1.default.createElement("strong", null, "Validation Error:"),
-                    " ",
-                    JSON.stringify(parseError, null, 2),
-                    react_1.default.createElement("br", null),
-                    react_1.default.createElement("br", null),
-                    react_1.default.createElement("strong", null, "Props:"),
-                    " ",
-                    JSON.stringify((0, peers_sdk_1.toJSON)(_props), null, 2))));
+            return ((0, jsx_runtime_1.jsxs)("div", { style: {
+                    padding: "20px",
+                    border: "2px solid #ff6b6b",
+                    borderRadius: "8px",
+                    backgroundColor: "#fff5f5",
+                    color: "#721c24",
+                    fontFamily: "monospace",
+                    margin: "10px 0",
+                }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { color: "#c53030", marginTop: 0 }, children: "Props Validation Error" }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "15px" }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Peers UI ID:" }), " ", peersUIId] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Package:" }), " ", pkg.name] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Component:" }), " ", peersUI.content?.name] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                            backgroundColor: "#fed7d7",
+                            padding: "10px",
+                            borderRadius: "4px",
+                            whiteSpace: "pre-wrap",
+                            overflow: "auto",
+                            maxHeight: "200px",
+                            marginBottom: "15px",
+                        }, children: [(0, jsx_runtime_1.jsx)("strong", { children: "Error:" }), " Props did not match schema", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("strong", { children: "Validation Error:" }), " ", JSON.stringify(parseError, null, 2), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("strong", { children: "Props:" }), " ", JSON.stringify((0, peers_sdk_1.toJSON)(_props), null, 2)] })] }));
         }
     }
     else {
-        return react_1.default.createElement("div", null, "Component not found");
+        return (0, jsx_runtime_1.jsx)("div", { children: "Component not found" });
     }
 };
 let _window;
-if (typeof window !== 'undefined') {
+if (typeof window !== "undefined") {
     _window = window;
     if (!_window.registerPeersUIRoute) {
         let uiRoutes = [];
-        Object.defineProperty(window, 'registerPeersUIRoute', {
+        Object.defineProperty(window, "registerPeersUIRoute", {
             value: (route) => {
-                uiRoutes = uiRoutes.filter(r => !(r.peersUIId === route.peersUIId));
+                uiRoutes = uiRoutes.filter((r) => !(r.peersUIId === route.peersUIId));
                 uiRoutes.push(route);
-                uiRoutes = (0, lodash_1.orderBy)(uiRoutes, r => r.priority ?? 0, 'desc');
+                uiRoutes = (0, lodash_1.orderBy)(uiRoutes, (r) => r.priority ?? 0, "desc");
             },
             writable: false,
-            configurable: false
+            configurable: false,
         });
-        Object.defineProperty(window, 'getPeersUIRoutes', {
+        Object.defineProperty(window, "getPeersUIRoutes", {
             value: () => {
                 return [...uiRoutes];
             },
             writable: false,
-            configurable: false
+            configurable: false,
         });
-        Object.defineProperty(window, 'UIRouter', {
+        Object.defineProperty(window, "UIRouter", {
             value: exports.UIRouter,
             writable: false,
-            configurable: false
+            configurable: false,
         });
-        Object.defineProperty(window, 'UILoader', {
+        Object.defineProperty(window, "UILoader", {
             value: UILoader,
             writable: false,
-            configurable: false
+            configurable: false,
         });
     }
 }
-exports.peersSystemPackageId = '000peers0system000package';
+exports.peersSystemPackageId = "000peers0system000package";
 /**
  * This is meant to make it easy to register components that are internal to peers
  */
 async function registerInternalPeersUI(props) {
-    while (!window.registerPeersUIRoute) {
+    const routeWin = window;
+    while (!routeWin.registerPeersUIRoute) {
         console.log("Waiting for registerPeersUIRoute to be defined on the window object");
         await new Promise((resolve) => setTimeout(resolve, 20));
     }
@@ -493,7 +397,7 @@ async function registerInternalPeersUI(props) {
     };
     peersUIs[peersUIId] = peersUI;
     if (props.routes?.length) {
-        props.routes.forEach(route => {
+        props.routes.forEach((route) => {
             _window.registerPeersUIRoute({
                 packageId: exports.peersSystemPackageId,
                 peersUIId,
@@ -511,7 +415,7 @@ const reloadPackage = (0, peers_sdk_1.debounceByArgs)(async (packageId) => {
         (0, globals_1.packageReloaded)(Date.now());
     }
 }, 200);
-(0, peers_sdk_1.getUserContext)().then(userContext => {
+(0, peers_sdk_1.getUserContext)().then((_userContext) => {
     (0, peers_sdk_1.Packages)().dataChanged.subscribe(async (evt) => {
         const pkg = evt.dataObject;
         const loadingPromise = uiLoadingPromises[pkg.packageId];