one 1.22.0 → 1.23.0

package/dist/cjs/views/LoadProgressBar.cjs

@@ -1,6 +1,8 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all) __defProp(target, name, {
@@ -17,16 +19,24 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
   value: true
 }), mod);
-var LoadProgressBar_exports = {};
-__export(LoadProgressBar_exports, {
+var LoadProgressBar_web_exports = {};
+__export(LoadProgressBar_web_exports, {
   LoadProgressBar: () => LoadProgressBar
 });
-module.exports = __toCommonJS(LoadProgressBar_exports);
-var import_react = require("react");
-var import_react_native = require("react-native-web");
+module.exports = __toCommonJS(LoadProgressBar_web_exports);
+var React = __toESM(require("react"), 1);
 var import_imperative_api = require("../router/imperative-api.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const LoadProgressBar = ({
@@ -35,11 +45,14 @@ const LoadProgressBar = ({
   initialPercent = 20,
   updateInterval = 300,
   sporadicness = 3,
+  style,
+  onLayout,
   ...props
 }) => {
-  const [loaded, setLoaded] = (0, import_react.useState)(0);
-  const [width, setWidth] = (0, import_react.useState)(0);
-  (0, import_react.useEffect)(() => {
+  const [loaded, setLoaded] = React.useState(0);
+  const [width, setWidth] = React.useState(0);
+  const elementRef = React.useRef(null);
+  React.useEffect(() => {
     let loadInterval;
     const dispose = import_imperative_api.router.onLoadState(state => {
       clearTimeout(loadInterval);
@@ -54,9 +67,9 @@ const LoadProgressBar = ({
                 if (intervalCount % sporadicness === 0) {
                   return;
                 }
-                setLoaded(prev => {
-                  const increment = (100 - prev) * (prev > 80 ? 0.05 : 0.1) * Math.random();
-                  return Math.min(prev + increment, 100);
+                setLoaded(previous => {
+                  const increment = (100 - previous) * (previous > 80 ? 0.05 : 0.1) * Math.random();
+                  return Math.min(previous + increment, 100);
                 });
               }, updateInterval);
             }, startDelay);
@@ -78,25 +91,48 @@ const LoadProgressBar = ({
       clearInterval(loadInterval);
     };
   }, [finishDelay, initialPercent, sporadicness, startDelay, updateInterval]);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.View, {
+  React.useEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    const updateLayout = () => {
+      const rect = element.getBoundingClientRect();
+      setWidth(rect.width);
+      onLayout?.({
+        nativeEvent: {
+          layout: {
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height
+          }
+        }
+      });
+    };
+    updateLayout();
+    const observer = new ResizeObserver(updateLayout);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [onLayout]);
+  const flattenedStyle = React.useMemo(() => {
+    const styleValue = style;
+    const styleValues = Array.isArray(styleValue) ? styleValue.flat(Number.POSITIVE_INFINITY) : [styleValue];
+    return styleValues.reduce((result, value) => value && typeof value === "object" ? Object.assign(result, value) : result, {});
+  }, [style]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
     ...props,
-    onLayout: e => {
-      setWidth(e.nativeEvent.layout.width);
-      props.onLayout?.(e);
-    },
-    style: [{
+    ref: elementRef,
+    style: {
       display: loaded === 0 ? "none" : "flex",
       height: 1,
-      position: "absolute",
+      position: "fixed",
       top: 0,
       left: 0,
       right: 0,
       backgroundColor: "rgba(60, 100, 200, 0.65)",
       width: "100%",
-      transform: [{
-        translateX: -(1 - loaded * 0.01) * width
-      }],
-      zIndex: Number.MAX_SAFE_INTEGER
-    }, props.style]
+      transform: `translateX(${-(1 - loaded * 0.01) * width}px)`,
+      zIndex: Number.MAX_SAFE_INTEGER,
+      ...flattenedStyle
+    }
   });
 };

package/dist/cjs/views/LoadProgressBar.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","LoadProgressBar_exports","__export","LoadProgressBar","module","exports","import_jsx_runtime","require","import_react","import_react_native","import_imperative_api","param","startDelay","finishDelay","initialPercent","updateInterval","sporadicness","props","loaded","setLoaded","useState","width","setWidth","useEffect","loadInterval","dispose","router","onLoadState","state","clearTimeout","setTimeout","intervalCount","setInterval","prev","increment","Math","random","min","clearInterval","jsx","View","onLayout","e","_props_onLayout","nativeEvent","layout","call","style","display","height","position","top","left","right","backgroundColor","transform","translateX","zIndex","Number","MAX_SAFE_INTEGER"],"sources":["../../../src/views/LoadProgressBar.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,uBAAA;AAAAC,QAAA,CAAAD,uBAAA;EAAAE,eAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAoC,CAAAK,uBAAA;AACpC,IAAAK,kBAAA,GAAAC,OAAqC;AACrC,IAAAC,YAAA,GAAAD,OAAA,QAAuB;AAgFnB,IAAAE,mBAAA,GAAAF,OAAA;AA3DG,IAAAG,qBAAyB,GAAAH,OAAA;AAAA,IAC9BJ,eAAa,YAAAA,CAAAQ,KAAA;EACb;IAAAC,UAAc;IAAAC,WAAA;IAAAC,cAAA;IAAAC,cAAA;IAAAC,YAAA;IAAA,GAAAC;EAAA,IAAAN,KAAA;EACd,KAAAO,MAAA,EAAAC,SAAiB,QAAAX,YAAA,CAAAY,QAAA;EACjB,KAAAC,KAAA,EAAAC,QAAiB,QAAAd,YAAA,CAAAY,QAAA;EACjB,IAAAZ,YAAe,CAAAe,SAAA;IACf,IAAGC,YAAA;IACL,IAA4BC,OAAA,GAAAf,qBAAA,CAAAgB,MAAA,CAAAC,WAAA,WAAAC,KAAA;MAC1BC,YAAe,CAAAL,YAAS;MACxB,QAAOI,KAAO;QAEd;UAAA;YACMJ,YAAA,GAAAM,UAAA;cAEEX,SAAU,CAAAL,cAAA;cACd,IAAAiB,aAAa,GAAY;cAEzBP,YAAe,GAAAQ,WAAA;gBACRD,aAAW;gBACd,IAAAA,aAAe,GAAAf,YAAiB;kBAC9B;gBAGA;gBAEAG,SAAA,WAAec,IAAA,EAAY;kBACzB,IAAAC,SAAA,UAAAD,IAAA,KAAAA,IAAA,sBAAAE,IAAA,CAAAC,MAAA;kBAEA,OAAID,IAAA,CAAAE,GAAA,CAAAJ,IAAgB,GAAAC,SAAA,KAAiB,CAAG;gBACtC;cAAA,GACFnB,cAAA;YAEA,GAAAH,UAAA,CAAU;YACR;UACA;QAAqC,aACtC;UAAA;YAAAO,SACA;YACLmB,aAAa,CAAAd,YAAA;YACbM,UAAA;cACFX,SAAA;YAEA,GAAKN,WAAU;YACb;UACA;MACA;IACE;IAAW,OACb,YAAG;MACHY,OAAA;MAAAa,aACF,CAAAd,YAAA;IAAA;EACF,GACD,CAEDX,WAAO,EACLC,cAAQ,EACRE,YAAA,EACFJ,UAAA,EACFG,cAAI,CAEJ;EACE,OAAC,mBAAAT,kBAAA,CAAAiC,GAAA,EAAA9B,mBAAA,CAAA+B,IAAA;IAAA,GAAAvB,KAAA;IAAAwB,QACK,WAAAA,CAAAC,CAAA;MACJ,IAAAC,eAAiB;MACfrB,QAAA,CAAAoB,CAAA,CAASE,WAAE,CAAAC,MAAY,CAAAxB,KAAO;MAC9B,CAAAsB,eAAM,GAAW1B,KAAC,CAAAwB,QAAA,cAAAE,eAAA,uBAAAA,eAAA,CAAAG,IAAA,CAAA7B,KAAA,EAAAyB,CAAA;IAAA;IACpBK,KACA,GAAO;MACLC,OACE,EAAA9B,MAAS,SAAW,MAAI,SAAS;MAAA+B,MACjC;MAAQC,QACR,YAAU;MAAAC,GACV;MAAKC,IACL;MAAMC,KACN;MAAOC,eACP,4BAAiB;MAAAjC,KACjB,QAAO;MAAAkC,SACP,GACA;QACFC,UAAA,QAAAtC,MAAA,WAAAG;MACA,EACF;MAAAoC,MAAA,EAAAC,MAAA,CAAAC;IACF,GAEJ1C,KAAA,CAAA8B,KAAA","ignoreList":[]}
+{"version":3,"names":["LoadProgressBar","param","startDelay","finishDelay","initialPercent","updateInterval","sporadicness","props","loaded","setLoaded","import_react","useState","width","setWidth","useEffect","loadInterval","dispose","import_imperative_api","router","onLoadState","state","clearTimeout","setTimeout","intervalCount","setInterval","prev","increment","Math","random","min","clearInterval","import_jsx_runtime","jsx","import_react_native","View","onLayout","e","_props_onLayout","nativeEvent","layout","call","style","display","height","position","top","left","right","backgroundColor","transform","translateX","zIndex","Number","MAX_SAFE_INTEGER"],"sources":["../../../src/views/LoadProgressBar.web.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,eAAA,YAAAA,CAAAC,KAAA;EAAA;IAAAC,UAAA;IAAAC,WAAA;IAAAC,cAAA;IAAAC,cAAA;IAAAC,YAAA;IAAA,GAAAC;EAAA,IAAAN,KAAA;EAAA,KAAAO,MAAA,EAAAC,SAAA,QAAAC,YAAA,CAAAC,QAAA;EAAA,KAAAC,KAAA,EAAAC,QAAA,QAAAH,YAAA,CAAAC,QAAA;EAAA,IAAAD,YAAA,CAAAI,SAAA;IAAA,IAAAC,YAAuB;IAEvB,IAAAC,OAAA,GAAAC,qBAAuB,CAAAC,MAAA,CAAAC,WAAA,WAAAC,KAAA;MAkHnBC,YAAA,CAAAN,YAAA;MA7FS,QAAAK,KAAA;QACX,cAAa;UAAA;YACbL,YAAc,GAAAO,UAAA;cACdb,SAAiB,CAAAL,cAAA;cACjB,IAAAmB,aAAiB;cACjBR,YAAe,GAAAS,WAAA;gBACfD,aAAA;gBACA,IAAAA,aAAA,GAAAjB,YAAA;kBACG;gBACuB;gBACnBG,SAAQ,WAAagB,IAAM;kBACpB,IAAAC,SAAY,OAAM,GAAAD,IAAS,KAACA,IAAA,sBAAAE,IAAA,CAAAC,MAAA;kBACpC,OAAaD,IAAM,CAAAE,GAAA,CAAAJ,IAAuB,GAAIC,SAAA;gBAE9C;cACA,GAAArB,cAAA;YAEE,GAAAH,UAAU;YACd;UAEA;QACE,KAAK;UAAA;YACHO,SAAA;YACEqB,aAAU,CAAAf,YAAc;YACxBO,UAAI,aAAgB;cAEpBb,SAAA;YACE,GAAAN,WAAA;YACA;UACE;MAAA;IAGF;IACE,mBAAM;MAENa,OAAA;MAAyCc,aAC1C,CAAAf,YAAA;IAAA;EACc,IAEnBZ,WAAA,EAAAC,cACF,EAAAE,YACK,EACHJ,UAAA,EACAG,cAAA,CACA;EACE,sBAAW,IAAA0B,kBAAA,CAAAC,GAAA,EAAAC,mBAAA,CAAAC,IAAA;IAAA,GAAA3B,KACb;IACA4B,QAAA,WAAAA,CAAAC,CAAA;MAAA,IACFC,eAAA;MACFxB,QAAA,CAAAuB,CAAA,CAAAE,WAAA,CAAAC,MAAA,CAAA3B,KAAA;MACD,CAAAyB,eAAA,GAAA9B,KAAA,CAAA4B,QAAA,cAAAE,eAAA,uBAAAA,eAAA,CAAAG,IAAA,CAAAjC,KAAA,EAAA6B,CAAA;IAED;IACEK,KAAA,GACA;MACFC,OAAA,EAAAlC,MAAA;MACEmC,MAAA;MAEEC,QAAA,EAAU,UAAM;MACpBC,GAAM;MACFC,IAAC;MAELC,KAAM;MACJC,eAAa,4BAA8B;MAC3CpC,KAAA,EAAS,MAAK;MACdqC,SAAW,GACT;QACEC,UAAU,EAAG,MAAK1C,MAAM,GAAK,IAAG,IAAAI;MAClC,EACoD;MACxDuC,MAAA,EAAAC,MAAA,CAAAC;IAEA,GACA9C,KAAM,CAAAkC,KAAA;EAEN;AAAiC","ignoreList":[]}

package/dist/cjs/views/Protected.cjs

@@ -29,10 +29,14 @@ __export(Protected_exports, {
 module.exports = __toCommonJS(Protected_exports);
 var import_core = require("@react-navigation/core");
 var import_react = require("react");
+var import_children = require("../headless/children.cjs");
 const {
   Group
 } = (0, import_core.createNavigatorFactory)({})();
 const Protected = Group;
+Object.assign(Protected, {
+  [import_children.NAVIGATOR_CONFIG]: true
+});
 function isProtectedElement(child) {
   return Boolean((0, import_react.isValidElement)(child) && child.type === Group && child.props && typeof child.props === "object" && "guard" in child.props);
 }

package/dist/cjs/views/Protected.native.js

@@ -31,6 +31,7 @@ __export(Protected_exports, {
 module.exports = __toCommonJS(Protected_exports);
 var import_core = require("@react-navigation/core");
 var import_react = require("react");
+var import_children = require("../headless/children.native.js");
 function _type_of(obj) {
   "@swc/helpers - typeof";
 
@@ -40,6 +41,9 @@ var {
   Group
 } = (0, import_core.createNavigatorFactory)({})();
 var Protected = Group;
+Object.assign(Protected, {
+  [import_children.NAVIGATOR_CONFIG]: true
+});
 function isProtectedElement(child) {
   return Boolean(/* @__PURE__ */(0, import_react.isValidElement)(child) && child.type === Group && child.props && _type_of(child.props) === "object" && "guard" in child.props);
 }

package/dist/cjs/views/Protected.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","Protected_exports","__export","Group","Protected","isProtectedElement","module","exports","import_core","require","import_react","_type_of","obj","Symbol","constructor","createNavigatorFactory"],"sources":["../../../src/views/Protected.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,iBAAA;AAAAC,QAAA,CAAAD,iBAAA;EAAAE,KAAA,EAAAA,CAAA,KAAAA,KAAA;EAAAC,SAAA,EAAAA,CAAA,KAAAA,SAAA;EAAAC,kBAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAX,YAAuC,CAAAK,iBAAA;AACvC,IAAAO,WAAA,GAAAC,OAKO;AAKP,IAAAC,YAAc,GAAAD,OAAI;AAmCX,SAAME,SAAYC,GAAA;EAQlB,uBAAS;;EAGd,OAAOA,GAAA,WAAAC,MAAA,oBAAAD,GAAA,CAAAE,WAAA,KAAAD,MAAA,qBAAAD,GAAA;AAAA;AAKY,IACnB;EAAAT;AAAA,QAAAK,WAAA,CAAAO,sBAAA;AACF,IAAAX,SAAA,GAAAD,KAAA","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","Protected_exports","__export","Group","Protected","isProtectedElement","module","exports","import_core","require","import_react","import_children","_type_of","obj","Symbol","constructor","createNavigatorFactory","Object","assign"],"sources":["../../../src/views/Protected.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,iBAAA;AAAAC,QAAA,CAAAD,iBAAA;EAAAE,KAAA,EAAAA,CAAA,KAAAA,KAAA;EAAAC,SAAA,EAAAA,CAAA,KAAAA,SAAA;EAAAC,kBAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAX,YAAuC,CAAAK,iBAAA;AACvC,IAAAO,WAAA,GAAAC,OAKO;AACP,IAAAC,YAAA,GAAAD,OAAiC;AAKjC,IAAAE,eAAc,GAAIF,OAAA;AAmCX,SAAMG,SAAYC,GAAA;EAEzB,uBAAyB;;EAQlB,OAASA,GAAA,WAAAC,MACd,gBACuC,IAAAD,GAAA,CAAAE,WAAA,KAAAD,MAAA,qBAAAD,GAAA;AACvC;AAAO;EAAAV;AACL,QAAAK,WAAA,CAAAQ,sBACM;AAGW,IACnBZ,SAAA,GAAAD,KAAA;AACFc,MAAA,CAAAC,MAAA,CAAAd,SAAA","ignoreList":[]}

package/dist/cjs/views/RootErrorBoundary.cjs

@@ -31,13 +31,12 @@ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
   value: true
 }), mod);
-var RootErrorBoundary_exports = {};
-__export(RootErrorBoundary_exports, {
+var RootErrorBoundary_web_exports = {};
+__export(RootErrorBoundary_web_exports, {
   RootErrorBoundary: () => RootErrorBoundary
 });
-module.exports = __toCommonJS(RootErrorBoundary_exports);
+module.exports = __toCommonJS(RootErrorBoundary_web_exports);
 var import_react = __toESM(require("react"), 1);
-var import_react_native = require("react-native-web");
 var import_skewProtection = require("../skewProtection.cjs");
 var import_dynamicImport = require("../utils/dynamicImport.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -60,8 +59,14 @@ class RootErrorBoundary extends import_react.default.Component {
     console.error(`[One] Root error boundary caught error:
 ${printError(error)}
 ${info.componentStack}`);
-    if (process.env.NODE_ENV === "production" && process.env.ONE_SKEW_PROTECTION !== "false") if ((0, import_dynamicImport.isChunkLoadError)(error)) (0, import_dynamicImport.handleSkewError)();else (0, import_skewProtection.checkSkewAndReload)();
-    if (typeof window !== "undefined" && typeof CustomEvent !== "undefined") window.dispatchEvent(new CustomEvent("one-error", {
+    if (process.env.NODE_ENV === "production" && process.env.ONE_SKEW_PROTECTION !== "false") {
+      if ((0, import_dynamicImport.isChunkLoadError)(error)) {
+        (0, import_dynamicImport.handleSkewError)();
+      } else {
+        (0, import_skewProtection.checkSkewAndReload)();
+      }
+    }
+    window.dispatchEvent(new CustomEvent("one-error", {
       detail: {
         error: {
           message: error.message,
@@ -82,168 +87,122 @@ ${info.componentStack}`);
     });
   };
   render() {
-    if (this.state.hasError) {
-      const {
-        error,
-        componentStack
-      } = this.state;
-      const isDev = process.env.NODE_ENV === "development";
-      if (import_react_native.Platform.OS === "web") return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-        style: {
-          minHeight: "100vh",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          backgroundColor: "#0a0a0f",
-          fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
-          color: "#e8e8e8",
-          padding: 24
-        },
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
-          style: {
-            maxWidth: 500,
-            width: "100%",
-            textAlign: "center"
-          },
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-            style: {
-              width: 64,
-              height: 64,
-              backgroundColor: "#ef4444",
-              borderRadius: "50%",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              margin: "0 auto 24px"
-            },
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)("svg", {
-              width: "32",
-              height: "32",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "white",
-              strokeWidth: "2",
-              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("circle", {
-                cx: "12",
-                cy: "12",
-                r: "10"
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("line", {
-                x1: "12",
-                y1: "8",
-                x2: "12",
-                y2: "12"
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("line", {
-                x1: "12",
-                y1: "16",
-                x2: "12.01",
-                y2: "16"
-              })]
-            })
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("h1", {
-            style: {
-              fontSize: 24,
-              fontWeight: 600,
-              marginBottom: 8
-            },
-            children: "Something went wrong"
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("p", {
-            style: {
-              fontSize: 14,
-              color: "#888",
-              marginBottom: 24
-            },
-            children: error?.message || "An unexpected error occurred"
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
-            style: {
-              display: "flex",
-              gap: 12,
-              justifyContent: "center"
-            },
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
-              onClick: this.handleRetry,
-              style: {
-                padding: "12px 24px",
-                backgroundColor: "#3b82f6",
-                color: "white",
-                border: "none",
-                borderRadius: 8,
-                fontSize: 14,
-                fontWeight: 500,
-                cursor: "pointer"
-              },
-              children: "Try Again"
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
-              onClick: () => {
-                if (typeof window !== "undefined") window.location.href = "/";
-              },
-              style: {
-                padding: "12px 24px",
-                backgroundColor: "transparent",
-                color: "#888",
-                border: "1px solid #3a3a5a",
-                borderRadius: 8,
-                fontSize: 14,
-                fontWeight: 500,
-                cursor: "pointer"
-              },
-              children: "Go Home"
-            })]
-          }), isDev && /* @__PURE__ */(0, import_jsx_runtime.jsx)("p", {
-            style: {
-              fontSize: 11,
-              color: "#666",
-              marginTop: 24
-            },
-            children: "Press Alt+E to view error details"
-          })]
-        })
-      });
-      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react_native.View, {
+    if (!this.state.hasError) {
+      return this.props.children;
+    }
+    const {
+      error
+    } = this.state;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "#0a0a0f",
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+        color: "#e8e8e8",
+        padding: 24
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
         style: {
-          flex: 1,
-          alignItems: "center",
-          justifyContent: "center",
-          backgroundColor: "#0a0a0f",
-          padding: 24
+          maxWidth: 500,
+          width: "100%",
+          textAlign: "center"
         },
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.View, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
           style: {
             width: 64,
             height: 64,
             backgroundColor: "#ef4444",
-            borderRadius: 32,
+            borderRadius: "50%",
+            display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            marginBottom: 24
+            margin: "0 auto 24px"
           },
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Text, {
-            style: {
-              color: "white",
-              fontSize: 32
-            },
-            children: "!"
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)("svg", {
+            width: "32",
+            height: "32",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "white",
+            strokeWidth: "2",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("circle", {
+              cx: "12",
+              cy: "12",
+              r: "10"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("line", {
+              x1: "12",
+              y1: "8",
+              x2: "12",
+              y2: "12"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("line", {
+              x1: "12",
+              y1: "16",
+              x2: "12.01",
+              y2: "16"
+            })]
           })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Text, {
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("h1", {
           style: {
-            fontSize: 20,
-            fontWeight: "600",
-            color: "#e8e8e8",
-            marginBottom: 8,
-            textAlign: "center"
+            fontSize: 24,
+            fontWeight: 600,
+            marginBottom: 8
           },
           children: "Something went wrong"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Text, {
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("p", {
           style: {
             fontSize: 14,
             color: "#888",
-            textAlign: "center",
             marginBottom: 24
           },
           children: error?.message || "An unexpected error occurred"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+          style: {
+            display: "flex",
+            gap: 12,
+            justifyContent: "center"
+          },
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+            onClick: this.handleRetry,
+            style: {
+              padding: "12px 24px",
+              backgroundColor: "#3b82f6",
+              color: "white",
+              border: "none",
+              borderRadius: 8,
+              fontSize: 14,
+              fontWeight: 500,
+              cursor: "pointer"
+            },
+            children: "Try Again"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+            onClick: () => {
+              window.location.href = "/";
+            },
+            style: {
+              padding: "12px 24px",
+              backgroundColor: "transparent",
+              color: "#888",
+              border: "1px solid #3a3a5a",
+              borderRadius: 8,
+              fontSize: 14,
+              fontWeight: 500,
+              cursor: "pointer"
+            },
+            children: "Go Home"
+          })]
+        }), process.env.NODE_ENV === "development" && /* @__PURE__ */(0, import_jsx_runtime.jsx)("p", {
+          style: {
+            fontSize: 11,
+            color: "#666",
+            marginTop: 24
+          },
+          children: "Press Alt+E to view error details"
         })]
-      });
-    }
-    return this.props.children;
+      })
+    });
   }
 }
 function printError(err) {