@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/ui-router/ui-loader.tsx

@@ -1,4 +1,18 @@
-import { debounceByArgs, getUserContext, IPackage, IPeersPackageUIs, IPeersUI, IPeersUIRoute, newid, Packages, PackageVersions, rpcServerCalls, toJSON, UIContext, zodAnyObject } from "@peers-app/peers-sdk";
+import {
+  debounceByArgs,
+  getUserContext,
+  type IPackage,
+  type IPeersPackageUIs,
+  type IPeersUI,
+  type IPeersUIRoute,
+  newid,
+  Packages,
+  PackageVersions,
+  rpcServerCalls,
+  toJSON,
+  type UIContext,
+  zodAnyObject,
+} from "@peers-app/peers-sdk";
 import { orderBy } from "lodash";
 import React, { Component, useEffect } from "react";
 import { LoadingIndicator } from "../components/loading-indicator";
@@ -33,7 +47,7 @@ class UIErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState>
   }
 
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    console.error('UIErrorBoundary caught an error:', error, errorInfo);
+    console.error("UIErrorBoundary caught an error:", error, errorInfo);
     this.setState({
       error,
       errorInfo,
@@ -44,41 +58,59 @@ class UIErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState>
     if (this.state.hasError) {
       const { peersUIId, packageName, componentName } = this.props;
       const { error, errorInfo } = this.state;
-      
+
       return (
-        <div style={{ 
-          padding: '20px', 
-          border: '2px solid #ff6b6b', 
-          borderRadius: '8px', 
-          backgroundColor: '#fff5f5',
-          color: '#721c24',
-          fontFamily: 'monospace',
-          margin: '10px 0'
-        }}>
-          <h3 style={{ color: '#c53030', marginTop: 0 }}>UI Component Error</h3>
-          <div style={{ marginBottom: '15px' }}>
-            {peersUIId && <div><strong>Peers UI ID:</strong> {peersUIId}</div>}
-            {packageName && <div><strong>Package:</strong> {packageName}</div>}
-            {componentName && <div><strong>Component:</strong> {componentName}</div>}
+        <div
+          style={{
+            padding: "20px",
+            border: "2px solid #ff6b6b",
+            borderRadius: "8px",
+            backgroundColor: "#fff5f5",
+            color: "#721c24",
+            fontFamily: "monospace",
+            margin: "10px 0",
+          }}
+        >
+          <h3 style={{ color: "#c53030", marginTop: 0 }}>UI Component Error</h3>
+          <div style={{ marginBottom: "15px" }}>
+            {peersUIId && (
+              <div>
+                <strong>Peers UI ID:</strong> {peersUIId}
+              </div>
+            )}
+            {packageName && (
+              <div>
+                <strong>Package:</strong> {packageName}
+              </div>
+            )}
+            {componentName && (
+              <div>
+                <strong>Component:</strong> {componentName}
+              </div>
+            )}
           </div>
-          
-          <details style={{ marginBottom: '15px' }}>
-            <summary style={{ cursor: 'pointer', fontWeight: 'bold', marginBottom: '10px' }}>
+
+          <details style={{ marginBottom: "15px" }}>
+            <summary style={{ cursor: "pointer", fontWeight: "bold", marginBottom: "10px" }}>
               Error Details
             </summary>
-            <div style={{ 
-              backgroundColor: '#fed7d7', 
-              padding: '10px', 
-              borderRadius: '4px',
-              whiteSpace: 'pre-wrap',
-              overflow: 'auto',
-              maxHeight: '200px'
-            }}>
-              <strong>Error:</strong> {error?.message || 'Unknown error'}
+            <div
+              style={{
+                backgroundColor: "#fed7d7",
+                padding: "10px",
+                borderRadius: "4px",
+                whiteSpace: "pre-wrap",
+                overflow: "auto",
+                maxHeight: "200px",
+              }}
+            >
+              <strong>Error:</strong> {error?.message || "Unknown error"}
               {error?.stack && (
                 <>
-                  <br /><br />
-                  <strong>Stack Trace:</strong><br />
+                  <br />
+                  <br />
+                  <strong>Stack Trace:</strong>
+                  <br />
                   {error.stack}
                 </>
               )}
@@ -87,32 +119,35 @@ class UIErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState>
 
           {errorInfo && (
             <details>
-              <summary style={{ cursor: 'pointer', fontWeight: 'bold', marginBottom: '10px' }}>
+              <summary style={{ cursor: "pointer", fontWeight: "bold", marginBottom: "10px" }}>
                 Component Stack
               </summary>
-              <div style={{ 
-                backgroundColor: '#fed7d7', 
-                padding: '10px', 
-                borderRadius: '4px',
-                whiteSpace: 'pre-wrap',
-                overflow: 'auto',
-                maxHeight: '200px'
-              }}>
+              <div
+                style={{
+                  backgroundColor: "#fed7d7",
+                  padding: "10px",
+                  borderRadius: "4px",
+                  whiteSpace: "pre-wrap",
+                  overflow: "auto",
+                  maxHeight: "200px",
+                }}
+              >
                 {errorInfo.componentStack}
               </div>
             </details>
           )}
 
-          <button 
+          <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'
+              marginTop: "15px",
+              padding: "8px 16px",
+              backgroundColor: "#c53030",
+              color: "white",
+              border: "none",
+              borderRadius: "4px",
+              cursor: "pointer",
             }}
           >
             Try Again
@@ -126,30 +161,48 @@ class UIErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState>
 }
 
 interface IProps extends UIContext {
-  props: Record<string, any>;
+  props: Record<string, unknown>;
 }
 
 export const UIRouter = (props: IProps) => {
   let matchingRoute: IPeersUIRoute | undefined;
   const allRoutes = _window.getPeersUIRoutes() as IPeersUIRoute[];
-  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) return false;
-    if (props.uiSubcategory && props.uiSubcategory !== '*' && r.uiSubcategory !== '*' && r.uiSubcategory !== props.uiSubcategory) return false;
+  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
+    )
+      return false;
+    if (
+      props.uiSubcategory &&
+      props.uiSubcategory !== "*" &&
+      r.uiSubcategory !== "*" &&
+      r.uiSubcategory !== props.uiSubcategory
+    )
+      return false;
     return true;
   });
 
   const context: UIContext & { path: string } = {
     ...props,
     path: props.path || mainContentPath(),
-  }
+  };
   for (const route of filteredRoutes) {
     // if (route.path && !context.path.startsWith(route.path)) continue;
 
     // <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;
@@ -181,9 +234,9 @@ export const UIRouter = (props: IProps) => {
   }
 
   return UILoader({ peersUIId: matchingRoute.peersUIId, props: props.props });
-}
+};
 
-const UILoader = (args: { peersUIId: string, props: Record<string, any> }) => {
+const UILoader = (args: { peersUIId: string; props: Record<string, unknown> }) => {
   const { props, peersUIId } = args;
   const [lastReloadTime] = useObservable(packageReloaded);
   args.props.__lastPackageReload = lastReloadTime;
@@ -192,7 +245,11 @@ const UILoader = (args: { peersUIId: string, props: Record<string, any> }) => {
   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 });
+      console.error("props did not match schema", {
+        props,
+        schema: peersUI.propsSchema,
+        errors: parseResult.error,
+      });
       return (
         <div>
           <pre>
@@ -200,121 +257,131 @@ const UILoader = (args: { peersUIId: string, props: Record<string, any> }) => {
             peersUIId: {peersUI.peersUIId} <br />
             Component name: {peersUI.content?.name} <br />
             Props did not match schema <br />
-            Errors: {JSON.stringify(parseResult.error, null, 2)} <br /><br />
-            Props {JSON.stringify(toJSON(props), null, 2)}<br />
+            Errors: {JSON.stringify(parseResult.error, null, 2)} <br />
+            <br />
+            Props {JSON.stringify(toJSON(props), null, 2)}
+            <br />
           </pre>
         </div>
       );
     }
-    const Component = peersUI.content as React.ComponentType<any>;
+    const Component = peersUI.content as React.ComponentType<Record<string, unknown>>;
     return (
-      <UIErrorBoundary 
-        peersUIId={peersUIId}
-        componentName={peersUI.content?.name}
-      >
+      <UIErrorBoundary peersUIId={peersUIId} componentName={peersUI.content?.name}>
         <Component {...args.props} />
       </UIErrorBoundary>
     );
   }
 
   return <UIAsyncLoader {...args} />;
-}
+};
 
-const uiLoadingPromises: Record<string, Promise<any>> = {};
+const uiLoadingPromises: Record<string, Promise<void>> = {};
 
 // Check if we're running in a React Native WebView (has injectUIBundle available)
-const isReactNativeWebView = typeof (window as any).ReactNativeWebView !== 'undefined';
+const isReactNativeWebView =
+  typeof (window as Window & { ReactNativeWebView?: unknown }).ReactNativeWebView !== "undefined";
 
 async function resolveUiBundleFileId(pkg: IPackage): Promise<string | undefined> {
   if (!pkg.activePackageVersionId) return undefined;
   try {
     const pv = await PackageVersions().get(pkg.activePackageVersionId);
     return pv?.uiBundleFileId;
-  } catch { return undefined; }
+  } catch {
+    return undefined;
+  }
 }
 
+type PeersUiBundleWindow = Window & {
+  __peersUIs?: Record<string, IPeersUI>;
+  __peersUIBundleLoaded?: (loadedFileId: string) => void;
+  __peersUIBundleError?: (errorFileId: string, errorMsg: string) => void;
+};
+
 function loadUIBundle(pkg: IPackage, forceRefresh?: boolean) {
-  let importPromise: Promise<any> = uiLoadingPromises[pkg.packageId];
+  let importPromise: Promise<void> = uiLoadingPromises[pkg.packageId];
   if (!importPromise || forceRefresh) {
     const sTime = Date.now();
     console.log(`loading ui bundle for ${pkg.name}`);
-    importPromise = new Promise<void>(async (resolve, reject) => {
-      try {
-        const uiBundleFileId = await resolveUiBundleFileId(pkg);
-        if (!uiBundleFileId) {
-          resolve();
-          return;
-        }
+    importPromise = (async () => {
+      const uiBundleFileId = await resolveUiBundleFileId(pkg);
+      if (!uiBundleFileId) {
+        return;
+      }
+
+      if (isReactNativeWebView && rpcServerCalls.injectUIBundle) {
+        const _w = window as PeersUiBundleWindow;
+        _w.__peersUIs = _w.__peersUIs || {};
 
-        if (isReactNativeWebView && rpcServerCalls.injectUIBundle) {
-          const _window = window as any;
-          _window.__peersUIs = _window.__peersUIs || {};
-          
-          const loadPromise = new Promise<void>((resolveLoad, rejectLoad) => {
-            _window.__peersUIBundleLoaded = (loadedFileId: string) => {
-              if (loadedFileId === uiBundleFileId) {
-                Object.keys(_window.__peersUIs || {}).forEach(peersUIId => {
-                  peersUIs[peersUIId] = _window.__peersUIs[peersUIId];
-                });
-                resolveLoad();
-              }
-            };
-            
-            _window.__peersUIBundleError = (errorFileId: string, errorMsg: string) => {
-              if (errorFileId === uiBundleFileId) {
-                rejectLoad(new Error(errorMsg));
-              }
-            };
-          });
-
-          await rpcServerCalls.injectUIBundle(uiBundleFileId);
-          await loadPromise;
-          console.log(`finished loading ui bundle for ${pkg.name}: ${(Date.now() - sTime).toFixed(0)}ms`);
-        } else {
-          let bundleCode = await rpcServerCalls.getFileContents(uiBundleFileId);
-          if (bundleCode) {
-            const exportUIs = (peerUIs: IPeersPackageUIs) => {
-              peerUIs?.uis?.forEach(ui => {
-                peersUIs[ui.peersUIId] = ui;
+        const loadPromise = new Promise<void>((resolveLoad, rejectLoad) => {
+          _w.__peersUIBundleLoaded = (loadedFileId: string) => {
+            if (loadedFileId === uiBundleFileId) {
+              const store = _w.__peersUIs || {};
+              Object.keys(store).forEach((peersUIId) => {
+                peersUIs[peersUIId] = store[peersUIId];
               });
+              resolveLoad();
             }
-            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`);
+          };
+
+          _w.__peersUIBundleError = (errorFileId: string, errorMsg: string) => {
+            if (errorFileId === uiBundleFileId) {
+              rejectLoad(new Error(errorMsg));
+            }
+          };
+        });
+
+        await rpcServerCalls.injectUIBundle(uiBundleFileId);
+        await loadPromise;
+        console.log(
+          `finished loading ui bundle for ${pkg.name}: ${(Date.now() - sTime).toFixed(0)}ms`,
+        );
+      } else {
+        const bundleCode = await rpcServerCalls.getFileContents(uiBundleFileId);
+        if (bundleCode) {
+          const exportUIs = (peerUIs: IPeersPackageUIs) => {
+            peerUIs?.uis?.forEach((ui) => {
+              peersUIs[ui.peersUIId] = ui;
+            });
+          };
+          const bundleFunction = new Function("exportUIs", bundleCode);
+          await bundleFunction(exportUIs);
         }
-        resolve();
-      } catch (err) {
-        console.error(`Error while loading ui module for ${pkg.name}`, err);
-        reject(err);
+        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: unknown) => {
+      console.error(`Error while loading ui module for ${pkg.name}`, err);
+      throw err;
     });
     uiLoadingPromises[pkg.packageId] = importPromise;
   }
   return importPromise;
 }
 
-const UIAsyncLoader = (props: { peersUIId: string, props: Record<string, any> }) => {
+const UIAsyncLoader = (props: { peersUIId: string; props: Record<string, unknown> }) => {
   const { peersUIId } = props;
   const [loaded, setLoaded] = React.useState(false);
   const [loadError, setLoadError] = React.useState<Error | null>(null);
 
   const allRoutes = _window.getPeersUIRoutes() as IPeersUIRoute[];
-  const uiPackageId = allRoutes.find(r => r.peersUIId === peersUIId)?.packageId;
+  const uiPackageId = allRoutes.find((r) => r.peersUIId === peersUIId)?.packageId;
 
   useObservable(allPackages);
-  const pkg = allPackages().find(p => p.packageId === uiPackageId);
+  const pkg = allPackages().find((p) => p.packageId === uiPackageId);
 
   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 <div>Could not find package that owns peersUIId {peersUIId}</div>;
@@ -322,46 +389,59 @@ const UIAsyncLoader = (props: { peersUIId: string, props: Record<string, any> })
 
   if (loadError) {
     return (
-      <div style={{ 
-        padding: '20px', 
-        border: '2px solid #ff6b6b', 
-        borderRadius: '8px', 
-        backgroundColor: '#fff5f5',
-        color: '#721c24',
-        fontFamily: 'monospace',
-        margin: '10px 0'
-      }}>
-        <h3 style={{ color: '#c53030', marginTop: 0 }}>Bundle Loading Error</h3>
-        <div style={{ marginBottom: '15px' }}>
-          <div><strong>Peers UI ID:</strong> {peersUIId}</div>
-          <div><strong>Package:</strong> {pkg.name}</div>
-          <div><strong>Package ID:</strong> {pkg.packageId}</div>
+      <div
+        style={{
+          padding: "20px",
+          border: "2px solid #ff6b6b",
+          borderRadius: "8px",
+          backgroundColor: "#fff5f5",
+          color: "#721c24",
+          fontFamily: "monospace",
+          margin: "10px 0",
+        }}
+      >
+        <h3 style={{ color: "#c53030", marginTop: 0 }}>Bundle Loading Error</h3>
+        <div style={{ marginBottom: "15px" }}>
+          <div>
+            <strong>Peers UI ID:</strong> {peersUIId}
+          </div>
+          <div>
+            <strong>Package:</strong> {pkg.name}
+          </div>
+          <div>
+            <strong>Package ID:</strong> {pkg.packageId}
+          </div>
         </div>
-        
-        <details style={{ marginBottom: '15px' }}>
-          <summary style={{ cursor: 'pointer', fontWeight: 'bold', marginBottom: '10px' }}>
+
+        <details style={{ marginBottom: "15px" }}>
+          <summary style={{ cursor: "pointer", fontWeight: "bold", marginBottom: "10px" }}>
             Error Details
           </summary>
-          <div style={{ 
-            backgroundColor: '#fed7d7', 
-            padding: '10px', 
-            borderRadius: '4px',
-            whiteSpace: 'pre-wrap',
-            overflow: 'auto',
-            maxHeight: '200px'
-          }}>
-            <strong>Error:</strong> {loadError.message || 'Unknown error'}
+          <div
+            style={{
+              backgroundColor: "#fed7d7",
+              padding: "10px",
+              borderRadius: "4px",
+              whiteSpace: "pre-wrap",
+              overflow: "auto",
+              maxHeight: "200px",
+            }}
+          >
+            <strong>Error:</strong> {loadError.message || "Unknown error"}
             {loadError.stack && (
               <>
-                <br /><br />
-                <strong>Stack Trace:</strong><br />
+                <br />
+                <br />
+                <strong>Stack Trace:</strong>
+                <br />
                 {loadError.stack}
               </>
             )}
           </div>
         </details>
 
-        <button 
+        <button
+          type="button"
           onClick={() => {
             setLoadError(null);
             setLoaded(false);
@@ -372,13 +452,13 @@ const UIAsyncLoader = (props: { peersUIId: string, props: Record<string, any> })
             }
           }}
           style={{
-            marginTop: '15px',
-            padding: '8px 16px',
-            backgroundColor: '#c53030',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: 'pointer'
+            marginTop: "15px",
+            padding: "8px 16px",
+            backgroundColor: "#c53030",
+            color: "white",
+            border: "none",
+            borderRadius: "4px",
+            cursor: "pointer",
           }}
         >
           Retry Loading
@@ -388,7 +468,7 @@ const UIAsyncLoader = (props: { peersUIId: string, props: Record<string, any> })
   }
 
   if (!loaded) {
-    return (<LoadingIndicator />);
+    return <LoadingIndicator />;
   }
 
   const peersUI = peersUIs[peersUIId];
@@ -396,9 +476,9 @@ const UIAsyncLoader = (props: { peersUIId: string, props: Record<string, any> })
     const _props = { ...props, uiVar: undefined };
     try {
       peersUI.propsSchema.parse(_props);
-      const Component = peersUI.content as React.ComponentType<any>;
+      const Component = peersUI.content as React.ComponentType<Record<string, unknown>>;
       return (
-        <UIErrorBoundary 
+        <UIErrorBoundary
           peersUIId={peersUIId}
           packageName={pkg.name}
           componentName={peersUI.content?.name}
@@ -408,33 +488,46 @@ const UIAsyncLoader = (props: { peersUIId: string, props: Record<string, any> })
       );
     } catch (parseError) {
       return (
-        <div style={{ 
-          padding: '20px', 
-          border: '2px solid #ff6b6b', 
-          borderRadius: '8px', 
-          backgroundColor: '#fff5f5',
-          color: '#721c24',
-          fontFamily: 'monospace',
-          margin: '10px 0'
-        }}>
-          <h3 style={{ color: '#c53030', marginTop: 0 }}>Props Validation Error</h3>
-          <div style={{ marginBottom: '15px' }}>
-            <div><strong>Peers UI ID:</strong> {peersUIId}</div>
-            <div><strong>Package:</strong> {pkg.name}</div>
-            <div><strong>Component:</strong> {peersUI.content?.name}</div>
+        <div
+          style={{
+            padding: "20px",
+            border: "2px solid #ff6b6b",
+            borderRadius: "8px",
+            backgroundColor: "#fff5f5",
+            color: "#721c24",
+            fontFamily: "monospace",
+            margin: "10px 0",
+          }}
+        >
+          <h3 style={{ color: "#c53030", marginTop: 0 }}>Props Validation Error</h3>
+          <div style={{ marginBottom: "15px" }}>
+            <div>
+              <strong>Peers UI ID:</strong> {peersUIId}
+            </div>
+            <div>
+              <strong>Package:</strong> {pkg.name}
+            </div>
+            <div>
+              <strong>Component:</strong> {peersUI.content?.name}
+            </div>
           </div>
-          
-          <div style={{ 
-            backgroundColor: '#fed7d7', 
-            padding: '10px', 
-            borderRadius: '4px',
-            whiteSpace: 'pre-wrap',
-            overflow: 'auto',
-            maxHeight: '200px',
-            marginBottom: '15px'
-          }}>
-            <strong>Error:</strong> Props did not match schema<br />
-            <strong>Validation Error:</strong> {JSON.stringify(parseError, null, 2)}<br /><br />
+
+          <div
+            style={{
+              backgroundColor: "#fed7d7",
+              padding: "10px",
+              borderRadius: "4px",
+              whiteSpace: "pre-wrap",
+              overflow: "auto",
+              maxHeight: "200px",
+              marginBottom: "15px",
+            }}
+          >
+            <strong>Error:</strong> Props did not match schema
+            <br />
+            <strong>Validation Error:</strong> {JSON.stringify(parseError, null, 2)}
+            <br />
+            <br />
             <strong>Props:</strong> {JSON.stringify(toJSON(_props), null, 2)}
           </div>
         </div>
@@ -443,60 +536,65 @@ const UIAsyncLoader = (props: { peersUIId: string, props: Record<string, any> })
   } else {
     return <div>Component not found</div>;
   }
-}
+};
 
-let _window: {
-  registerPeersUIRoute: (route: IPeersUIRoute) => Promise<void>,
-  getPeersUIRoutes: () => IPeersUIRoute[],
-  UIRouter: typeof UIRouter,
-  UILoader: typeof UILoader,
+type PeersRuntimeWindow = Window & {
+  registerPeersUIRoute: (route: IPeersUIRoute) => void;
+  getPeersUIRoutes: () => IPeersUIRoute[];
+  UIRouter: typeof UIRouter;
+  UILoader: typeof UILoader;
 };
 
-if (typeof window !== 'undefined') {
-  _window = window as any;
+let _window: PeersRuntimeWindow;
+
+if (typeof window !== "undefined") {
+  _window = window as unknown as PeersRuntimeWindow;
   if (!_window.registerPeersUIRoute) {
     let uiRoutes: IPeersUIRoute[] = [];
-    Object.defineProperty(window, 'registerPeersUIRoute', {
+    Object.defineProperty(window, "registerPeersUIRoute", {
       value: (route: IPeersUIRoute) => {
-        uiRoutes = uiRoutes.filter(r => !(r.peersUIId === route.peersUIId));
+        uiRoutes = uiRoutes.filter((r) => !(r.peersUIId === route.peersUIId));
         uiRoutes.push(route);
-        uiRoutes = orderBy(uiRoutes, r => r.priority ?? 0, 'desc');
+        uiRoutes = 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: UIRouter,
       writable: false,
-      configurable: false
+      configurable: false,
     });
-    Object.defineProperty(window, 'UILoader', {
+    Object.defineProperty(window, "UILoader", {
       value: UILoader,
       writable: false,
-      configurable: false
+      configurable: false,
     });
   }
 }
 
-export const peersSystemPackageId = '000peers0system000package';
+export const peersSystemPackageId = "000peers0system000package";
 
 /**
  * This is meant to make it easy to register components that are internal to peers
  */
 export async function registerInternalPeersUI(props: {
-  component: React.ComponentType<any>,
-  propsSchema?: any,
-  routes?: Omit<IPeersUIRoute, 'peersUIId' | 'packageId'>[];
+  component: IPeersUI["content"];
+  /** Zod schemas may use a different zod instance than peers-sdk (duplicate resolution); keep loose. */
+  // biome-ignore lint/suspicious/noExplicitAny: see JSDoc
+  propsSchema?: any;
+  routes?: Omit<IPeersUIRoute, "peersUIId" | "packageId">[];
   peersUIId?: string;
 }) {
-  while (!(window as any).registerPeersUIRoute) {
+  const routeWin = window as Window & { registerPeersUIRoute?: (route: IPeersUIRoute) => void };
+  while (!routeWin.registerPeersUIRoute) {
     console.log("Waiting for registerPeersUIRoute to be defined on the window object");
     await new Promise((resolve) => setTimeout(resolve, 20));
   }
@@ -510,7 +608,7 @@ export async function registerInternalPeersUI(props: {
   peersUIs[peersUIId] = peersUI;
 
   if (props.routes?.length) {
-    props.routes.forEach(route => {
+    props.routes.forEach((route) => {
       _window.registerPeersUIRoute({
         packageId: peersSystemPackageId,
         peersUIId,
@@ -530,11 +628,11 @@ const reloadPackage = debounceByArgs(async (packageId: string) => {
   }
 }, 200);
 
-getUserContext().then(userContext => {  
-  Packages().dataChanged.subscribe(async evt => {
+getUserContext().then((_userContext) => {
+  Packages().dataChanged.subscribe(async (evt) => {
     const pkg = evt.dataObject;
     const loadingPromise = uiLoadingPromises[pkg.packageId];
     if (!loadingPromise) return;
     reloadPackage(pkg.packageId);
-  })
-})
+  });
+});