arcanajs 2.1.6 → 2.2.1

package/framework/lib/shared/components/Head.js

@@ -1,22 +1,58 @@
-import React, { useEffect } from "react";
-import { useHead } from "../hooks/useHead";
-export const Head = ({ children }) => {
-    const headManager = useHead();
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Head = void 0;
+const react_1 = __importStar(require("react"));
+const useHead_1 = require("../hooks/useHead");
+const Head = ({ children }) => {
+    const headManager = (0, useHead_1.useHead)();
     // Server-side: Push tags to context
     if (typeof window === "undefined" && headManager) {
-        React.Children.forEach(children, (child) => {
-            if (React.isValidElement(child)) {
-                headManager.push(React.cloneElement(child, {
+        react_1.default.Children.forEach(children, (child) => {
+            if (react_1.default.isValidElement(child)) {
+                headManager.push(react_1.default.cloneElement(child, {
                     "data-arcanajs-head": "true",
                 }));
             }
         });
     }
     // Client-side: Update DOM
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const managedElements = [];
-        React.Children.forEach(children, (child) => {
-            if (React.isValidElement(child)) {
+        react_1.default.Children.forEach(children, (child) => {
+            if (react_1.default.isValidElement(child)) {
                 const reactElement = child;
                 if (reactElement.type === "title") {
                     document.title = reactElement.props.children;
@@ -86,3 +122,4 @@ export const Head = ({ children }) => {
     }, [children]);
     return null;
 };
+exports.Head = Head;

package/framework/lib/shared/components/Link.js

@@ -1,10 +1,14 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRouter } from "../hooks/useRouter";
-export const Link = ({ href, children, ...props }) => {
-    const { navigateTo } = useRouter();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const useRouter_1 = require("../hooks/useRouter");
+const Link = ({ href, children, ...props }) => {
+    const { navigateTo } = (0, useRouter_1.useRouter)();
     const handleClick = (e) => {
         e.preventDefault();
         navigateTo(href);
     };
-    return (_jsx("a", { href: href, onClick: handleClick, ...props, children: children }));
+    return ((0, jsx_runtime_1.jsx)("a", { href: href, onClick: handleClick, ...props, children: children }));
 };
+exports.Link = Link;

package/framework/lib/shared/components/NavLink.js

@@ -1,9 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Link } from "./Link";
-import { useRouter } from "../hooks/useRouter";
-export const NavLink = ({ href, activeClassName = "active", className = "", exact = false, children, ...props }) => {
-    const { currentUrl } = useRouter();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavLink = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Link_1 = require("./Link");
+const useRouter_1 = require("../hooks/useRouter");
+const NavLink = ({ href, activeClassName = "active", className = "", exact = false, children, ...props }) => {
+    const { currentUrl } = (0, useRouter_1.useRouter)();
     const isActive = exact ? currentUrl === href : currentUrl.startsWith(href);
     const combinedClassName = `${className} ${isActive ? activeClassName : ""}`.trim();
-    return (_jsx(Link, { href: href, className: combinedClassName, ...props, children: children }));
+    return ((0, jsx_runtime_1.jsx)(Link_1.Link, { href: href, className: combinedClassName, ...props, children: children }));
 };
+exports.NavLink = NavLink;

package/framework/lib/shared/components/Page.js

@@ -1,6 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PageContext } from "../context/PageContext";
-import { Head } from "./Head";
-export const Page = ({ data, title, children }) => {
-    return (_jsxs(PageContext.Provider, { value: data, children: [title && (_jsx(Head, { children: _jsx("title", { children: title }) })), children] }));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Page = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PageContext_1 = require("../context/PageContext");
+const Head_1 = require("./Head");
+const Page = ({ data, title, children }) => {
+    return ((0, jsx_runtime_1.jsxs)(PageContext_1.PageContext.Provider, { value: data, children: [title && ((0, jsx_runtime_1.jsx)(Head_1.Head, { children: (0, jsx_runtime_1.jsx)("title", { children: title }) })), children] }));
 };
+exports.Page = Page;

package/framework/lib/shared/context/HeadContext.js

@@ -1,2 +1,5 @@
-import { createSingletonContext } from "../utils/createSingletonContext";
-export const HeadContext = createSingletonContext("HeadContext", null);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeadContext = void 0;
+const createSingletonContext_1 = require("../utils/createSingletonContext");
+exports.HeadContext = (0, createSingletonContext_1.createSingletonContext)("HeadContext", null);

package/framework/lib/shared/context/PageContext.js

@@ -1,2 +1,5 @@
-import { createSingletonContext } from "../utils/createSingletonContext";
-export const PageContext = createSingletonContext("PageContext", null);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageContext = void 0;
+const createSingletonContext_1 = require("../utils/createSingletonContext");
+exports.PageContext = (0, createSingletonContext_1.createSingletonContext)("PageContext", null);

package/framework/lib/shared/context/RouterContext.js

@@ -1,6 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createSingletonContext } from "../utils/createSingletonContext";
-export const RouterContext = createSingletonContext("RouterContext", null);
-export const RouterProvider = ({ value, children }) => {
-    return (_jsx(RouterContext.Provider, { value: value, children: children }));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RouterProvider = exports.RouterContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const createSingletonContext_1 = require("../utils/createSingletonContext");
+exports.RouterContext = (0, createSingletonContext_1.createSingletonContext)("RouterContext", null);
+const RouterProvider = ({ value, children }) => {
+    return ((0, jsx_runtime_1.jsx)(exports.RouterContext.Provider, { value: value, children: children }));
 };
+exports.RouterProvider = RouterProvider;

package/framework/lib/shared/core/ArcanaJSApp.js

@@ -1,14 +1,17 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { Page } from "../components/Page";
-import { RouterProvider } from "../context/RouterContext";
-export const ArcanaJSApp = ({ initialPage, initialData, initialParams = {}, initialUrl, csrfToken, views, layout: Layout, }) => {
-    const [page, setPage] = useState(initialPage);
-    const [data, setData] = useState(initialData);
-    const [params, setParams] = useState(initialParams);
-    const [url, setUrl] = useState(initialUrl ||
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArcanaJSApp = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Page_1 = require("../components/Page");
+const RouterContext_1 = require("../context/RouterContext");
+const ArcanaJSApp = ({ initialPage, initialData, initialParams = {}, initialUrl, csrfToken, views, layout: Layout, }) => {
+    const [page, setPage] = (0, react_1.useState)(initialPage);
+    const [data, setData] = (0, react_1.useState)(initialData);
+    const [params, setParams] = (0, react_1.useState)(initialParams);
+    const [url, setUrl] = (0, react_1.useState)(initialUrl ||
         (typeof window !== "undefined" ? window.location.pathname : "/"));
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const handlePopState = (event) => {
             if (event.state) {
                 setPage(event.state.page);
@@ -47,15 +50,16 @@ export const ArcanaJSApp = ({ initialPage, initialData, initialParams = {}, init
         }
     };
     const renderPage = () => {
-        const Component = views[page] || views["NotFoundPage"] || (() => _jsx("div", { children: "404 Not Found" }));
-        return (_jsx(Page, { data: data, children: _jsx(Component, { data: data, navigateTo: navigateTo, params: params }) }));
+        const Component = views[page] || views["NotFoundPage"] || (() => (0, jsx_runtime_1.jsx)("div", { children: "404 Not Found" }));
+        return ((0, jsx_runtime_1.jsx)(Page_1.Page, { data: data, children: (0, jsx_runtime_1.jsx)(Component, { data: data, navigateTo: navigateTo, params: params }) }));
     };
     const content = renderPage();
-    return (_jsx(RouterProvider, { value: {
+    return ((0, jsx_runtime_1.jsx)(RouterContext_1.RouterProvider, { value: {
             navigateTo,
             currentPage: page,
             currentUrl: url,
             params,
             csrfToken,
-        }, children: Layout ? _jsx(Layout, { children: content }) : _jsx(_Fragment, { children: content }) }));
+        }, children: Layout ? (0, jsx_runtime_1.jsx)(Layout, { children: content }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: content }) }));
 };
+exports.ArcanaJSApp = ArcanaJSApp;

package/framework/lib/shared/hooks/useHead.d.ts

@@ -1 +1 @@
-export declare const useHead: () => import("../..").HeadManager | null;
+export declare const useHead: () => import("../context/HeadContext").HeadManager | null;

package/framework/lib/shared/hooks/useHead.js

@@ -1,3 +1,7 @@
-import { useContext } from "react";
-import { HeadContext } from "../context/HeadContext";
-export const useHead = () => useContext(HeadContext);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHead = void 0;
+const react_1 = require("react");
+const HeadContext_1 = require("../context/HeadContext");
+const useHead = () => (0, react_1.useContext)(HeadContext_1.HeadContext);
+exports.useHead = useHead;

package/framework/lib/shared/hooks/useLocation.js

@@ -1,9 +1,13 @@
-import { useRouter } from "./useRouter";
-export const useLocation = () => {
-    const { currentUrl } = useRouter();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLocation = void 0;
+const useRouter_1 = require("./useRouter");
+const useLocation = () => {
+    const { currentUrl } = (0, useRouter_1.useRouter)();
     return {
         pathname: currentUrl,
         search: typeof window !== "undefined" ? window.location.search : "",
         hash: typeof window !== "undefined" ? window.location.hash : "",
     };
 };
+exports.useLocation = useLocation;

package/framework/lib/shared/hooks/usePage.js

@@ -1,3 +1,7 @@
-import { useContext } from "react";
-import { PageContext } from "../context/PageContext";
-export const usePage = () => useContext(PageContext);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePage = void 0;
+const react_1 = require("react");
+const PageContext_1 = require("../context/PageContext");
+const usePage = () => (0, react_1.useContext)(PageContext_1.PageContext);
+exports.usePage = usePage;

package/framework/lib/shared/hooks/useParams.js

@@ -1,9 +1,13 @@
-import { useContext } from "react";
-import { RouterContext } from "../context/RouterContext";
-export const useParams = () => {
-    const context = useContext(RouterContext);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useParams = void 0;
+const react_1 = require("react");
+const RouterContext_1 = require("../context/RouterContext");
+const useParams = () => {
+    const context = (0, react_1.useContext)(RouterContext_1.RouterContext);
     if (!context) {
         throw new Error("useParams must be used within an ArcanaJSApp");
     }
     return context.params;
 };
+exports.useParams = useParams;

package/framework/lib/shared/hooks/useQuery.js

@@ -1,5 +1,9 @@
-import { useLocation } from "./useLocation";
-export const useQuery = () => {
-    const { search } = useLocation();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useQuery = void 0;
+const useLocation_1 = require("./useLocation");
+const useQuery = () => {
+    const { search } = (0, useLocation_1.useLocation)();
     return new URLSearchParams(search);
 };
+exports.useQuery = useQuery;

package/framework/lib/shared/hooks/useRouter.d.ts

@@ -1 +1 @@
-export declare const useRouter: () => import("../..").RouterContextType;
+export declare const useRouter: () => import("../context/RouterContext").RouterContextType;

package/framework/lib/shared/hooks/useRouter.js

@@ -1,9 +1,13 @@
-import { useContext } from "react";
-import { RouterContext } from "../context/RouterContext";
-export const useRouter = () => {
-    const context = useContext(RouterContext);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRouter = void 0;
+const react_1 = require("react");
+const RouterContext_1 = require("../context/RouterContext");
+const useRouter = () => {
+    const context = (0, react_1.useContext)(RouterContext_1.RouterContext);
     if (!context) {
         throw new Error("useRouter must be used within an ArcanaJSApp");
     }
     return context;
 };
+exports.useRouter = useRouter;

package/framework/lib/shared/utils/createSingletonContext.js

@@ -1,4 +1,7 @@
-import { createContext } from "react";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSingletonContext = createSingletonContext;
+const react_1 = require("react");
 /**
  * Creates a React Context that persists across multiple module loads (Webpack bundles vs Node require).
  * This is essential for SSR applications where the server bundle and dynamically loaded views
@@ -8,11 +11,11 @@ import { createContext } from "react";
  * @param defaultValue The default value for the context
  * @returns A React Context instance (singleton)
  */
-export function createSingletonContext(key, defaultValue) {
+function createSingletonContext(key, defaultValue) {
     const globalAny = global;
     const symbolKey = Symbol.for(`ARCANAJS_CONTEXT_${key}`);
     if (!globalAny[symbolKey]) {
-        globalAny[symbolKey] = createContext(defaultValue);
+        globalAny[symbolKey] = (0, react_1.createContext)(defaultValue);
     }
     return globalAny[symbolKey];
 }

package/framework/lib/shared/views/ErrorPage.d.ts

@@ -0,0 +1,7 @@
+interface ErrorPageProps {
+    message?: string;
+    statusCode?: number;
+    stack?: string;
+}
+export default function ErrorPage({ message, statusCode, stack, }: ErrorPageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/framework/lib/shared/views/ErrorPage.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ErrorPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Page_1 = require("../components/Page");
+const Head_1 = require("../components/Head");
+const Body_1 = require("../components/Body");
+function ErrorPage({ message = "Something went wrong", statusCode = 500, stack, }) {
+    const isDevelopment = process.env.NODE_ENV === "development";
+    return ((0, jsx_runtime_1.jsxs)(Page_1.Page, { children: [(0, jsx_runtime_1.jsxs)(Head_1.Head, { children: [(0, jsx_runtime_1.jsxs)("title", { children: [statusCode, " - Server Error"] }), (0, jsx_runtime_1.jsx)("meta", { name: "description", content: "An error occurred on the server" })] }), (0, jsx_runtime_1.jsx)(Body_1.Body, { children: (0, jsx_runtime_1.jsxs)("div", { className: "relative min-h-screen overflow-hidden bg-black text-white flex flex-col justify-center items-center px-4 font-sans", children: [(0, jsx_runtime_1.jsxs)("div", { className: "fixed inset-0 z-0 overflow-hidden pointer-events-none", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 grid-pattern opacity-30" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute top-1/4 right-1/4 w-96 h-96 bg-red-600 rounded-full opacity-20 blur-3xl animate-glow" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-1/4 left-1/4 w-96 h-96 bg-orange-600 rounded-full opacity-10 blur-3xl animate-glow", style: { animationDelay: "2s" } }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 hero-gradient" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative z-10 max-w-2xl w-full text-center animate-scale-in", children: [(0, jsx_runtime_1.jsxs)("div", { className: "glass-card rounded-3xl p-12 border border-white/10 shadow-2xl", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-8", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-6xl mb-6 animate-float", children: (0, jsx_runtime_1.jsx)("span", { className: "text-red-500 drop-shadow-lg filter", children: "\u26A0\uFE0F" }) }), (0, jsx_runtime_1.jsx)("h1", { className: "text-8xl font-bold text-transparent bg-clip-text bg-gradient-to-br from-red-500 to-orange-500 mb-4", children: statusCode }), (0, jsx_runtime_1.jsx)("h2", { className: "text-3xl font-bold text-white mb-4", children: "Server Error" }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-400 text-lg leading-relaxed", children: message })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col sm:flex-row gap-4 justify-center mb-8", children: [(0, jsx_runtime_1.jsxs)("a", { href: "/", className: "btn-primary px-8 py-3.5 text-white font-semibold rounded-xl inline-flex items-center justify-center gap-2 w-full sm:w-auto bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-500 hover:to-orange-500 border-none shadow-red-900/20", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" }) }), "Go Home"] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => window.location.reload(), className: "btn-secondary px-8 py-3.5 text-white font-semibold rounded-xl inline-flex items-center justify-center gap-2 w-full sm:w-auto", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }), "Try Again"] })] }), isDevelopment && stack && ((0, jsx_runtime_1.jsx)("div", { className: "mt-8 text-left animate-slide-up", children: (0, jsx_runtime_1.jsxs)("details", { className: "bg-black/40 border border-white/10 rounded-xl overflow-hidden group", children: [(0, jsx_runtime_1.jsxs)("summary", { className: "cursor-pointer font-medium text-gray-300 p-4 hover:bg-white/5 transition-colors flex items-center justify-between select-none", children: [(0, jsx_runtime_1.jsx)("span", { children: "Stack Trace (Development Only)" }), (0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5 text-gray-500 group-open:rotate-180 transition-transform", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }), (0, jsx_runtime_1.jsx)("pre", { className: "text-xs text-red-300/80 p-4 overflow-x-auto whitespace-pre-wrap font-mono border-t border-white/5 bg-black/20", children: stack })] }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-8 text-gray-500 text-sm", children: ["If this problem persists, please", " ", (0, jsx_runtime_1.jsx)("a", { href: "/contact", className: "text-red-400 hover:text-red-300 underline transition-colors", children: "contact support" }), "."] })] })] }) })] }));
+}

package/framework/lib/shared/views/NotFoundPage.d.ts

@@ -0,0 +1,5 @@
+interface NotFoundPageProps {
+    url?: string;
+}
+export default function NotFoundPage({ url }: NotFoundPageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/framework/lib/shared/views/NotFoundPage.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = NotFoundPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Page_1 = require("../components/Page");
+const Head_1 = require("../components/Head");
+const Body_1 = require("../components/Body");
+function NotFoundPage({ url }) {
+    return ((0, jsx_runtime_1.jsxs)(Page_1.Page, { children: [(0, jsx_runtime_1.jsxs)(Head_1.Head, { children: [(0, jsx_runtime_1.jsx)("title", { children: "404 - Page Not Found" }), (0, jsx_runtime_1.jsx)("meta", { name: "description", content: "The page you're looking for doesn't exist" })] }), (0, jsx_runtime_1.jsx)(Body_1.Body, { children: (0, jsx_runtime_1.jsxs)("div", { className: "relative min-h-screen overflow-hidden bg-black text-white flex flex-col justify-center items-center px-4 font-sans", children: [(0, jsx_runtime_1.jsxs)("div", { className: "fixed inset-0 z-0 overflow-hidden pointer-events-none", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 grid-pattern opacity-30" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute top-1/4 left-1/4 w-96 h-96 bg-orange-500 rounded-full opacity-20 blur-3xl animate-glow" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-1/4 right-1/4 w-96 h-96 bg-purple-500 rounded-full opacity-10 blur-3xl animate-glow", style: { animationDelay: "2s" } }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 hero-gradient" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative z-10 max-w-lg w-full text-center animate-scale-in", children: [(0, jsx_runtime_1.jsxs)("div", { className: "glass-card rounded-3xl p-12 border border-white/10 shadow-2xl", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-8", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-9xl font-bold text-transparent bg-clip-text bg-gradient-to-br from-white to-gray-500 mb-4 animate-float", children: "404" }), (0, jsx_runtime_1.jsx)("h2", { className: "text-3xl font-bold text-white mb-4", children: "Page Not Found" }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-400 text-lg leading-relaxed", children: url ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["The page ", (0, jsx_runtime_1.jsxs)("span", { className: "text-orange-400", children: ["\"", url, "\""] }), " ", "you're looking for doesn't exist."] })) : ("The page you're looking for doesn't exist.") })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col sm:flex-row gap-4 justify-center", children: [(0, jsx_runtime_1.jsxs)("a", { href: "/", className: "btn-primary px-8 py-3.5 text-white font-semibold rounded-xl inline-flex items-center justify-center gap-2 w-full sm:w-auto", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" }) }), "Go Home"] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => window.history.back(), className: "btn-secondary px-8 py-3.5 text-white font-semibold rounded-xl inline-flex items-center justify-center gap-2 w-full sm:w-auto", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 19l-7-7m0 0l7-7m-7 7h18" }) }), "Go Back"] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-8 text-gray-500 text-sm", children: ["If you believe this is an error, please", " ", (0, jsx_runtime_1.jsx)("a", { href: "/contact", className: "text-orange-400 hover:text-orange-300 underline transition-colors", children: "contact support" }), "."] })] })] }) })] }));
+}

package/framework/templates/ErrorPage.tsx

@@ -0,0 +1,137 @@
+import React from "react";
+import { Page, Head, Body } from "arcanajs";
+
+interface ErrorPageProps {
+  message?: string;
+  statusCode?: number;
+  stack?: string;
+}
+
+export default function ErrorPage({
+  message = "Something went wrong",
+  statusCode = 500,
+  stack,
+}: ErrorPageProps) {
+  const isDevelopment = process.env.NODE_ENV === "development";
+
+  return (
+    <Page>
+      <Head>
+        <title>{statusCode} - Server Error</title>
+        <meta name="description" content="An error occurred on the server" />
+      </Head>
+      <Body>
+        <div className="relative min-h-screen overflow-hidden bg-black text-white flex flex-col justify-center items-center px-4 font-sans">
+          {/* Animated Background */}
+          <div className="fixed inset-0 z-0 overflow-hidden pointer-events-none">
+            <div className="absolute inset-0 grid-pattern opacity-30"></div>
+            <div className="absolute top-1/4 right-1/4 w-96 h-96 bg-red-600 rounded-full opacity-20 blur-3xl animate-glow"></div>
+            <div
+              className="absolute bottom-1/4 left-1/4 w-96 h-96 bg-orange-600 rounded-full opacity-10 blur-3xl animate-glow"
+              style={{ animationDelay: "2s" }}
+            ></div>
+            <div className="absolute inset-0 hero-gradient"></div>
+          </div>
+
+          <div className="relative z-10 max-w-2xl w-full text-center animate-scale-in">
+            <div className="glass-card rounded-3xl p-12 border border-white/10 shadow-2xl">
+              <div className="mb-8">
+                <div className="text-6xl mb-6 animate-float">
+                  <span className="text-red-500 drop-shadow-lg filter">⚠️</span>
+                </div>
+                <h1 className="text-8xl font-bold text-transparent bg-clip-text bg-gradient-to-br from-red-500 to-orange-500 mb-4">
+                  {statusCode}
+                </h1>
+                <h2 className="text-3xl font-bold text-white mb-4">
+                  Server Error
+                </h2>
+                <p className="text-gray-400 text-lg leading-relaxed">
+                  {message}
+                </p>
+              </div>
+
+              <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
+                <a
+                  href="/"
+                  className="btn-primary px-8 py-3.5 text-white font-semibold rounded-xl inline-flex items-center justify-center gap-2 w-full sm:w-auto bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-500 hover:to-orange-500 border-none shadow-red-900/20"
+                >
+                  <svg
+                    className="w-5 h-5"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+                    />
+                  </svg>
+                  Go Home
+                </a>
+
+                <button
+                  onClick={() => window.location.reload()}
+                  className="btn-secondary px-8 py-3.5 text-white font-semibold rounded-xl inline-flex items-center justify-center gap-2 w-full sm:w-auto"
+                >
+                  <svg
+                    className="w-5 h-5"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                    />
+                  </svg>
+                  Try Again
+                </button>
+              </div>
+
+              {isDevelopment && stack && (
+                <div className="mt-8 text-left animate-slide-up">
+                  <details className="bg-black/40 border border-white/10 rounded-xl overflow-hidden group">
+                    <summary className="cursor-pointer font-medium text-gray-300 p-4 hover:bg-white/5 transition-colors flex items-center justify-between select-none">
+                      <span>Stack Trace (Development Only)</span>
+                      <svg
+                        className="w-5 h-5 text-gray-500 group-open:rotate-180 transition-transform"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M19 9l-7 7-7-7"
+                        />
+                      </svg>
+                    </summary>
+                    <pre className="text-xs text-red-300/80 p-4 overflow-x-auto whitespace-pre-wrap font-mono border-t border-white/5 bg-black/20">
+                      {stack}
+                    </pre>
+                  </details>
+                </div>
+              )}
+            </div>
+
+            <div className="mt-8 text-gray-500 text-sm">
+              If this problem persists, please{" "}
+              <a
+                href="/contact"
+                className="text-red-400 hover:text-red-300 underline transition-colors"
+              >
+                contact support
+              </a>
+              .
+            </div>
+          </div>
+        </div>
+      </Body>
+    </Page>
+  );
+}