arcanajs 2.3.5 → 2.4.0

package/framework/cli/templates.js

@@ -6,7 +6,7 @@ exports.configFiles = [
     { src: "tsconfig.json", dest: "tsconfig.json" },
     { src: "arcanajs.config.ts", dest: "arcanajs.config.ts" },
     { src: "postcss.config.js", dest: "postcss.config.js" },
-    { src: "arcanajs.d.ts", dest: "arcanajs.d.ts" },
+    { src: "arcanajs.d.ts", dest: "src/arcanajs.d.ts" },
     { src: "globals.css", dest: "src/client/globals.css" },
     { src: "client-index.tsx", dest: "src/client/index.tsx" },
     { src: "server-index.ts", dest: "src/server/index.ts" },

package/framework/lib/client/index.d.ts

@@ -1,5 +1,15 @@
 import React from "react";
 export type { LayoutComponent, ViewsRegistry } from "../types";
+/**
+ * Navigation options for configuring ArcanaJS behavior
+ */
+export interface NavigationOptions {
+    /**
+     * Callback function called after each successful navigation
+     * Useful for analytics, logging, or custom scroll behavior
+     */
+    onNavigate?: (url: string) => void;
+}
 /**
  * Hydrate the ArcanaJS application on the client side
  *
@@ -8,6 +18,7 @@ export type { LayoutComponent, ViewsRegistry } from "../types";
  *
  * @param viewsOrContext - Either a views registry object or a webpack require.context
  * @param layout - Optional layout component to wrap all pages
+ * @param options - Optional navigation configuration options
  *
  * @example
  * ```typescript
@@ -30,5 +41,19 @@ export type { LayoutComponent, ViewsRegistry } from "../types";
  *   AboutPage,
  * });
  * ```
+ *
+ * @example
+ * ```typescript
+ * // With navigation options
+ * import { hydrateArcanaJS } from 'arcanajs/client';
+ *
+ * const views = require.context('./views', false, /\.tsx$/);
+ * hydrateArcanaJS(views, undefined, {
+ *   onNavigate: (url) => {
+ *     // Track page views
+ *     gtag('event', 'page_view', { page_path: url });
+ *   }
+ * });
+ * ```
  */
-export declare const hydrateArcanaJS: (viewsOrContext: Record<string, React.FC<any>> | any, layout?: React.FC<any>) => void;
+export declare const hydrateArcanaJS: (viewsOrContext: Record<string, React.FC<any>> | any, layout?: React.FC<any>, options?: NavigationOptions) => void;

package/framework/lib/client/index.js

@@ -21,6 +21,7 @@ const NotFoundPage_1 = __importDefault(require("../shared/views/NotFoundPage"));
  *
  * @param viewsOrContext - Either a views registry object or a webpack require.context
  * @param layout - Optional layout component to wrap all pages
+ * @param options - Optional navigation configuration options
  *
  * @example
  * ```typescript
@@ -43,8 +44,22 @@ const NotFoundPage_1 = __importDefault(require("../shared/views/NotFoundPage"));
  *   AboutPage,
  * });
  * ```
+ *
+ * @example
+ * ```typescript
+ * // With navigation options
+ * import { hydrateArcanaJS } from 'arcanajs/client';
+ *
+ * const views = require.context('./views', false, /\.tsx$/);
+ * hydrateArcanaJS(views, undefined, {
+ *   onNavigate: (url) => {
+ *     // Track page views
+ *     gtag('event', 'page_view', { page_path: url });
+ *   }
+ * });
+ * ```
  */
-const hydrateArcanaJS = (viewsOrContext, layout) => {
+const hydrateArcanaJS = (viewsOrContext, layout, options) => {
     let views = {};
     if (viewsOrContext.keys && typeof viewsOrContext.keys === "function") {
         viewsOrContext.keys().forEach((key) => {
@@ -72,7 +87,7 @@ const hydrateArcanaJS = (viewsOrContext, layout) => {
     if (container && dataScript) {
         try {
             const { page, data, params, csrfToken } = JSON.parse(dataScript.textContent || "{}");
-            (0, client_1.hydrateRoot)(container, (0, jsx_runtime_1.jsx)(HeadContext_1.HeadContext.Provider, { value: headManager, children: (0, jsx_runtime_1.jsx)(ArcanaJSApp_1.ArcanaJSApp, { initialPage: page, initialData: data, initialParams: params, csrfToken: csrfToken, views: views, layout: layout }) }));
+            (0, client_1.hydrateRoot)(container, (0, jsx_runtime_1.jsx)(HeadContext_1.HeadContext.Provider, { value: headManager, children: (0, jsx_runtime_1.jsx)(ArcanaJSApp_1.ArcanaJSApp, { initialPage: page, initialData: data, initialParams: params, csrfToken: csrfToken, views: views, layout: layout, onNavigate: options?.onNavigate || (() => { }) }) }));
         }
         catch (e) {
             console.error("Failed to parse initial data", e);

package/framework/lib/global.d.ts

@@ -1,9 +1,3 @@
-// ============================================================================
-// Webpack Global Variables
-// ============================================================================
-
-declare var __non_webpack_require__: NodeJS.Require;
-
 // ============================================================================
 // CSS Module Declarations
 // ============================================================================
@@ -22,6 +16,7 @@ declare module "*.module.css" {
 // ============================================================================
 
 declare global {
+  var __non_webpack_require__: NodeJS.Require;
   namespace Express {
     interface Response {
       /**

package/framework/lib/server/ArcanaJSServer.js

@@ -131,9 +131,9 @@ class ArcanaJSServer {
                     try {
                         // Use __non_webpack_require__ if available to avoid Webpack bundling issues
                         // or standard require if running in Node directly
-                        const requireFunc = typeof globalThis.__non_webpack_require__ !== "undefined"
-                            ? globalThis.__non_webpack_require__
-                            : require;
+                        const requireFunc = typeof __non_webpack_require__ !== "undefined"
+                            ? __non_webpack_require__
+                            : eval("require");
                         // Register ts-node if needed
                         if (file.endsWith(".tsx") || file.endsWith(".ts")) {
                             try {

package/framework/lib/shared/components/Link.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     href: string;
+    prefetch?: boolean;
 }
 export declare const Link: React.FC<LinkProps>;
 export {};

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

@@ -3,12 +3,25 @@ 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 Link = ({ href, children, prefetch = false, ...props }) => {
     const { navigateTo } = (0, useRouter_1.useRouter)();
+    const isExternal = /^https?:\/\//.test(href);
     const handleClick = (e) => {
         e.preventDefault();
-        navigateTo(href);
+        if (!isExternal) {
+            navigateTo(href);
+        }
+        else {
+            // Open external links in a new tab
+            window.open(href, "_blank", "noopener,noreferrer");
+        }
     };
-    return ((0, jsx_runtime_1.jsx)("a", { href: href, onClick: handleClick, ...props, children: children }));
+    const handleMouseEnter = () => {
+        if (prefetch && !isExternal) {
+            // Prefetch using HEAD request to warm cache
+            fetch(href, { method: "HEAD" }).catch(() => { });
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("a", { href: href, onClick: handleClick, onMouseEnter: handleMouseEnter, target: isExternal ? "_blank" : undefined, rel: isExternal ? "noopener noreferrer" : undefined, ...props, children: children }));
 };
 exports.Link = Link;

package/framework/lib/shared/components/NavLink.d.ts

@@ -3,6 +3,7 @@ interface NavLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     href: string;
     activeClassName?: string;
     exact?: boolean;
+    prefetch?: boolean;
 }
 export declare const NavLink: React.FC<NavLinkProps>;
 export {};

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

@@ -2,12 +2,12 @@
 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 Link_1 = require("./Link");
+const NavLink = ({ href, activeClassName = "active", className = "", exact = false, prefetch = false, children, ...props }) => {
     const { currentUrl } = (0, useRouter_1.useRouter)();
     const isActive = exact ? currentUrl === href : currentUrl.startsWith(href);
     const combinedClassName = `${className} ${isActive ? activeClassName : ""}`.trim();
-    return ((0, jsx_runtime_1.jsx)(Link_1.Link, { href: href, className: combinedClassName, ...props, children: children }));
+    return ((0, jsx_runtime_1.jsx)(Link_1.Link, { href: href, className: combinedClassName, prefetch: prefetch, ...props, children: children }));
 };
 exports.NavLink = NavLink;

package/framework/lib/shared/context/RouterContext.d.ts

@@ -5,6 +5,8 @@ export interface RouterContextType {
     currentUrl: string;
     params: Record<string, string>;
     csrfToken?: string;
+    onNavigate?: (url: string) => void;
+    isNavigating: boolean;
 }
 export declare const RouterContext: React.Context<RouterContextType | null>;
 export declare const RouterProvider: React.FC<{

package/framework/lib/shared/core/ArcanaJSApp.d.ts

@@ -9,5 +9,6 @@ export interface ArcanaJSAppProps {
     layout?: React.FC<{
         children: React.ReactNode;
     }>;
+    onNavigate?: (url: string) => void;
 }
 export declare const ArcanaJSApp: React.FC<ArcanaJSAppProps>;

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

@@ -1,17 +1,56 @@
 "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.ArcanaJSApp = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(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 ArcanaJSApp = ({ initialPage, initialData, initialParams = {}, initialUrl, csrfToken, views, layout: Layout, onNavigate, }) => {
     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 : "/"));
+    const [isNavigating, setIsNavigating] = (0, react_1.useState)(false);
+    // Navigation cache to store previously visited pages
+    const navigationCache = react_1.default.useRef(new Map());
     (0, react_1.useEffect)(() => {
+        if (typeof window !== "undefined" && !window.history.state) {
+            window.history.replaceState({ page: initialPage, data: initialData, params: initialParams }, "", window.location.href);
+        }
         const handlePopState = (event) => {
             if (event.state) {
                 setPage(event.state.page);
@@ -19,11 +58,32 @@ const ArcanaJSApp = ({ initialPage, initialData, initialParams = {}, initialUrl,
                 setParams(event.state.params || {});
                 setUrl(window.location.pathname);
             }
+            else {
+                window.location.reload();
+            }
         };
         window.addEventListener("popstate", handlePopState);
         return () => window.removeEventListener("popstate", handlePopState);
     }, []);
     const navigateTo = async (newUrl) => {
+        // Check cache first for instant navigation
+        if (navigationCache.current.has(newUrl)) {
+            const cached = navigationCache.current.get(newUrl);
+            setPage(cached.page);
+            setData(cached.data);
+            setParams(cached.params || {});
+            setUrl(newUrl);
+            window.history.pushState(cached, "", newUrl);
+            // Scroll to top
+            if (typeof window !== "undefined") {
+                window.scrollTo({ top: 0, behavior: "smooth" });
+            }
+            if (onNavigate) {
+                onNavigate(newUrl);
+            }
+            return;
+        }
+        setIsNavigating(true);
         try {
             const response = await fetch(newUrl, {
                 headers: { "x-arcanajs-request": "true" },
@@ -38,15 +98,30 @@ const ArcanaJSApp = ({ initialPage, initialData, initialParams = {}, initialUrl,
                 throw new Error(`Navigation failed: ${response.status} ${response.statusText}`);
             }
             const json = await response.json();
+            // Cache the navigation result
+            navigationCache.current.set(newUrl, {
+                page: json.page,
+                data: json.data,
+                params: json.params,
+            });
             window.history.pushState({ page: json.page, data: json.data, params: json.params }, "", newUrl);
             setPage(json.page);
             setData(json.data);
             setParams(json.params || {});
             setUrl(newUrl);
+            // Scroll to top after navigation
+            if (typeof window !== "undefined") {
+                window.scrollTo({ top: 0, behavior: "smooth" });
+            }
+            if (onNavigate) {
+                onNavigate(newUrl);
+            }
         }
         catch (error) {
             console.error("Navigation failed", error);
-            // Optionally set an error state here to show a UI toast or error page
+        }
+        finally {
+            setIsNavigating(false);
         }
     };
     const renderPage = () => {
@@ -60,6 +135,8 @@ const ArcanaJSApp = ({ initialPage, initialData, initialParams = {}, initialUrl,
             currentUrl: url,
             params,
             csrfToken,
+            onNavigate,
+            isNavigating,
         }, 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/views/ErrorPage.js

@@ -2,10 +2,11 @@
 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");
+const Head_1 = require("../components/Head");
+const Link_1 = require("../components/Link");
+const Page_1 = require("../components/Page");
 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" }), "."] })] })] }) })] }));
+    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)(Link_1.Link, { 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)(Link_1.Link, { href: "/contact", className: "text-red-400 hover:text-red-300 underline transition-colors", children: "contact support" }), "."] })] })] }) })] }));
 }

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

@@ -2,9 +2,10 @@
 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");
+const Head_1 = require("../components/Head");
+const Link_1 = require("../components/Link");
+const Page_1 = require("../components/Page");
 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" }), "."] })] })] }) })] }));
+    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)(Link_1.Link, { 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)(Link_1.Link, { href: "/contact", className: "text-orange-400 hover:text-orange-300 underline transition-colors", children: "contact support" }), "."] })] })] }) })] }));
 }

package/framework/templates/ErrorPage.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import { Page, Head, Body } from "arcanajs";
+import { Body, Head, Link, Page } from "arcanajs";
 
 interface ErrorPageProps {
   message?: string;
@@ -51,7 +50,7 @@ export default function ErrorPage({
               </div>
 
               <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
-                <a
+                <Link
                   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"
                 >
@@ -69,7 +68,7 @@ export default function ErrorPage({
                     />
                   </svg>
                   Go Home
-                </a>
+                </Link>
 
                 <button
                   onClick={() => window.location.reload()}
@@ -121,12 +120,12 @@ export default function ErrorPage({
 
             <div className="mt-8 text-gray-500 text-sm">
               If this problem persists, please{" "}
-              <a
+              <Link
                 href="/contact"
                 className="text-red-400 hover:text-red-300 underline transition-colors"
               >
                 contact support
-              </a>
+              </Link>
               .
             </div>
           </div>

package/framework/templates/NotFoundPage.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import { Page, Head, Body } from "arcanajs";
+import { Body, Head, Link, Page } from "arcanajs";
 
 interface NotFoundPageProps {
   url?: string;
@@ -50,7 +49,7 @@ export default function NotFoundPage({ url }: NotFoundPageProps) {
               </div>
 
               <div className="flex flex-col sm:flex-row gap-4 justify-center">
-                <a
+                <Link
                   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"
                 >
@@ -68,7 +67,7 @@ export default function NotFoundPage({ url }: NotFoundPageProps) {
                     />
                   </svg>
                   Go Home
-                </a>
+                </Link>
 
                 <button
                   onClick={() => window.history.back()}
@@ -93,12 +92,12 @@ export default function NotFoundPage({ url }: NotFoundPageProps) {
             </div>
             <div className="mt-8 text-gray-500 text-sm">
               If you believe this is an error, please{" "}
-              <a
+              <Link
                 href="/contact"
                 className="text-orange-400 hover:text-orange-300 underline transition-colors"
               >
                 contact support
-              </a>
+              </Link>
               .
             </div>
           </div>

package/framework/templates/arcanajs.d.ts

@@ -1,5 +1,3 @@
-declare var __non_webpack_require__: NodeJS.Require;
-
 // Global CSS files
 declare module "*.css";
 
@@ -7,4 +5,4 @@ declare module "*.css";
 declare module "*.module.css" {
   const classes: { readonly [key: string]: string };
   export default classes;
-}
+}

package/framework/templates/package.json

@@ -8,7 +8,7 @@
     "start": "arcanajs start"
   },
   "dependencies": {
-    "arcanajs": "^2.3.5",
+    "arcanajs": "^2.4.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   }

package/package.json

@@ -5,7 +5,7 @@
     "email": "mohammed.bencheikh.dev@gmail.com",
     "url": "https://mohammedbencheikh.com/"
   },
-  "version": "2.3.5",
+  "version": "2.4.0",
   "description": "ArcanaJS Framework",
   "main": "framework/lib/index.js",
   "types": "framework/lib/index.d.ts",