@admin-layout/tailwind-ui 12.2.4-alpha.9 → 12.2.4-alpha.98

package/lib/components/ErrorHandlers/RemixErrorBoundary.js

@@ -1,123 +1,241 @@
-import*as React from'react';import {useRouteError,useNavigate,isRouteErrorResponse}from'@remix-run/react';import {logger}from'@cdm-logger/client';/**
+import {jsx,jsxs}from'react/jsx-runtime';import*as React from'react';import {useRouteError,isRouteErrorResponse}from'@remix-run/react';import {logger}from'@cdm-logger/client';// Inline styles as fallback when Tailwind CSS is unavailable (e.g., during SSR error recovery)
+const containerStyle = {
+  display: 'flex',
+  minHeight: '100vh',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: '#f9fafb',
+  padding: '3rem 1rem',
+  fontFamily: 'system-ui, -apple-system, sans-serif'
+};
+const iconContainerStyle = {
+  display: 'flex',
+  width: '4rem',
+  height: '4rem',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '9999px',
+  backgroundColor: '#fee2e2',
+  flexShrink: 0
+};
+const svgStyle = {
+  width: '2rem',
+  height: '2rem',
+  color: '#ef4444'
+};
+const buttonStyle = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  borderRadius: '0.375rem',
+  backgroundColor: '#2563eb',
+  padding: '0.5rem 1rem',
+  fontSize: '0.875rem',
+  fontWeight: 500,
+  color: '#ffffff',
+  border: 'none',
+  cursor: 'pointer'
+};
+/**
  * Remix Route ErrorBoundary Component
  * This is specifically for Remix route errors (404s, loader errors, etc.)
  * Different from React's ErrorBoundary which handles component errors
  *
+ * Uses inline styles as fallback to ensure the error page renders correctly
+ * even when Tailwind CSS fails to load or during hydration error recovery.
+ *
  * Usage in root.tsx or any route file:
  * export { RemixErrorBoundary as ErrorBoundary } from '@admin-layout/tailwind-ui';
  */
 function RemixErrorBoundary() {
   const error = useRouteError();
-  useNavigate();
   React.useEffect(() => {
     logger.error('Route Error:', error);
     console.error('Route Error:', error);
   }, [error]);
   const handleGoHome = () => {
-    // Use window.location.href for a full page navigation to clear any stale state
-    // This is more reliable than navigate() + reload() which can have race conditions
+    // Use direct location change instead of useNavigate to avoid router context issues
     window.location.href = '/';
   };
   if (isRouteErrorResponse(error)) {
-    return React.createElement("div", {
-      className: "flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8"
-    }, React.createElement("div", {
-      className: "w-full max-w-md space-y-8 text-center"
-    }, React.createElement("div", {
-      className: "mb-4 flex justify-center"
-    }, React.createElement("div", {
-      className: "flex h-16 w-16 items-center justify-center rounded-full bg-red-100"
-    }, React.createElement("svg", {
-      className: "h-8 w-8 text-red-500",
-      width: "32",
-      height: "32",
-      fill: "none",
-      viewBox: "0 0 24 24",
-      stroke: "currentColor"
-    }, React.createElement("path", {
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 2,
-      d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-    })))), React.createElement("div", null, React.createElement("h1", {
-      className: "text-6xl font-bold text-gray-900"
-    }, error.status), React.createElement("h2", {
-      className: "mt-2 text-2xl font-bold tracking-tight text-gray-900"
-    }, error.statusText), error.data && React.createElement("p", {
-      className: "mt-2 text-sm text-gray-600"
-    }, error.data)), React.createElement("div", {
-      className: "mt-6"
-    }, React.createElement("button", {
-      onClick: handleGoHome,
-      className: "inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
-    }, "Go back home"))));
-  } else if (error instanceof Error) {
-    return React.createElement("div", {
-      className: "flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8"
-    }, React.createElement("div", {
-      className: "w-full max-w-2xl space-y-8"
-    }, React.createElement("div", {
-      className: "mb-4 flex justify-center"
-    }, React.createElement("div", {
-      className: "flex h-16 w-16 items-center justify-center rounded-full bg-red-100"
-    }, React.createElement("svg", {
-      className: "h-8 w-8 text-red-500",
-      fill: "none",
-      viewBox: "0 0 24 24",
-      stroke: "currentColor"
-    }, React.createElement("path", {
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 2,
-      d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-    })))), React.createElement("div", {
-      className: "text-center"
-    }, React.createElement("h1", {
-      className: "text-3xl font-bold tracking-tight text-gray-900"
-    }, "Application Error"), React.createElement("p", {
-      className: "mt-2 text-lg text-red-600"
-    }, error.message), error.stack && process.env.NODE_ENV !== 'production' && React.createElement("details", {
-      className: "mt-4 text-left"
-    }, React.createElement("summary", {
-      className: "cursor-pointer text-sm font-medium text-gray-700 hover:text-gray-900"
-    }, "Stack trace (development only)"), React.createElement("pre", {
-      className: "mt-2 overflow-auto rounded-md bg-gray-100 p-4 text-xs text-gray-800 max-h-96"
-    }, error.stack))), React.createElement("div", {
-      className: "mt-6 text-center"
-    }, React.createElement("button", {
-      onClick: handleGoHome,
-      className: "inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
-    }, "Go back home"))));
-  } else {
-    return React.createElement("div", {
-      className: "flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8"
-    }, React.createElement("div", {
-      className: "w-full max-w-md space-y-8 text-center"
-    }, React.createElement("div", {
-      className: "mb-4 flex justify-center"
-    }, React.createElement("div", {
-      className: "flex h-16 w-16 items-center justify-center rounded-full bg-red-100"
-    }, React.createElement("svg", {
-      className: "h-8 w-8 text-red-500",
-      width: "32",
-      height: "32",
-      fill: "none",
-      viewBox: "0 0 24 24",
-      stroke: "currentColor"
-    }, React.createElement("path", {
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 2,
-      d: "M6 18L18 6M6 6l12 12"
-    })))), React.createElement("div", null, React.createElement("h1", {
-      className: "text-3xl font-bold tracking-tight text-gray-900"
-    }, "Unknown Error"), React.createElement("p", {
-      className: "mt-2 text-sm text-gray-600"
-    }, "An unexpected error occurred. Please try again later.")), React.createElement("div", {
-      className: "mt-6"
-    }, React.createElement("button", {
-      onClick: handleGoHome,
-      className: "inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
-    }, "Go back home"))));
+    return jsx("div", {
+      className: "flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8",
+      style: containerStyle,
+      children: jsxs("div", {
+        className: "w-full max-w-md space-y-8 text-center",
+        style: {
+          maxWidth: '28rem',
+          width: '100%',
+          textAlign: 'center'
+        },
+        children: [jsx("div", {
+          className: "mb-4 flex justify-center",
+          style: {
+            display: 'flex',
+            justifyContent: 'center',
+            marginBottom: '1rem'
+          },
+          children: jsx("div", {
+            className: "flex h-16 w-16 items-center justify-center rounded-full bg-red-100",
+            style: iconContainerStyle,
+            children: jsx("svg", {
+              className: "h-8 w-8 text-red-500",
+              width: "32",
+              height: "32",
+              style: svgStyle,
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              children: jsx("path", {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+              })
+            })
+          })
+        }), jsxs("div", {
+          children: [jsx("h1", {
+            className: "text-6xl font-bold text-gray-900",
+            style: {
+              fontSize: '3.75rem',
+              fontWeight: 700,
+              color: '#111827'
+            },
+            children: error.status
+          }), jsx("h2", {
+            className: "mt-2 text-2xl font-bold tracking-tight text-gray-900",
+            style: {
+              marginTop: '0.5rem',
+              fontSize: '1.5rem',
+              fontWeight: 700,
+              color: '#111827'
+            },
+            children: error.statusText
+          }), error.data && jsx("p", {
+            className: "mt-2 text-sm text-gray-600",
+            style: {
+              marginTop: '0.5rem',
+              fontSize: '0.875rem',
+              color: '#4b5563'
+            },
+            children: error.data
+          })]
+        }), jsx("div", {
+          className: "mt-6",
+          style: {
+            marginTop: '1.5rem'
+          },
+          children: jsx("button", {
+            onClick: handleGoHome,
+            className: "inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors",
+            style: buttonStyle,
+            children: "Go back home"
+          })
+        })]
+      })
+    });
   }
+  const errorMessage = error instanceof Error ? error.message : 'An unexpected error occurred';
+  const errorStack = error instanceof Error ? error.stack : undefined;
+  return jsx("div", {
+    className: "flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8",
+    style: containerStyle,
+    children: jsxs("div", {
+      className: "w-full max-w-2xl space-y-8",
+      style: {
+        maxWidth: '42rem',
+        width: '100%'
+      },
+      children: [jsx("div", {
+        className: "mb-4 flex justify-center",
+        style: {
+          display: 'flex',
+          justifyContent: 'center',
+          marginBottom: '1rem'
+        },
+        children: jsx("div", {
+          className: "flex h-16 w-16 items-center justify-center rounded-full bg-red-100",
+          style: iconContainerStyle,
+          children: jsx("svg", {
+            className: "h-8 w-8 text-red-500",
+            width: "32",
+            height: "32",
+            style: svgStyle,
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            children: jsx("path", {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            })
+          })
+        })
+      }), jsxs("div", {
+        className: "text-center",
+        style: {
+          textAlign: 'center'
+        },
+        children: [jsx("h1", {
+          className: "text-3xl font-bold tracking-tight text-gray-900",
+          style: {
+            fontSize: '1.875rem',
+            fontWeight: 700,
+            color: '#111827'
+          },
+          children: "Application Error"
+        }), jsx("p", {
+          className: "mt-2 text-lg text-red-600",
+          style: {
+            marginTop: '0.5rem',
+            fontSize: '1.125rem',
+            color: '#dc2626'
+          },
+          children: errorMessage
+        }), errorStack && process.env.NODE_ENV !== 'production' && jsxs("details", {
+          className: "mt-4 text-left",
+          style: {
+            marginTop: '1rem',
+            textAlign: 'left'
+          },
+          children: [jsx("summary", {
+            className: "cursor-pointer text-sm font-medium text-gray-700 hover:text-gray-900",
+            style: {
+              cursor: 'pointer',
+              fontSize: '0.875rem',
+              fontWeight: 500,
+              color: '#374151'
+            },
+            children: "Stack trace (development only)"
+          }), jsx("pre", {
+            className: "mt-2 overflow-auto rounded-md bg-gray-100 p-4 text-xs text-gray-800 max-h-96",
+            style: {
+              marginTop: '0.5rem',
+              overflow: 'auto',
+              borderRadius: '0.375rem',
+              backgroundColor: '#f3f4f6',
+              padding: '1rem',
+              fontSize: '0.75rem',
+              color: '#1f2937',
+              maxHeight: '24rem'
+            },
+            children: errorStack
+          })]
+        })]
+      }), jsx("div", {
+        className: "mt-6 text-center",
+        style: {
+          marginTop: '1.5rem',
+          textAlign: 'center'
+        },
+        children: jsx("button", {
+          onClick: handleGoHome,
+          className: "inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors",
+          style: buttonStyle,
+          children: "Go back home"
+        })
+      })]
+    })
+  });
 }export{RemixErrorBoundary};//# sourceMappingURL=RemixErrorBoundary.js.map

package/lib/components/ErrorHandlers/RemixErrorBoundary.js.map

@@ -1 +1 @@
-{"version":3,"file":"RemixErrorBoundary.js","sources":["../../../src/components/ErrorHandlers/RemixErrorBoundary.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAWG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"RemixErrorBoundary.js","sources":["../../../src/components/ErrorHandlers/RemixErrorBoundary.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAuDG,EAAA,eAAA,EAAA,SAAA;AACH,EAAA,OAAA,EAAA,WAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/ErrorHandlers/SPAErrorBoundary.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 /**
  * SPA/Tauri Root ErrorBoundary Component
  *
@@ -11,8 +10,11 @@ import * as React from 'react';
  * - Uses window.location.href for navigation instead
  * - Renders complete HTML document (required for root-level error boundaries)
  *
+ * Uses inline styles as fallback to ensure the error page renders correctly
+ * even when Tailwind CSS fails to load or during hydration error recovery.
+ *
  * Usage in root.tsx:
  * export { SPAErrorBoundary as ErrorBoundary } from '@admin-layout/tailwind-ui';
  */
-export declare function SPAErrorBoundary(): React.JSX.Element;
+export declare function SPAErrorBoundary(): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SPAErrorBoundary.d.ts.map

package/lib/components/ErrorHandlers/SPAErrorBoundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SPAErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorHandlers/SPAErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,gBAAgB,sBAoI/B"}
+{"version":3,"file":"SPAErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorHandlers/SPAErrorBoundary.tsx"],"names":[],"mappings":"AA6CA;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,gBAAgB,4CA8M/B"}