nuclie 1.0.3 → 1.0.5

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.
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Nuclie Template Definitions
3
3
  * Defines the file structure for 12 supported frameworks.
4
- * Day 17: Create-Nuclie Templates Lock
4
+ * Optimized for Premium Branding & Unified Design.
5
5
  */
6
6
  export interface TemplateFile {
7
7
  path: string;
@@ -1,75 +1,263 @@
1
1
  /**
2
2
  * Nuclie Template Definitions
3
3
  * Defines the file structure for 12 supported frameworks.
4
- * Day 17: Create-Nuclie Templates Lock
4
+ * Optimized for Premium Branding & Unified Design.
5
5
  */
6
- // Minimal definitions for the 12 frameworks to prove capability.
7
- // In a real repo, these would be larger or loaded from external storage.
6
+ // SHARED PREMIUM CSS SYSTEM
7
+ const PREMIUM_CSS = `:root {
8
+ --primary: #00e5ff;
9
+ --primary-glow: rgba(0, 229, 255, 0.4);
10
+ --bg: #030712;
11
+ --card-bg: rgba(255, 255, 255, 0.03);
12
+ --card-border: rgba(255, 255, 255, 0.1);
13
+ --text: #f9fafb;
14
+ --text-muted: #9ca3af;
15
+
16
+ font-family: 'Outfit', Inter, system-ui, sans-serif;
17
+ background-color: var(--bg);
18
+ color: var(--text);
19
+ -webkit-font-smoothing: antialiased;
20
+ }
21
+
22
+ * { box-sizing: border-box; margin: 0; padding: 0; }
23
+ body { overflow-x: hidden; min-height: 100vh; }
24
+ .container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
25
+
26
+ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: 0.3s; padding: 1.5rem 0; }
27
+ .nav.scrolled { background: rgba(3, 7, 18, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--card-border); padding: 1rem 0; }
28
+ .nav-content { max-width: 1100px; margin: 0 auto; padding: 0 2rem; display: flex; justify-content: space-between; align-items: center; }
29
+ .logo-text { font-size: 1.5rem; font-weight: 800; letter-spacing: -1px; }
30
+ .nav-links { display: flex; gap: 2rem; align-items: center; }
31
+ .nav-links a { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; transition: 0.2s; }
32
+ .nav-links a:hover { color: var(--primary); }
33
+
34
+ .gradient-text { background: linear-gradient(135deg, #fff 0%, var(--primary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
35
+
36
+ .btn-primary {
37
+ background: var(--primary); color: #000; border: none; padding: 0.8rem 2rem;
38
+ border-radius: 99px; font-weight: 600; cursor: pointer; transition: 0.3s;
39
+ box-shadow: 0 4px 20px var(--primary-glow); border: 1px solid transparent;
40
+ }
41
+ .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px var(--primary-glow); }
42
+ .btn-primary-sm { background: var(--primary); color: #000; border: none; padding: 0.5rem 1.2rem; border-radius: 99px; font-weight: 600; cursor: pointer; font-size: 0.8rem; }
43
+ .btn-secondary { background: transparent; color: #fff; border: 1px solid var(--card-border); padding: 0.8rem 2rem; border-radius: 99px; font-weight: 500; cursor: pointer; transition: 0.2s; }
44
+ .btn-secondary:hover { background: rgba(255, 255, 255, 0.05); }
45
+
46
+ .hero { padding: 10rem 0 5rem; position: relative; text-align: center; }
47
+ .hero-glow { position: absolute; top: -200px; left: 50%; transform: translateX(-50%); width: 800px; height: 600px; background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%); filter: blur(80px); z-index: -1; opacity: 0.6; }
48
+ .badge { display: inline-block; padding: 0.4rem 1rem; background: rgba(0, 229, 255, 0.1); border: 1px solid rgba(0, 229, 255, 0.2); border-radius: 30px; color: var(--primary); font-size: 0.8rem; font-weight: 600; margin-bottom: 2rem; }
49
+ .hero-title { font-size: clamp(3rem, 8vw, 5rem); line-height: 1.1; letter-spacing: -2px; margin-bottom: 1.5rem; }
50
+ .hero-subtitle { color: var(--text-muted); font-size: 1.2rem; line-height: 1.6; margin-bottom: 3rem; }
51
+ .hero-actions { display: flex; gap: 1.5rem; justify-content: center; margin-bottom: 5rem; }
52
+
53
+ .glass-card { background: var(--card-bg); backdrop-filter: blur(20px); border: 1px solid var(--card-border); padding: 1.5rem; border-radius: 12px; width: 100%; max-width: 600px; text-align: left; margin: 0 auto; }
54
+ .card-header { display: flex; gap: 6px; margin-bottom: 1.5rem; }
55
+ .dot { width: 10px; height: 10px; border-radius: 50%; }
56
+ .dot.red { background: #ff5f56; }
57
+ .dot.yellow { background: #ffbd2e; }
58
+ .dot.green { background: #27c93f; }
59
+
60
+ code { font-family: 'Fira Code', monospace; font-size: 0.9rem; color: #d1d5db; }
61
+ .keyword { color: #f472b6; }
62
+ .comment { color: #6b7280; }
63
+ .success { color: #34d399; }
64
+
65
+ .footer { padding: 4rem 0; text-align: center; border-top: 1px solid var(--card-border); color: var(--text-muted); font-size: 0.9rem; }
66
+ `;
8
67
  const COMMON_FILES = [
9
68
  {
10
69
  path: 'nuclie.config.ts',
11
- content: `export default {
12
- mode: 'development',
13
- plugins: []
14
- };`
70
+ content: `export default {\n mode: 'development',\n plugins: []\n};`
15
71
  },
16
72
  {
17
73
  path: 'tsconfig.json',
18
- content: `{
19
- "compilerOptions": {
20
- "target": "ESNext",
21
- "module": "ESNext",
22
- "moduleResolution": "bundler",
23
- "strict": true,
24
- "jsx": "preserve"
25
- }
26
- }`
74
+ content: `{\n "compilerOptions": {\n "target": "ESNext",\n "module": "ESNext",\n "moduleResolution": "bundler",\n "strict": true,\n "jsx": "preserve"\n }\n}`
27
75
  }
28
76
  ];
29
77
  export const TEMPLATES = {
30
78
  'react-ts': {
31
79
  id: 'react-ts',
32
80
  name: 'React TypeScript',
33
- description: 'React Latest + TypeScript + Nuclie',
81
+ description: 'React 19 + TypeScript + Modern Architecture + Premium UI',
34
82
  files: [
35
83
  ...COMMON_FILES,
36
- { path: 'index.html', content: `<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>Nuclie + React + TS</title>\n </head>\n <body>\n <div id="root"></div>\n <script type="module" src="/src/main.tsx"></script>\n </body>\n</html>` },
37
- { path: 'src/main.tsx', content: `import { StrictMode } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport './index.css';\nimport App from './App.tsx';\n\ncreateRoot(document.getElementById('root')!).render(\n <StrictMode>\n <App />\n </StrictMode>,\n);` },
38
- { path: 'src/App.tsx', content: `import { useState } from 'react';\nimport './App.css';\n\nfunction App() {\n const [count, setCount] = useState(0);\n\n return (\n <>\n <h1>Nuclie + React</h1>\n <div className="card">\n <button onClick={() => setCount((count) => count + 1)}>\n count is {count}\n </button>\n <p>\n Edit <code>src/App.tsx</code> and save to test HMR\n </p>\n </div>\n <p className="read-the-docs">\n Click on the Nuclie and React logos to learn more\n </p>\n </>\n );\n}\n\nexport default App;\n` },
39
- { path: 'src/index.css', content: `:root {\n font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;\n line-height: 1.5;\n font-weight: 400;\n color-scheme: light dark;\n color: rgba(255, 255, 255, 0.87);\n background-color: #242424;\n font-synthesis: none;\n text-rendering: optimizeLegibility;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\nbody {\n margin: 0;\n display: flex;\n place-items: center;\n min-width: 320px;\n min-height: 100vh;\n}\n\nh1 {\n font-size: 3.2em;\n line-height: 1.1;\n}\n\n#root {\n max-width: 1280px;\n margin: 0 auto;\n padding: 2rem;\n text-align: center;\n}` },
40
- { path: 'src/App.css', content: `.logo {\n height: 6em;\n padding: 1.5em;\n will-change: filter;\n transition: filter 300ms;\n}\n.logo:hover {\n filter: drop-shadow(0 0 2em #646cffaa);\n}\n.logo.react:hover {\n filter: drop-shadow(0 0 2em #61dafbaa);\n}\n\n@keyframes logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n@media (prefers-reduced-motion: no-preference) {\n a:nth-of-type(2) .logo {\n animation: logo-spin infinite 20s linear;\n }\n}\n\n.card {\n padding: 2em;\n}\n\n.read-the-docs {\n color: #888;\n}` }
84
+ { path: '.gitignore', content: 'node_modules\ndist\n.DS_Store\n*.local\n.nuclie\n' },
85
+ { path: 'README.md', content: '# Nuclie React App\n\nGenerated with Nuclie Forge.\n' },
86
+ { path: 'index.html', content: `<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <link rel="icon" type="image/svg+xml" href="/favicon.svg" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <link rel="preconnect" href="https://fonts.googleapis.com">\n <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>\n <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">\n <title>Nuclie Modern App</title>\n </head>\n <body>\n <div id="root"></div>\n <script type="module" src="/src/main.tsx"></script>\n </body>\n</html>` },
87
+ { path: 'public/favicon.svg', content: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#00e5ff" opacity="0.3"/><circle cx="50" cy="50" r="20" fill="#00e5ff"/></svg>` },
88
+ { path: 'src/main.tsx', content: `import { StrictMode } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport './styles/global.css';\nimport App from './App.tsx';\n\nconst root = document.getElementById('root');\nif (root) {\n createRoot(root).render(\n <StrictMode>\n <App />\n </StrictMode>,\n );\n}` },
89
+ { path: 'src/App.tsx', content: `import Landing from './pages/Landing';\n\nfunction App() {\n return (\n <div className="app-shell">\n <Landing />\n </div>\n );\n}\n\nexport default App;\n` },
90
+ { path: 'src/pages/Landing.tsx', content: `import { useState } from 'react';\nimport Navbar from '../components/Navbar';\nimport Hero from '../components/Hero';\n\nexport default function Landing() {\n const [count, setCount] = useState(0);\n\n return (\n <div className="landing-page">\n <Navbar />\n <Hero count={count} onIncrement={() => setCount(c => c + 1)} />\n <footer className="footer">\n <p>© 2026 Nuclie Forge. Built with passion for developers.</p>\n </footer>\n </div>\n );\n}` },
91
+ { path: 'src/components/Navbar.tsx', content: `import { useState, useEffect } from 'react';\n\nexport default function Navbar() {\n const [scrolled, setScrolled] = useState(false);\n\n useEffect(() => {\n const handleScroll = () => setScrolled(window.scrollY > 50);\n window.addEventListener('scroll', handleScroll);\n return () => window.removeEventListener('scroll', handleScroll);\n }, []);\n\n return (\n <nav className={scrolled ? 'nav scrolled' : 'nav'}>\n <div className="nav-content">\n <div className="logo-text">NUCLIE</div>\n <div className="nav-links">\n <a href="#features">Features</a>\n <a href="#docs">Docs</a>\n <button className="btn-primary-sm">Get Started</button>\n </div>\n </div>\n </nav>\n );\n}` },
92
+ { path: 'src/components/Hero.tsx', content: `export default function Hero({ count, onIncrement }: { count: number, onIncrement: () => void }) {\n return (\n <main className="hero">\n <div className="hero-glow"></div>\n <div className="container">\n <div className="badge">Engine v1.0.4 Ready</div>\n <h1 className="hero-title">\n The Nucleus for <br />\n <span className="gradient-text">Stunning Web Apps</span>\n </h1>\n <p className="hero-subtitle">\n Experience the next generation of build speed with Nuclie. <br />\n Unified design across all frameworks, powered by native Rust.\n </p>\n \n <div className="hero-actions">\n <button className="btn-primary" onClick={onIncrement}>\n Interactions: {count}\n </button>\n <button className="btn-secondary">Read Documentation</button>\n </div>\n\n <div className="hero-visual">\n <div className="glass-card">\n <div className="card-header">\n <div className="dot red"></div>\n <div className="dot yellow"></div>\n <div className="dot green"></div>\n </div>\n <code>\n <span className="comment">// Initializing the nucleus...</span><br />\n <span className="keyword">npm</span> install nuclie<br />\n <span className="keyword">npm</span> run dev<br />\n <br />\n <span className="success">✔ Core Ready in 3.15ms</span>\n </code>\n </div>\n </div>\n </div>\n </main>\n );\n}` },
93
+ { path: 'src/styles/global.css', content: PREMIUM_CSS },
94
+ { path: 'src/utils/helpers.ts', content: `export const formatTime = (ms: number) => (ms / 1000).toFixed(2) + 's';\n` }
41
95
  ],
42
96
  dependencies: { "react": "latest", "react-dom": "latest" },
43
97
  devDependencies: { "@types/react": "latest", "@types/react-dom": "latest" }
44
98
  },
45
- vue: {
99
+ 'vue': {
46
100
  id: 'vue',
47
- name: 'Vue',
48
- description: 'Vue Latest + TypeScript',
101
+ name: 'Vue 3',
102
+ description: 'Vue 3 + TypeScript + Modern Architecture + Premium UI',
49
103
  files: [
50
104
  ...COMMON_FILES,
51
- { path: 'src/main.ts', content: `import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');` },
52
- { path: 'src/App.vue', content: `<template><h1>Hello Nuclie Vue</h1></template>` },
53
- { path: 'index.html', content: `<!DOCTYPE html><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body>` }
105
+ { path: '.gitignore', content: 'node_modules\ndist\n.DS_Store\n' },
106
+ { path: 'README.md', content: '# Nuclie Vue App\n' },
107
+ { path: 'index.html', content: `<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <link rel="icon" type="image/svg+xml" href="/favicon.svg" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <link rel="preconnect" href="https://fonts.googleapis.com">\n <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>\n <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">\n <title>Nuclie Modern Vue</title>\n </head>\n <body>\n <div id="app"></div>\n <script type="module" src="/src/main.ts"></script>\n </body>\n</html>` },
108
+ { path: 'public/favicon.svg', content: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#42b883" opacity="0.3"/><circle cx="50" cy="50" r="20" fill="#42b883"/></svg>` },
109
+ { path: 'src/main.ts', content: `import { createApp } from 'vue';\nimport App from './App.vue';\nimport './styles/global.css';\n\ncreateApp(App).mount('#app');` },
110
+ { path: 'src/App.vue', content: `<script setup lang="ts">\nimport Landing from './pages/Landing.vue';\n</script>\n<template>\n <Landing />\n</template>` },
111
+ { path: 'src/pages/Landing.vue', content: `<script setup lang="ts">\nimport Navbar from '../components/Navbar.vue';\nimport Hero from '../components/Hero.vue';\n</script>\n<template>\n <div class="landing-page">\n <Navbar />\n <Hero />\n <footer class="footer">\n <p>© 2026 Nuclie Forge. Built with passion for developers.</p>\n </footer>\n </div>\n</template>` },
112
+ { path: 'src/components/Navbar.vue', content: `<script setup lang="ts">\nimport { ref, onMounted, onUnmounted } from 'vue';\nconst scrolled = ref(false);\nconst handleScroll = () => scrolled.value = window.scrollY > 50;\nonMounted(() => window.addEventListener('scroll', handleScroll));\nonUnmounted(() => window.removeEventListener('scroll', handleScroll));\n</script>\n<template>\n <nav :class="scrolled ? 'nav scrolled' : 'nav'">\n <div class="nav-content">\n <div class="logo-text">NUCLIE</div>\n <div class="nav-links">\n <a href="#features">Features</a>\n <a href="#docs">Docs</a>\n <button class="btn-primary-sm">Get Started</button>\n </div>\n </div>\n </nav>\n</template>` },
113
+ { path: 'src/components/Hero.vue', content: `<script setup lang="ts">\nimport { ref } from 'vue';\nconst count = ref(0);\n</script>\n<template>\n <main class="hero">\n <div class="hero-glow"></div>\n <div class="container">\n <div class="badge">Engine v1.0.4 Ready</div>\n <h1 class="hero-title">\n The Nucleus for <br />\n <span class="gradient-text">Stunning Web Apps</span>\n </h1>\n <p class="hero-subtitle">\n Experience the next generation of build speed with Nuclie. <br />\n Unified design across all frameworks, powered by native Rust.\n </p>\n <div class="hero-actions">\n <button class="btn-primary" @click="count++">Interactions: {{ count }}</button>\n <button class="btn-secondary">Read Documentation</button>\n </div>\n <div class="hero-visual">\n <div class="glass-card">\n <div class="card-header"><div class="dot red"></div><div class="dot yellow"></div><div class="dot green"></div></div>\n <code><span class="comment">// Initializing the nucleus...</span><br /><span class="keyword">npm</span> install nuclie<br /><span class="keyword">npm</span> run dev<br /><br /><span class="success">✔ Core Ready in 3.15ms</span></code>\n </div>\n </div>\n </div>\n </main>\n</template>` },
114
+ { path: 'src/styles/global.css', content: PREMIUM_CSS.replace('--primary: #00e5ff;', '--primary: #42b883;').replace('--primary-glow: rgba(0, 229, 255, 0.4);', '--primary-glow: rgba(66, 184, 131, 0.3);') }
54
115
  ],
55
116
  dependencies: { "vue": "latest" },
56
117
  devDependencies: { "@vue/compiler-sfc": "latest" }
57
118
  },
58
- svelte: {
119
+ 'svelte': {
59
120
  id: 'svelte',
60
121
  name: 'Svelte',
61
- description: 'Svelte Latest + TypeScript',
62
- files: [...COMMON_FILES, { path: 'src/main.ts', content: '' }],
122
+ description: 'Svelte 5 + modern Architecture + Premium UI',
123
+ files: [
124
+ ...COMMON_FILES,
125
+ { path: '.gitignore', content: 'node_modules\ndist\n.DS_Store\n' },
126
+ { path: 'index.html', content: `<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/favicon.svg" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">\n <title>Nuclie Modern Svelte</title>\n </head>\n <body>\n <div id="app"></div>\n <script type="module" src="/src/main.ts"></script>\n </body>\n</html>` },
127
+ { path: 'public/favicon.svg', content: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#ff3e00" opacity="0.3"/><circle cx="50" cy="50" r="20" fill="#ff3e00"/></svg>` },
128
+ { path: 'src/main.ts', content: `import { mount } from 'svelte';\nimport App from './App.svelte';\nimport './styles/global.css';\n\nmount(App, { target: document.getElementById('app')! });` },
129
+ { path: 'src/App.svelte', content: `<script lang="ts">\n import Navbar from './components/Navbar.svelte';\n import Hero from './components/Hero.svelte';\n</script>\n<div class="landing-page">\n <Navbar />\n <Hero />\n <footer class="footer">\n <p>© 2026 Nuclie Forge. Built with passion for developers.</p>\n </footer>\n</div>` },
130
+ { path: 'src/components/Navbar.svelte', content: `<script lang="ts">\n let scrolled = $state(false);\n if (typeof window !== 'undefined') {\n window.addEventListener('scroll', () => scrolled = window.scrollY > 50);\n }\n</script>\n<nav class={scrolled ? 'nav scrolled' : 'nav'}>\n <div class="nav-content">\n <div class="logo-text">NUCLIE</div>\n <div class="nav-links">\n <a href="#features">Features</a>\n <a href="#docs">Docs</a>\n <button class="btn-primary-sm">Get Started</button>\n </div>\n </div>\n</nav>` },
131
+ { path: 'src/components/Hero.svelte', content: `<script lang="ts">\n let count = $state(0);\n</script>\n<main class="hero">\n <div class="hero-glow"></div>\n <div class="container">\n <div class="badge">Engine v1.0.4 Ready</div>\n <h1 class="hero-title">The Nucleus for <br /><span class="gradient-text">Stunning Web Apps</span></h1>\n <p class="hero-subtitle">Experience the next generation of build speed with Nuclie. <br />Unified design across all frameworks, powered by native Rust.</p>\n <div class="hero-actions">\n <button class="btn-primary" onclick={() => count++}>Interactions: {count}</button>\n <button class="btn-secondary">Read Documentation</button>\n </div>\n <div class="hero-visual">\n <div class="glass-card">\n <div class="card-header"><div class="dot red"></div><div class="dot yellow"></div><div class="dot green"></div></div>\n <code><span class="comment">// Initializing the nucleus...</span><br /><span class="keyword">npm</span> install nuclie<br /><span class="keyword">npm</span> run dev<br /><br /><span class="success">✔ Core Ready in 3.15ms</span></code>\n </div>\n </div>\n </div>\n</main>` },
132
+ { path: 'src/styles/global.css', content: PREMIUM_CSS.replace('--primary: #00e5ff;', '--primary: #ff3e00;').replace('--primary-glow: rgba(0, 229, 255, 0.4);', '--primary-glow: rgba(255, 62, 0, 0.3);') }
133
+ ],
63
134
  dependencies: { "svelte": "latest" },
135
+ devDependencies: { "svelte-preprocess": "latest" }
136
+ },
137
+ 'solid': {
138
+ id: 'solid',
139
+ name: 'Solid',
140
+ description: 'SolidJS + modern Architecture + Premium UI',
141
+ files: [
142
+ ...COMMON_FILES,
143
+ { path: '.gitignore', content: 'node_modules\ndist\n.DS_Store\n' },
144
+ { path: 'index.html', content: `<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/favicon.svg" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">\n <title>Nuclie Modern Solid</title>\n </head>\n <body>\n <div id="app"></div>\n <script type="module" src="/src/main.tsx"></script>\n </body>\n</html>` },
145
+ { path: 'public/favicon.svg', content: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#2c4f7c" opacity="0.3"/><circle cx="50" cy="50" r="20" fill="#2c4f7c"/></svg>` },
146
+ { path: 'src/main.tsx', content: `import { render } from 'solid-js/web';\nimport App from './App';\nimport './styles/global.css';\n\nrender(() => <App />, document.getElementById('app')!);` },
147
+ { path: 'src/App.tsx', content: `import { createSignal, onMount, onCleanup } from 'solid-js';\n\nfunction App() {\n const [count, setCount] = createSignal(0);\n const [scrolled, setScrolled] = createSignal(false);\n onMount(() => window.addEventListener('scroll', () => setScrolled(window.scrollY > 50)));\n return (\n <div class="landing-page">\n <nav class={scrolled() ? 'nav scrolled' : 'nav'}><div class="nav-content"><div class="logo-text">NUCLIE</div><div class="nav-links"><a>Features</a><a>Docs</a><button class="btn-primary-sm">Get Started</button></div></div></nav>\n <main class="hero"><div class="hero-glow"></div><div class="container"><div class="badge">Engine v1.0.4 Ready</div><h1 class="hero-title">The Nucleus for <br /><span class="gradient-text">Stunning Web Apps</span></h1><p class="hero-subtitle">Experience building at light speed.</p><div class="hero-actions"><button class="btn-primary" onClick={() => setCount(c => c + 1)}>Interactions: {count()}</button></div><div class="hero-visual"><div class="glass-card"><code><span class="keyword">npm</span> install nuclie</code></div></div></div></main>\n <footer class="footer"><p>© 2026 Nuclie Forge.</p></footer>\n </div>\n );\n}\nexport default App;` },
148
+ { path: 'src/styles/global.css', content: PREMIUM_CSS.replace('--primary: #00e5ff;', '--primary: #2c4f7c;').replace('--primary-glow: rgba(0, 229, 255, 0.4);', '--primary-glow: rgba(44, 79, 124, 0.3);') }
149
+ ],
150
+ dependencies: { "solid-js": "latest" },
151
+ devDependencies: { "babel-preset-solid": "latest" }
152
+ },
153
+ 'preact': {
154
+ id: 'preact',
155
+ name: 'Preact',
156
+ description: 'Preact + modern Architecture + Premium UI',
157
+ files: [
158
+ ...COMMON_FILES,
159
+ { path: '.gitignore', content: 'node_modules\ndist\n.DS_Store\n' },
160
+ { path: 'index.html', content: `<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/favicon.svg" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">\n <title>Nuclie Modern Preact</title>\n </head>\n <body>\n <div id="app"></div>\n <script type="module" src="/src/main.tsx"></script>\n </body>\n</html>` },
161
+ { path: 'public/favicon.svg', content: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#673ab8" opacity="0.3"/><circle cx="50" cy="50" r="20" fill="#673ab8"/></svg>` },
162
+ { path: 'src/main.tsx', content: `import { render } from 'preact';\nimport App from './App';\nimport './styles/global.css';\n\nrender(<App />, document.getElementById('app')!);` },
163
+ { path: 'src/App.tsx', content: `import { useState } from 'preact/hooks';\nexport default function App() {\n const [count, setCount] = useState(0);\n return (\n <main class="hero"><div class="hero-glow"></div><div class="container"><div class="badge">Engine v1.0.4 Ready</div><h1 class="hero-title">Nuclie x <span class="gradient-text">Preact</span></h1><button onClick={() => setCount(c => c + 1)} class="btn-primary">Interactions: {count}</button></div></main>\n );\n}` },
164
+ { path: 'src/styles/global.css', content: PREMIUM_CSS.replace('--primary: #00e5ff;', '--primary: #673ab8;').replace('--primary-glow: rgba(0, 229, 255, 0.4);', '--primary-glow: rgba(103, 58, 184, 0.3);') }
165
+ ],
166
+ dependencies: { "preact": "latest" },
64
167
  devDependencies: {}
65
168
  },
66
- solid: { id: 'solid', name: 'Solid', description: 'SolidJS Signal Power', files: [...COMMON_FILES], dependencies: { "solid-js": "latest" }, devDependencies: {} },
67
- lit: { id: 'lit', name: 'Lit', description: 'Web Components', files: [...COMMON_FILES], dependencies: { "lit": "latest" }, devDependencies: {} },
68
- angular: { id: 'angular', name: 'Angular', description: 'Angular Ivy', files: [...COMMON_FILES], dependencies: { "@angular/core": "latest" }, devDependencies: {} },
69
- preact: { id: 'preact', name: 'Preact', description: 'Fast 3kb React alt', files: [...COMMON_FILES], dependencies: { "preact": "latest" }, devDependencies: {} },
70
- qwik: { id: 'qwik', name: 'Qwik', description: 'Resumable Framework', files: [...COMMON_FILES], dependencies: { "@builder.io/qwik": "latest" }, devDependencies: {} },
71
- astro: { id: 'astro', name: 'Astro', description: 'Content Focused', files: [...COMMON_FILES], dependencies: { "astro": "latest" }, devDependencies: {} },
72
- next: { id: 'next', name: 'Next-like', description: 'React SSR Router', files: [...COMMON_FILES], dependencies: { "react": "latest", "wouter": "latest" }, devDependencies: {} },
73
- nuxt: { id: 'nuxt', name: 'Nuxt-like', description: 'Vue Meta Framework', files: [...COMMON_FILES], dependencies: { "vue": "latest", "vue-router": "latest" }, devDependencies: {} },
74
- sveltekit: { id: 'sveltekit', name: 'SvelteKit-like', description: 'Svelte Fullstack', files: [...COMMON_FILES], dependencies: { "svelte": "latest" }, devDependencies: {} },
169
+ 'lit': {
170
+ id: 'lit',
171
+ name: 'Lit',
172
+ description: 'Lit + Web Components + Premium UI',
173
+ files: [
174
+ ...COMMON_FILES,
175
+ { path: 'index.html', content: `<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <link rel="icon" type="image/svg+xml" href="/favicon.svg" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">\n <title>Nuclie Modern Lit</title>\n </head>\n <body>\n <my-app></my-app>\n <script type="module" src="/src/main.ts"></script>\n </body>\n</html>` },
176
+ { path: 'src/main.ts', content: `import { LitElement, html, css } from 'lit';\nimport { customElement, state } from 'lit/decorators.js';\nimport './styles/global.css';\n\n@customElement('my-app')\nexport class MyApp extends LitElement {\n @state() count = 0;\n render() {\n return html\`\n <main class="hero">\n <div class="hero-glow"></div>\n <div class="container">\n <div class="badge">Engine v1.0.4 Ready</div>\n <h1 class="hero-title">Nuclie x <span class="gradient-text">Lit</span></h1>\n <p class="hero-subtitle">Web Components with native Nuclie speed.</p>\n <div class="hero-actions">\n <button class="btn-primary" @click=\${() => this.count++}>Interactions: \${this.count}</button>\n </div>\n </div>\n </main>\n \`;\n }\n createRenderRoot() { return this; }\n}` },
177
+ { path: 'src/styles/global.css', content: PREMIUM_CSS.replace('--primary: #00e5ff;', '--primary: #00e5ff;') }
178
+ ],
179
+ dependencies: { "lit": "latest" },
180
+ devDependencies: {}
181
+ },
182
+ 'angular': {
183
+ id: 'angular',
184
+ name: 'Angular',
185
+ description: 'Angular + Ivy + Premium UI',
186
+ files: [
187
+ ...COMMON_FILES,
188
+ { path: 'src/index.html', content: `<!DOCTYPE html>\n<html>\n<head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">\n <title>Nuclie Angular</title>\n</head>\n<body>\n <app-root></app-root>\n</body>\n</html>` },
189
+ { path: 'src/main.ts', content: `import { bootstrapApplication } from '@angular/platform-browser';\nimport { AppComponent } from './app/app.component';\nimport './styles.css';\nbootstrapApplication(AppComponent);` },
190
+ { path: 'src/app/app.component.ts', content: `import { Component } from '@angular/core';\n@Component({\n selector: 'app-root',\n standalone: true,\n template: \`\n <main class="hero">\n <div class="hero-glow"></div>\n <div class="container">\n <div class="badge">Engine v1.0.4 Ready</div>\n <h1 class="hero-title">Nuclie x <span class="gradient-text">Angular</span></h1>\n <p class="hero-subtitle">Scaling web apps with ease.</p>\n <button class="btn-primary" (click)="count = count + 1">Interactions: {{count}}</button>\n </div>\n </main>\n \`\n})\nexport class AppComponent { count = 0; }` },
191
+ { path: 'src/styles.css', content: PREMIUM_CSS.replace('--primary: #00e5ff;', '--primary: #dd0031;') }
192
+ ],
193
+ dependencies: { "@angular/core": "latest", "@angular/platform-browser": "latest" },
194
+ devDependencies: {}
195
+ },
196
+ 'qwik': {
197
+ id: 'qwik',
198
+ name: 'Qwik',
199
+ description: 'Qwik + Resumable + Premium UI',
200
+ files: [
201
+ ...COMMON_FILES,
202
+ { path: 'index.html', content: `<!DOCTYPE html><html><head><link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet"></head><body><div id="app"></div><script type="module" src="/src/main.tsx"></script></body></html>` },
203
+ { path: 'src/main.tsx', content: `import { render } from '@builder.io/qwik';\nimport { App } from './app';\nimport './styles/global.css';\nrender(document.getElementById('app')!, <App />);` },
204
+ { path: 'src/app.tsx', content: `import { component$, useStore } from '@builder.io/qwik';\nexport const App = component$(() => {\n const state = useStore({ count: 0 });\n return (<main class="hero"><div class="hero-glow"></div><div class="container"><div class="badge">Engine v1.0.4 Ready</div><h1 class="hero-title">Nuclie x <span class="gradient-text">Qwik</span></h1><button class="btn-primary" onClick$={() => state.count++}>Interactions: {state.count}</button></div></main>);\n});` },
205
+ { path: 'src/styles/global.css', content: PREMIUM_CSS.replace('--primary: #00e5ff;', '--primary: #ac7ff4;') }
206
+ ],
207
+ dependencies: { "@builder.io/qwik": "latest" },
208
+ devDependencies: {}
209
+ },
210
+ 'astro': {
211
+ id: 'astro',
212
+ name: 'Astro',
213
+ description: 'Astro + Content + Premium UI',
214
+ files: [
215
+ ...COMMON_FILES,
216
+ { path: 'src/pages/index.astro', content: `--- \nimport '../styles/global.css';\n---\n<html lang="en"><body><main class="hero"><div class="hero-glow"></div><div class="container"><h1 class="hero-title">Nuclie x <span class="gradient-text">Astro</span></h1><button class="btn-primary">Ships Fast</button></div></main></body></html>` },
217
+ { path: 'src/styles/global.css', content: PREMIUM_CSS.replace('--primary: #00e5ff;', '--primary: #ff5d01;') }
218
+ ],
219
+ dependencies: { "astro": "latest" },
220
+ devDependencies: {}
221
+ },
222
+ 'next': {
223
+ id: 'next',
224
+ name: 'Next-like',
225
+ description: 'React SSR Routing + Premium UI',
226
+ files: [
227
+ ...COMMON_FILES,
228
+ { path: 'index.html', content: `<!DOCTYPE html><html><head><link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet"></head><body><div id="root"></div><script type="module" src="/src/main.tsx"></script></body></html>` },
229
+ { path: 'src/main.tsx', content: `import React, { useState } from 'react';\nimport ReactDOM from 'react-dom/client';\nimport './styles/global.css';\nfunction App() {\n const [count, setCount] = useState(0);\n return (<main class="hero"><div class="hero-glow"></div><div class="container"><div class="badge">Engine v1.0.4 Ready</div><h1 class="hero-title">Nuclie x <span class="gradient-text">Next-like</span></h1><button class="btn-primary" onClick={() => setCount(c => c+1)}>Interactions: {count}</button></div></main>);\n}\nReactDOM.createRoot(document.getElementById('root')!).render(<App />);` },
230
+ { path: 'src/styles/global.css', content: PREMIUM_CSS }
231
+ ],
232
+ dependencies: { "react": "latest", "react-dom": "latest", "wouter": "latest" },
233
+ devDependencies: { "@types/react": "latest", "@types/react-dom": "latest" }
234
+ },
235
+ 'nuxt': {
236
+ id: 'nuxt',
237
+ name: 'Nuxt-like',
238
+ description: 'Vue Meta Framework + Premium UI',
239
+ files: [
240
+ ...COMMON_FILES,
241
+ { path: 'index.html', content: `<!DOCTYPE html><html><head><link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet"></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body></html>` },
242
+ { path: 'src/main.ts', content: `import { createApp } from 'vue';\nimport App from './App.vue';\nimport './styles/global.css';\ncreateApp(App).mount('#app');` },
243
+ { path: 'src/App.vue', content: `<script setup>\nimport { ref } from 'vue';\nconst count = ref(0);\n</script>\n<template><main class="hero"><div class="hero-glow"></div><div class="container"><div class="badge">Engine v1.0.4 Ready</div><h1 class="hero-title">Nuclie x <span class="gradient-text">Nuxt-like</span></h1><button class="btn-primary" @click="count++">Interactions: {{count}}</button></div></main></template>` },
244
+ { path: 'src/styles/global.css', content: PREMIUM_CSS.replace('--primary: #00e5ff;', '--primary: #00dc82;') }
245
+ ],
246
+ dependencies: { "vue": "latest" },
247
+ devDependencies: {}
248
+ },
249
+ 'sveltekit': {
250
+ id: 'sveltekit',
251
+ name: 'SvelteKit-like',
252
+ description: 'Svelte Fullstack + Premium UI',
253
+ files: [
254
+ ...COMMON_FILES,
255
+ { path: 'index.html', content: `<!DOCTYPE html><html><head><link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet"></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body></html>` },
256
+ { path: 'src/main.ts', content: `import { mount } from 'svelte';\nimport App from './App.svelte';\nimport './styles/global.css';\nmount(App, { target: document.getElementById('app')! });` },
257
+ { path: 'src/App.svelte', content: `<script>\n let count = $state(0);\n</script>\n<main class="hero"><div class="hero-glow"></div><div class="container"><div class="badge">Engine v1.0.4 Ready</div><h1 class="hero-title">Nuclie x <span class="gradient-text">SvelteKit-like</span></h1><button class="btn-primary" onclick={() => count++}>Interactions: {count}</button></div></main>` },
258
+ { path: 'src/styles/global.css', content: PREMIUM_CSS.replace('--primary: #00e5ff;', '--primary: #ff3e00;') }
259
+ ],
260
+ dependencies: { "svelte": "latest" },
261
+ devDependencies: {}
262
+ }
75
263
  };
@@ -655,15 +655,19 @@ export async function startDevServer(cliCfg, existingServer) {
655
655
  }
656
656
  }
657
657
  try {
658
- // Inject entry point if not present (simple heuristic)
659
- // Angular CLI projects often don't have the script tag in source index.html
660
- if (!data.includes('src="main.ts"') && !data.includes('src="/src/main.ts"')) {
661
- // Try to inject main entry point script at the end of body
662
- // We need to guess the entry point or use config.
663
- // Config has cfg.entry which is an array.
658
+ // Inject entry point if not present (heuristic)
659
+ // Check for any script tag pointing to entry files
660
+ const hasEntryScript = cfg.entry?.some(entry => {
661
+ const entryPath = entry.startsWith('/') ? entry : `/${entry}`;
662
+ // Match src="/src/main.tsx", src="src/main.tsx", src='src/main.tsx' etc.
663
+ const escaped = entryPath.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
664
+ const regex = new RegExp(`src=["']?\\.?${escaped}["']?`, 'i');
665
+ return regex.test(data);
666
+ });
667
+ if (!hasEntryScript) {
664
668
  if (cfg.entry && cfg.entry.length > 0) {
665
669
  const entryScript = `<script type="module" src="/${cfg.entry[0]}"></script>`;
666
- data = data.replace('</body>', `${entryScript}</body>`);
670
+ data = data.replace('</body>', ` ${entryScript}\n</body>`);
667
671
  }
668
672
  }
669
673
  // Inject only client runtime
@@ -1 +1 @@
1
- export declare function bootstrapProject(cwd: string, template?: string): Promise<void>;
1
+ export declare function bootstrapProject(cwd: string, templateId?: string): Promise<void>;
@@ -1,12 +1,22 @@
1
1
  import fs from 'fs/promises';
2
2
  import path from 'path';
3
3
  import { log } from '../utils/logger.js';
4
- export async function bootstrapProject(cwd, template = 'react') {
5
- log.info(`Bootstrapping new ${template} project in ${cwd}`);
4
+ import { TEMPLATES } from '../create-nuclie/templates.js';
5
+ export async function bootstrapProject(cwd, templateId = 'react-ts') {
6
+ log.info(`Bootstrapping new ${templateId} project in ${cwd}`);
7
+ // Normalize template name
8
+ const tid = templateId === 'react' ? 'react-ts' : templateId;
9
+ const template = TEMPLATES[tid] || TEMPLATES['react-ts'];
6
10
  // 1. Create directory structure
7
- await fs.mkdir(path.join(cwd, 'src'), { recursive: true });
8
- await fs.mkdir(path.join(cwd, 'public'), { recursive: true });
9
- // 2. Create package.json
11
+ await fs.mkdir(cwd, { recursive: true });
12
+ // 2. Create Files from template
13
+ for (const file of template.files) {
14
+ const filePath = path.join(cwd, file.path);
15
+ const dir = path.dirname(filePath);
16
+ await fs.mkdir(dir, { recursive: true });
17
+ await fs.writeFile(filePath, file.content);
18
+ }
19
+ // 3. Create package.json
10
20
  let nuclieVersion = 'latest';
11
21
  try {
12
22
  const localPkgPath = new URL('../../package.json', import.meta.url);
@@ -24,92 +34,13 @@ export async function bootstrapProject(cwd, template = 'react') {
24
34
  "build": "nuclie build",
25
35
  "preview": "nuclie dev --port 4173"
26
36
  },
27
- dependencies: (template === 'react' || template === 'react-ts') ? {
28
- "react": "^19.2.3",
29
- "react-dom": "^19.2.3"
30
- } : {},
37
+ dependencies: template.dependencies,
31
38
  devDependencies: {
32
- "nuclie": nuclieVersion,
33
- "typescript": "^5.0.0",
34
- "@types/react": "^19.0.0",
35
- "@types/react-dom": "^19.0.0"
39
+ ...template.devDependencies,
40
+ "nuclie": nuclieVersion
36
41
  }
37
42
  };
38
43
  await fs.writeFile(path.join(cwd, 'package.json'), JSON.stringify(pkg, null, 2));
39
- // 3. Create initial source files
40
- if (template === 'react' || template === 'react-ts') {
41
- await fs.writeFile(path.join(cwd, 'src/main.tsx'), `
42
- import React from 'react';
43
- import ReactDOM from 'react-dom/client';
44
- import App from './App';
45
- import './index.css';
46
-
47
- ReactDOM.createRoot(document.getElementById('root')!).render(
48
- <React.StrictMode>
49
- <App />
50
- </React.StrictMode>
51
- );
52
- `.trim());
53
- await fs.writeFile(path.join(cwd, 'src/App.tsx'), `
54
- import React, { useState } from 'react';
55
-
56
- function App() {
57
- const [count, setCount] = useState(0);
58
-
59
- return (
60
- <div className="App">
61
- <h1>Nuclie + React</h1>
62
- <div className="card">
63
- <button onClick={() => setCount((count) => count + 1)}>
64
- count is {count}
65
- </button>
66
- </div>
67
- </div>
68
- );
69
- }
70
-
71
- export default App;
72
- `.trim());
73
- await fs.writeFile(path.join(cwd, 'src/index.css'), `
74
- body {
75
- margin: 0;
76
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
77
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
78
- sans-serif;
79
- -webkit-font-smoothing: antialiased;
80
- -moz-osx-font-smoothing: grayscale;
81
- background-color: #242424;
82
- color: white;
83
- display: flex;
84
- place-items: center;
85
- min-width: 320px;
86
- min-height: 100vh;
87
- }
88
- `.trim());
89
- }
90
- // 4. Create index.html
91
- await fs.writeFile(path.join(cwd, 'index.html'), `
92
- <!DOCTYPE html>
93
- <html lang="en">
94
- <head>
95
- <meta charset="UTF-8" />
96
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
97
- <title>Nuclie App</title>
98
- </head>
99
- <body>
100
- <div id="root"></div>
101
- <script type="module" src="/src/main.tsx"></script>
102
- </body>
103
- </html>
104
- `.trim());
105
- // 5. Create nuclie.config.json
106
- const config = {
107
- entry: ["src/main.tsx"],
108
- mode: "development",
109
- preset: "spa",
110
- platform: "browser"
111
- };
112
- await fs.writeFile(path.join(cwd, 'nuclie.config.json'), JSON.stringify(config, null, 2));
113
- log.success(`Successfully bootstrapped ${template} project!`);
44
+ log.success(`Successfully bootstrapped ${template.name} in ${cwd}`);
114
45
  log.info(`To get started:\n cd ${path.basename(cwd)}\n npm install\n npm run dev`);
115
46
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nuclie",
3
- "version": "1.0.3",
3
+ "version": "1.0.5",
4
4
  "description": "⚡ Fast build tool with HMR, source maps, tree shaking, and module federation",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -166,4 +166,4 @@
166
166
  "tsx": "^4.21.0",
167
167
  "typescript": "^5.4.2"
168
168
  }
169
- }
169
+ }