npm - @jxrstudios/jxr - Versions diffs - 1.0.10 → 1.1.11 - Mend

@jxrstudios/jxr 1.0.10 → 1.1.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (87) hide show

package/bin/jxr.js +6 -0
package/dist/index.js +57 -2
package/dist/jxr-server-manager.d.ts.map +1 -1
package/package.json +1 -1
package/src/jxr-server-manager.ts +65 -2
package/zzz_react_template/App.tsx +43 -156
package/zzz_react_template/components/ErrorBoundary.tsx +62 -0
package/zzz_react_template/components/ManusDialog.tsx +85 -0
package/zzz_react_template/components/Map.tsx +155 -0
package/zzz_react_template/components/jxr/CodeEditor.tsx +313 -0
package/zzz_react_template/components/jxr/FileExplorer.tsx +230 -0
package/zzz_react_template/components/jxr/IDEShell.tsx +159 -0
package/zzz_react_template/components/jxr/LandingPage.tsx +414 -0
package/zzz_react_template/components/jxr/LivePreview.tsx +169 -0
package/zzz_react_template/components/jxr/PerformanceDashboard.tsx +379 -0
package/zzz_react_template/components/jxr/TopBar.tsx +149 -0
package/zzz_react_template/components/ui/accordion.tsx +64 -0
package/zzz_react_template/components/ui/alert-dialog.tsx +155 -0
package/zzz_react_template/components/ui/alert.tsx +66 -0
package/zzz_react_template/components/ui/aspect-ratio.tsx +9 -0
package/zzz_react_template/components/ui/avatar.tsx +51 -0
package/zzz_react_template/components/ui/badge.tsx +46 -0
package/zzz_react_template/components/ui/breadcrumb.tsx +109 -0
package/zzz_react_template/components/ui/button-group.tsx +83 -0
package/zzz_react_template/components/ui/button.tsx +60 -0
package/zzz_react_template/components/ui/calendar.tsx +211 -0
package/zzz_react_template/components/ui/card.tsx +92 -0
package/zzz_react_template/components/ui/carousel.tsx +239 -0
package/zzz_react_template/components/ui/chart.tsx +355 -0
package/zzz_react_template/components/ui/checkbox.tsx +30 -0
package/zzz_react_template/components/ui/collapsible.tsx +31 -0
package/zzz_react_template/components/ui/command.tsx +184 -0
package/zzz_react_template/components/ui/context-menu.tsx +250 -0
package/zzz_react_template/components/ui/dialog.tsx +209 -0
package/zzz_react_template/components/ui/drawer.tsx +133 -0
package/zzz_react_template/components/ui/dropdown-menu.tsx +255 -0
package/zzz_react_template/components/ui/empty.tsx +104 -0
package/zzz_react_template/components/ui/field.tsx +242 -0
package/zzz_react_template/components/ui/form.tsx +168 -0
package/zzz_react_template/components/ui/hover-card.tsx +42 -0
package/zzz_react_template/components/ui/input-group.tsx +168 -0
package/zzz_react_template/components/ui/input-otp.tsx +75 -0
package/zzz_react_template/components/ui/input.tsx +70 -0
package/zzz_react_template/components/ui/item.tsx +193 -0
package/zzz_react_template/components/ui/kbd.tsx +28 -0
package/zzz_react_template/components/ui/label.tsx +22 -0
package/zzz_react_template/components/ui/menubar.tsx +274 -0
package/zzz_react_template/components/ui/navigation-menu.tsx +168 -0
package/zzz_react_template/components/ui/pagination.tsx +127 -0
package/zzz_react_template/components/ui/popover.tsx +46 -0
package/zzz_react_template/components/ui/progress.tsx +29 -0
package/zzz_react_template/components/ui/radio-group.tsx +43 -0
package/zzz_react_template/components/ui/resizable.tsx +54 -0
package/zzz_react_template/components/ui/scroll-area.tsx +56 -0
package/zzz_react_template/components/ui/select.tsx +185 -0
package/zzz_react_template/components/ui/separator.tsx +26 -0
package/zzz_react_template/components/ui/sheet.tsx +139 -0
package/zzz_react_template/components/ui/sidebar.tsx +734 -0
package/zzz_react_template/components/ui/skeleton.tsx +13 -0
package/zzz_react_template/components/ui/slider.tsx +61 -0
package/zzz_react_template/components/ui/sonner.tsx +23 -0
package/zzz_react_template/components/ui/spinner.tsx +16 -0
package/zzz_react_template/components/ui/switch.tsx +29 -0
package/zzz_react_template/components/ui/table.tsx +114 -0
package/zzz_react_template/components/ui/tabs.tsx +64 -0
package/zzz_react_template/components/ui/textarea.tsx +67 -0
package/zzz_react_template/components/ui/toggle-group.tsx +73 -0
package/zzz_react_template/components/ui/toggle.tsx +45 -0
package/zzz_react_template/components/ui/tooltip.tsx +59 -0
package/zzz_react_template/const.ts +17 -0
package/zzz_react_template/contexts/JXRContext.tsx +264 -0
package/zzz_react_template/contexts/ThemeContext.tsx +64 -0
package/zzz_react_template/hooks/useComposition.ts +81 -0
package/zzz_react_template/hooks/useMobile.tsx +21 -0
package/zzz_react_template/hooks/usePersistFn.ts +20 -0
package/zzz_react_template/index.css +518 -11
package/zzz_react_template/lib/jxr-runtime/index.ts +201 -0
package/zzz_react_template/lib/jxr-runtime/module-resolver.ts +520 -0
package/zzz_react_template/lib/jxr-runtime/moq-transport.ts +267 -0
package/zzz_react_template/lib/jxr-runtime/web-crypto.ts +279 -0
package/zzz_react_template/lib/jxr-runtime/worker-pool.ts +321 -0
package/zzz_react_template/lib/utils.ts +6 -0
package/zzz_react_template/main.tsx +4 -9
package/zzz_react_template/pages/Docs.tsx +955 -0
package/zzz_react_template/pages/Home.tsx +1080 -0
package/zzz_react_template/pages/NotFound.tsx +105 -0
package/zzz_react_template/tsconfig.json +24 -0

package/bin/jxr.js CHANGED Viewed

@@ -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.js CHANGED Viewed

@@ -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}\`;
@@ -1949,7 +1997,14 @@ export default \`${escapedCSS}\`;
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>JXR App</title>
+  <title>JXR.js \u2014 Edge OS Runtime Framework</title>
+  <meta name="description" content="JXR.js is the next-generation edge runtime framework for React Native and React. MoQ transport, Web Crypto, Worker pools.">
+  <!-- Google Fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
   <script type="importmap">
     ${JSON.stringify(importMap)}
   <\/script>

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

	@@ -1 +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;~~CA+GrB~~"}
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;IAmLtB,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IA+B3B,OAAO,CAAC,YAAY;CAsHrB"}

package/package.json CHANGED Viewed

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

package/src/jxr-server-manager.ts CHANGED Viewed

@@ -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, '\\$');
@@ -411,7 +467,14 @@ export default \`${escapedCSS}\`;
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>JXR App</title>
+  <title>JXR.js — Edge OS Runtime Framework</title>
+  <meta name="description" content="JXR.js is the next-generation edge runtime framework for React Native and React. MoQ transport, Web Crypto, Worker pools.">
+  <!-- Google Fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
   <script type="importmap">
     ${JSON.stringify(importMap)}
   </script>

package/zzz_react_template/App.tsx CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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>
+  );
+}