@jxrstudios/jxr 1.0.4 → 1.0.5

package/zzz_react_template/App.tsx

@@ -0,0 +1,160 @@
+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' },
+]
+
+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',
+            }}
+            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>
+  )
+}

package/zzz_react_template/index.css

@@ -0,0 +1,16 @@
+@import "tailwindcss";
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}

package/zzz_react_template/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/zzz_react_template/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)

package/zzz_react_template/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "react-app",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "jxr",
+    "preview": "jxr preview"
+  },
+  "dependencies": {
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "lucide-react": "^0.575.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.4",
+    "typescript": "^5.9.3",
+    "tailwindcss": "^4.2.1",
+    "@tailwindcss/postcss": "^4.2.1",
+    "autoprefixer": "^10.4.24",
+    "postcss": "^8.5.6",
+    "tw-animate-css": "^1.4.0"
+  }
+}