@jxrstudios/jxr 1.0.9 → 1.0.11

package/bin/jxr.js

@@ -55,6 +55,12 @@ if (command === "init") {
       );
     }
     
+    // Copy tsconfig.json
+    await cp(
+      path.join(templateDir, "tsconfig.json"),
+      path.join(projectDir, "tsconfig.json")
+    );
+    
     console.log(`✅ Project created: ${projectDir}`);
     console.log("");
     console.log("Next steps:");

package/dist/index.d.ts

@@ -26,4 +26,47 @@ export { JXRServerManager } from './jxr-server-manager.ts';
 export type { JXRServerConfig } from './jxr-server-manager.ts';
 export { JXRDeployer, jxrDeployer } from './deployer.ts';
 export type { DeployConfig, DeployResult, DeploymentStatus } from './deployer.ts';
+export interface JXRConfig {
+    name: string;
+    platform: 'web' | 'native' | 'expo' | 'cloudflare-worker' | 'deno' | 'node';
+    workers?: {
+        size?: number;
+        enablePriority?: boolean;
+        maxQueueSize?: number;
+        taskTimeout?: number;
+    };
+    moq?: {
+        enabled?: boolean;
+        relayUrl?: string;
+        trackPriority?: 'high' | 'normal' | 'low';
+        maxSubscriptions?: number;
+        reconnectDelay?: number;
+    };
+    crypto?: {
+        enabled?: boolean;
+        algorithm?: 'AES-GCM' | 'AES-CBC';
+        keySize?: number;
+        signing?: boolean;
+        keyDerivation?: 'HKDF';
+    };
+    build?: {
+        entry?: string;
+        outDir?: string;
+        minify?: boolean;
+        sourcemap?: boolean;
+        splitting?: 'auto' | 'manual' | false;
+        target?: string[];
+        external?: string[];
+    };
+    devServer?: {
+        port?: number;
+        host?: string;
+        hmr?: boolean;
+        open?: boolean;
+        https?: boolean;
+    };
+    imports?: Record<string, string>;
+    plugins?: any[];
+}
+export declare function defineConfig(config: JXRConfig): JXRConfig;
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,YAAY,EACV,aAAa,EACb,WAAW,EACX,YAAY,EACZ,YAAY,GACb,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,SAAS,EACT,iBAAiB,GAClB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACvD,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAElE,OAAO,EACL,SAAS,EACT,cAAc,EACd,gBAAgB,EAChB,WAAW,EACX,qBAAqB,GACtB,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EACV,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,SAAS,GACV,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACtD,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAGvF,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE,YAAY,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAGnF,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG/D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACzD,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1815,7 +1815,55 @@ var JXRServerManager = class {
             return;
           }
           if (vfsPath.endsWith(".css")) {
-            const escapedCSS = file.content.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$/g, "\\$");
+            let cssContent = file.content;
+            if (vfsPath === "/src/index.css") {
+              try {
+                const fs = await import("fs");
+                const compiledPath = path.join(process.cwd(), "src", "index.compiled.css");
+                if (fs.existsSync(compiledPath)) {
+                  cssContent = fs.readFileSync(compiledPath, "utf-8");
+                  console.log(`[JXR] Using pre-compiled Tailwind CSS from index.compiled.css`);
+                } else {
+                  const { execSync } = await import("child_process");
+                  const os = await import("os");
+                  const tmpDir = os.tmpdir();
+                  const inputFile = path.join(tmpDir, `jxr-tailwind-${Date.now()}.css`);
+                  const outputFile = path.join(tmpDir, `jxr-tailwind-${Date.now()}.compiled.css`);
+                  fs.writeFileSync(inputFile, cssContent);
+                  try {
+                    execSync(`npx @tailwindcss/cli -i "${inputFile}" -o "${outputFile}" --minify`, {
+                      timeout: 3e4,
+                      stdio: "pipe"
+                    });
+                    cssContent = fs.readFileSync(outputFile, "utf-8");
+                    fs.unlinkSync(inputFile);
+                    fs.unlinkSync(outputFile);
+                    console.log(`[JXR] Compiled Tailwind CSS for ${vfsPath}`);
+                  } catch {
+                    const js2 = `
+const tailwindScript = document.createElement('script');
+tailwindScript.src = 'https://cdn.tailwindcss.com';
+tailwindScript.onload = function() {
+  const style = document.createElement('style');
+  style.textContent = \`${file.content.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$/g, "\\$")}\`;
+  document.head.appendChild(style);
+};
+document.head.appendChild(tailwindScript);
+export default \`${file.content.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$/g, "\\$")}\`;
+`;
+                    res.writeHead(200, {
+                      "Content-Type": "application/javascript",
+                      "Cache-Control": "no-cache"
+                    });
+                    res.end(js2);
+                    return;
+                  }
+                }
+              } catch (error) {
+                console.warn(`[JXR] Tailwind handling error: ${error?.message || error}`);
+              }
+            }
+            const escapedCSS = cssContent.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$/g, "\\$");
             const js = `
 const style = document.createElement('style');
 style.textContent = \`${escapedCSS}\`;
@@ -1936,7 +1984,8 @@ export default \`${escapedCSS}\`;
         "clsx": "https://esm.sh/clsx@2.1.1",
         "tailwind-merge": "https://esm.sh/tailwind-merge@3.0.2",
         "class-variance-authority": "https://esm.sh/class-variance-authority@0.7.1",
-        "framer-motion": "https://esm.sh/framer-motion@12.5.0?external=react"
+        "framer-motion": "https://esm.sh/framer-motion@12.5.0?external=react,motion-dom",
+        "motion-dom": "https://esm.sh/motion-dom@12.5.0"
       }
     };
     const hasMainFile = this.projectFiles.some(
@@ -2135,6 +2184,11 @@ var jxrDeployer = new JXRDeployer(
   process.env.JXR_API_KEY || "",
   process.env.JXR_PROJECT_ID
 );
+
+// src/index.ts
+function defineConfig(config) {
+  return config;
+}
 export {
   DEFAULT_PROJECT_FILES,
   EnhancedTranspiler,
@@ -2148,6 +2202,7 @@ export {
   ModuleCache,
   VirtualFS,
   WorkerPool,
+  defineConfig,
   findOrCreateEntryPoint,
   jxrCrypto,
   jxrDeployer,

package/dist/jxr-server-manager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"jxr-server-manager.d.ts","sourceRoot":"","sources":["../src/jxr-server-manager.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,OAAO,CAAa;IAC5B,OAAO,CAAC,UAAU,CAAqB;IACvC,OAAO,CAAC,MAAM,CAA4B;IAC1C,OAAO,CAAC,MAAM,CAA4B;IAC1C,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,UAAU,CAAyB;IAC3C,OAAO,CAAC,QAAQ,CAAoD;IACpE,OAAO,CAAC,aAAa,CAA+B;IACpD,OAAO,CAAC,cAAc,CAAuC;IAC7D,OAAO,CAAC,OAAO,CAAuC;gBAE1C,MAAM,GAAE,eAAoB;IAYlC,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;YASnB,gBAAgB;IAoC9B,OAAO,CAAC,eAAe;IAevB,OAAO,CAAC,iBAAiB;IAsBzB,OAAO,CAAC,gBAAgB;IAqBxB,OAAO,CAAC,cAAc;YAUR,qBAAqB;IA2BnC,OAAO,CAAC,eAAe;IAOjB,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;IA2HtB,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IA+B3B,OAAO,CAAC,YAAY;CA8GrB"}
+{"version":3,"file":"jxr-server-manager.d.ts","sourceRoot":"","sources":["../src/jxr-server-manager.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,OAAO,CAAa;IAC5B,OAAO,CAAC,UAAU,CAAqB;IACvC,OAAO,CAAC,MAAM,CAA4B;IAC1C,OAAO,CAAC,MAAM,CAA4B;IAC1C,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,UAAU,CAAyB;IAC3C,OAAO,CAAC,QAAQ,CAAoD;IACpE,OAAO,CAAC,aAAa,CAA+B;IACpD,OAAO,CAAC,cAAc,CAAuC;IAC7D,OAAO,CAAC,OAAO,CAAuC;gBAE1C,MAAM,GAAE,eAAoB;IAYlC,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;YASnB,gBAAgB;IAoC9B,OAAO,CAAC,eAAe;IAevB,OAAO,CAAC,iBAAiB;IAsBzB,OAAO,CAAC,gBAAgB;IAqBxB,OAAO,CAAC,cAAc;YAUR,qBAAqB;IA2BnC,OAAO,CAAC,eAAe;IAOjB,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;IAmLtB,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IA+B3B,OAAO,CAAC,YAAY;CA+GrB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxrstudios/jxr",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "JXR.js — Edge OS Runtime Framework for elite developers",
   "type": "module",
   "license": "MIT",

package/src/jxr-server-manager.ts

@@ -249,7 +249,63 @@ export class JXRServerManager {
           
           // Serve CSS files as JavaScript that injects the CSS
           if (vfsPath.endsWith('.css')) {
-            const escapedCSS = file.content
+            let cssContent = file.content;
+            
+            // Check for pre-compiled Tailwind CSS first
+            if (vfsPath === '/src/index.css') {
+              try {
+                const fs = await import('fs');
+                const compiledPath = path.join(process.cwd(), 'src', 'index.compiled.css');
+                if (fs.existsSync(compiledPath)) {
+                  cssContent = fs.readFileSync(compiledPath, 'utf-8');
+                  console.log(`[JXR] Using pre-compiled Tailwind CSS from index.compiled.css`);
+                } else {
+                  // Try to compile on-the-fly
+                  const { execSync } = await import('child_process');
+                  const os = await import('os');
+                  
+                  const tmpDir = os.tmpdir();
+                  const inputFile = path.join(tmpDir, `jxr-tailwind-${Date.now()}.css`);
+                  const outputFile = path.join(tmpDir, `jxr-tailwind-${Date.now()}.compiled.css`);
+                  
+                  fs.writeFileSync(inputFile, cssContent);
+                  
+                  try {
+                    execSync(`npx @tailwindcss/cli -i "${inputFile}" -o "${outputFile}" --minify`, {
+                      timeout: 30000,
+                      stdio: 'pipe'
+                    });
+                    cssContent = fs.readFileSync(outputFile, 'utf-8');
+                    fs.unlinkSync(inputFile);
+                    fs.unlinkSync(outputFile);
+                    console.log(`[JXR] Compiled Tailwind CSS for ${vfsPath}`);
+                  } catch {
+                    // CDN fallback
+                    const js = `
+const tailwindScript = document.createElement('script');
+tailwindScript.src = 'https://cdn.tailwindcss.com';
+tailwindScript.onload = function() {
+  const style = document.createElement('style');
+  style.textContent = \`${file.content.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$/g, '\\$')}\`;
+  document.head.appendChild(style);
+};
+document.head.appendChild(tailwindScript);
+export default \`${file.content.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$/g, '\\$')}\`;
+`;
+                    res.writeHead(200, { 
+                      "Content-Type": "application/javascript",
+                      "Cache-Control": "no-cache"
+                    });
+                    res.end(js);
+                    return;
+                  }
+                }
+              } catch (error: any) {
+                console.warn(`[JXR] Tailwind handling error: ${error?.message || error}`);
+              }
+            }
+            
+            const escapedCSS = cssContent
               .replace(/\\/g, '\\\\')
               .replace(/`/g, '\\`')
               .replace(/\$/g, '\\$');

package/zzz_react_template/App.tsx

@@ -1,160 +1,47 @@
-import React, { useState } from 'react'
-
-const FEATURES = [
-  { icon: '⚡', title: 'React 19', desc: 'Latest React with automatic batching and concurrent features' },
-  { icon: '🎨', title: 'Tailwind CSS', desc: 'Utility-first styling with the Tailwind CDN in preview' },
-  { icon: '📦', title: 'TypeScript', desc: 'Full type safety across your entire codebase' },
-  { icon: '🚀', title: 'Vite', desc: 'Lightning-fast HMR and optimized production builds' },
-]
+/**
+ * JXR.js Marketing Website — App.tsx
+ * LavaFlow OS Design System
+ * Powered by JXR Studios × DamascusAI
+ */
+
+import { Toaster } from "@/components/ui/sonner";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { Route, Switch } from "wouter";
+import ErrorBoundary from "./components/ErrorBoundary";
+import { ThemeProvider } from "./contexts/ThemeContext";
+import Home from "./pages/Home";
+import DocsPage from "./pages/Docs";
+import NotFound from "./pages/NotFound";
+
+function Router() {
+  return (
+    <Switch>
+      <Route path="/" component={Home} />
+      <Route path="/docs" component={DocsPage} />
+      <Route path="/docs/:section" component={DocsPage} />
+      <Route component={NotFound} />
+    </Switch>
+  );
+}
 
 export default function App() {
-  const [count, setCount] = useState(0)
-
   return (
-    <div style={{
-      minHeight: '100vh',
-      background: 'linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%)',
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      padding: '2rem',
-      fontFamily: "'Inter', system-ui, -apple-system, sans-serif",
-      color: '#e2e8f0',
-    }}>
-      {/* Hero Card */}
-      <div style={{
-        background: 'rgba(255,255,255,0.05)',
-        backdropFilter: 'blur(20px)',
-        borderRadius: '1.5rem',
-        border: '1px solid rgba(255,255,255,0.1)',
-        padding: '3rem',
-        maxWidth: '640px',
-        width: '100%',
-        textAlign: 'center',
-        boxShadow: '0 25px 50px -12px rgba(0,0,0,0.5)',
-      }}>
-        {/* Logo */}
-        <div style={{
-          width: '64px',
-          height: '64px',
-          borderRadius: '16px',
-          background: 'linear-gradient(135deg, #6366f1, #a855f7, #ec4899)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          margin: '0 auto 1.5rem',
-          fontSize: '1.5rem',
-          fontWeight: 'bold',
-          color: 'white',
-          boxShadow: '0 0 30px rgba(99,102,241,0.4)',
-        }}>
-          x0
-        </div>
-
-        <h1 style={{
-          fontSize: '2.25rem',
-          fontWeight: 800,
-          marginBottom: '0.75rem',
-          background: 'linear-gradient(135deg, #c7d2fe, #e9d5ff, #fbcfe8)',
-          WebkitBackgroundClip: 'text',
-          WebkitTextFillColor: 'transparent',
-          lineHeight: 1.2,
-        }}>
-          Your App is Live
-        </h1>
-
-        <p style={{
-          fontSize: '1.1rem',
-          color: 'rgba(226,232,240,0.7)',
-          marginBottom: '2rem',
-          lineHeight: 1.6,
-        }}>
-          This project is ready for development. Use the AI chat to describe
-          what you want to build, or start editing files directly.
-        </p>
-
-        {/* Interactive Counter */}
-        <div style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          gap: '1rem',
-          marginBottom: '2.5rem',
-        }}>
-          <button
-            onClick={() => setCount(c => c - 1)}
-            style={{
-              width: '40px', height: '40px', borderRadius: '12px',
-              background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.15)',
-              color: '#e2e8f0', fontSize: '1.25rem', cursor: 'pointer',
-              display: 'flex', alignItems: 'center', justifyContent: 'center',
-              transition: 'all 0.15s',
-            }}
-            onMouseEnter={e => (e.currentTarget.style.background = 'rgba(255,255,255,0.2)')}
-            onMouseLeave={e => (e.currentTarget.style.background = 'rgba(255,255,255,0.1)')}
-          >
-            −
-          </button>
-          <div style={{
-            padding: '0.5rem 1.5rem',
-            borderRadius: '12px',
-            background: 'rgba(99,102,241,0.2)',
-            border: '1px solid rgba(99,102,241,0.3)',
-            fontSize: '1.25rem',
-            fontWeight: 700,
-            fontVariantNumeric: 'tabular-nums',
-            minWidth: '80px',
-          }}>
-            {count}
-          </div>
-          <button
-            onClick={() => setCount(c => c + 1)}
-            style={{
-              width: '40px', height: '40px', borderRadius: '12px',
-              background: 'linear-gradient(135deg, #6366f1, #a855f7)',
-              border: 'none', color: 'white', fontSize: '1.25rem', cursor: 'pointer',
-              display: 'flex', alignItems: 'center', justifyContent: 'center',
-              boxShadow: '0 0 20px rgba(99,102,241,0.3)',
-              transition: 'all 0.15s',
+    <ErrorBoundary>
+      <ThemeProvider defaultTheme="dark">
+        <TooltipProvider>
+          <Toaster
+            theme="dark"
+            toastOptions={{
+              style: {
+                background: 'oklch(0.13 0.007 285)',
+                border: '1px solid oklch(1 0 0 / 10%)',
+                color: 'oklch(0.93 0.005 65)',
+              },
             }}
-            onMouseEnter={e => (e.currentTarget.style.transform = 'scale(1.1)')}
-            onMouseLeave={e => (e.currentTarget.style.transform = 'scale(1)')}
-          >
-            +
-          </button>
-        </div>
-
-        {/* Feature Grid */}
-        <div style={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(2, 1fr)',
-          gap: '0.75rem',
-          textAlign: 'left',
-        }}>
-          {FEATURES.map((f) => (
-            <div key={f.title} style={{
-              padding: '1rem',
-              borderRadius: '12px',
-              background: 'rgba(255,255,255,0.04)',
-              border: '1px solid rgba(255,255,255,0.06)',
-            }}>
-              <div style={{ fontSize: '1.25rem', marginBottom: '0.25rem' }}>{f.icon}</div>
-              <div style={{ fontWeight: 600, fontSize: '0.875rem', marginBottom: '0.25rem' }}>{f.title}</div>
-              <div style={{ fontSize: '0.75rem', color: 'rgba(226,232,240,0.5)', lineHeight: 1.4 }}>{f.desc}</div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Footer */}
-      <p style={{
-        marginTop: '2rem',
-        fontSize: '0.8rem',
-        color: 'rgba(226,232,240,0.3)',
-      }}>
-        Built with x0 · React 19 · TypeScript · Tailwind CSS
-      </p>
-    </div>
-  )
-}
+          />
+          <Router />
+        </TooltipProvider>
+      </ThemeProvider>
+    </ErrorBoundary>
+  );
+}

package/zzz_react_template/components/ErrorBoundary.tsx

@@ -0,0 +1,62 @@
+import { cn } from "@/lib/utils";
+import { AlertTriangle, RotateCcw } from "lucide-react";
+import { Component, ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex items-center justify-center min-h-screen p-8 bg-background">
+          <div className="flex flex-col items-center w-full max-w-2xl p-8">
+            <AlertTriangle
+              size={48}
+              className="text-destructive mb-6 flex-shrink-0"
+            />
+
+            <h2 className="text-xl mb-4">An unexpected error occurred.</h2>
+
+            <div className="p-4 w-full rounded bg-muted overflow-auto mb-6">
+              <pre className="text-sm text-muted-foreground whitespace-break-spaces">
+                {this.state.error?.stack}
+              </pre>
+            </div>
+
+            <button
+              onClick={() => window.location.reload()}
+              className={cn(
+                "flex items-center gap-2 px-4 py-2 rounded-lg",
+                "bg-primary text-primary-foreground",
+                "hover:opacity-90 cursor-pointer"
+              )}
+            >
+              <RotateCcw size={16} />
+              Reload Page
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

package/zzz_react_template/components/ManusDialog.tsx

@@ -0,0 +1,85 @@
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+interface ManusDialogProps {
+  title?: string;
+  logo?: string;
+  open?: boolean;
+  onLogin: () => void;
+  onOpenChange?: (open: boolean) => void;
+  onClose?: () => void;
+}
+
+export function ManusDialog({
+  title,
+  logo,
+  open = false,
+  onLogin,
+  onOpenChange,
+  onClose,
+}: ManusDialogProps) {
+  const [internalOpen, setInternalOpen] = useState(open);
+
+  useEffect(() => {
+    if (!onOpenChange) {
+      setInternalOpen(open);
+    }
+  }, [open, onOpenChange]);
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (onOpenChange) {
+      onOpenChange(nextOpen);
+    } else {
+      setInternalOpen(nextOpen);
+    }
+
+    if (!nextOpen) {
+      onClose?.();
+    }
+  };
+
+  return (
+    <Dialog
+      open={onOpenChange ? open : internalOpen}
+      onOpenChange={handleOpenChange}
+    >
+      <DialogContent className="py-5 bg-[#f8f8f7] rounded-[20px] w-[400px] shadow-[0px_4px_11px_0px_rgba(0,0,0,0.08)] border border-[rgba(0,0,0,0.08)] backdrop-blur-2xl p-0 gap-0 text-center">
+        <div className="flex flex-col items-center gap-2 p-5 pt-12">
+          {logo ? (
+            <div className="w-16 h-16 bg-white rounded-xl border border-[rgba(0,0,0,0.08)] flex items-center justify-center">
+              <img src={logo} alt="Dialog graphic" className="w-10 h-10 rounded-md" />
+            </div>
+          ) : null}
+
+          {/* Title and subtitle */}
+          {title ? (
+            <DialogTitle className="text-xl font-semibold text-[#34322d] leading-[26px] tracking-[-0.44px]">
+              {title}
+            </DialogTitle>
+          ) : null}
+          <DialogDescription className="text-sm text-[#858481] leading-5 tracking-[-0.154px]">
+            Please login with Manus to continue
+          </DialogDescription>
+        </div>
+
+        <DialogFooter className="px-5 py-5">
+          {/* Login button */}
+          <Button
+            onClick={onLogin}
+            className="w-full h-10 bg-[#1a1a19] hover:bg-[#1a1a19]/90 text-white rounded-[10px] text-sm font-medium leading-5 tracking-[-0.154px]"
+          >
+            Login with Manus
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}