create-vorzelajs 0.0.1 → 0.0.3

package/dist/index.js

@@ -5,16 +5,9 @@ import url from 'node:url';
 import prompts from 'prompts';
 const __filename = url.fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-// Templates ship inside the vorzelajs package
+// Templates are bundled inside create-vorzelajs at package root
 function resolveTemplatesDir() {
-    try {
-        const vorzelaRoot = path.dirname(require.resolve('vorzelajs/package.json'));
-        return path.join(vorzelaRoot, 'templates');
-    }
-    catch {
-        // Fallback: assume templates are sibling to create-vorzelajs
-        return path.resolve(__dirname, '..', '..', 'templates');
-    }
+    return path.resolve(__dirname, '..', 'templates');
 }
 async function copyDir(src, dest) {
     await fs.mkdir(dest, { recursive: true });
@@ -50,7 +43,7 @@ function generatePackageJson(config) {
             check: 'tsc --noEmit',
         },
         dependencies: {
-            vorzelajs: '^0.0.1',
+            vorzelajs: '^0.0.2',
             'solid-js': '^1.9',
         },
         devDependencies: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vorzelajs",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "description": "Create a new VorzelaJs project",
   "license": "MIT",
@@ -10,13 +10,15 @@
     "directory": "create-vorzelajs"
   },
   "bin": {
-    "create-vorzelajs": "./dist/index.js"
+    "create-vorzelajs": "dist/index.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "templates"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.json"
+    "build": "tsc -p tsconfig.json",
+    "prepack": "node --input-type=module -e \"import fs from 'node:fs'; fs.cpSync('../templates', 'templates', { recursive: true })\""
   },
   "dependencies": {
     "prompts": "^2.4.2"

package/templates/bare/README.md

@@ -0,0 +1,22 @@
+# My App
+
+Built with [VorzelaJs](https://github.com/vorzela/VorzelaJS).
+
+## Getting Started
+
+```bash
+npm run dev     # Start dev server
+npm run build   # Build for production
+npm run serve   # Serve production build
+```
+
+## Project Structure
+
+```
+src/
+├── routes/         # File-based routes
+│   ├── __root.tsx  # Root layout
+│   └── index.tsx   # Home page (/)
+├── components/     # Reusable components
+└── styles.css      # Global styles
+```

package/templates/bare/src/components/counter-card.tsx

@@ -0,0 +1,19 @@
+import { createSignal } from 'solid-js'
+
+export function CounterCard() {
+  const [count, setCount] = createSignal(0)
+
+  return (
+    <div class="counter-card">
+      <p class="counter-value">{count()}</p>
+      <div class="counter-actions">
+        <button onClick={() => setCount((c) => c - 1)} class="counter-btn">
+          −
+        </button>
+        <button onClick={() => setCount((c) => c + 1)} class="counter-btn">
+          +
+        </button>
+      </div>
+    </div>
+  )
+}

package/templates/bare/src/routes/__root.tsx

@@ -0,0 +1,24 @@
+import { createRootRoute, Outlet } from 'vorzelajs'
+
+export const Route = createRootRoute()({
+  component: RootLayout,
+  head: () => ({
+    meta: [
+      { name: 'description', content: 'Built with VorzelaJs' },
+    ],
+  }),
+  notFoundComponent: () => (
+    <div class="not-found">
+      <h1>404</h1>
+      <p>Page not found</p>
+    </div>
+  ),
+})
+
+function RootLayout() {
+  return (
+    <div class="app">
+      <Outlet />
+    </div>
+  )
+}

package/templates/bare/src/routes/index.tsx

@@ -0,0 +1,36 @@
+import { createFileRoute } from 'vorzelajs'
+import { CounterCard } from '../components/counter-card'
+
+export const Route = createFileRoute('/')({
+  component: HomePage,
+  head: () => ({
+    title: 'VorzelaJs',
+  }),
+})
+
+function HomePage() {
+  return (
+    <main class="hero">
+      <div class="hero-content">
+        <h1 class="hero-title">VorzelaJs</h1>
+        <p class="hero-description">
+          A batteries-included SolidJS framework with file-based routing, streamed SSR, and server-only boundaries.
+        </p>
+
+        <CounterCard />
+
+        <nav class="hero-links">
+          <a href="https://github.com/vorzela/VorzelaJS" target="_blank" rel="noopener noreferrer" class="link">
+            GitHub
+          </a>
+          <a href="https://github.com/vorzela/VorzelaJS#readme" target="_blank" rel="noopener noreferrer" class="link">
+            Documentation
+          </a>
+          <a href="https://www.npmjs.com/package/vorzelajs" target="_blank" rel="noopener noreferrer" class="link">
+            npm
+          </a>
+        </nav>
+      </div>
+    </main>
+  )
+}

package/templates/base/gitignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+src/routeTree.gen.ts
+src/routeHydration.gen.ts

package/templates/base/public/favicon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <rect width="32" height="32" rx="6" fill="#1a1a2e"/>
+  <path d="M8 10l8-4 8 4v12l-8 4-8-4V10z" stroke="#7c3aed" stroke-width="1.5" fill="none"/>
+  <path d="M16 6v20M8 10l8 6 8-6" stroke="#7c3aed" stroke-width="1.5" fill="none" opacity="0.5"/>
+</svg>

package/templates/base/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "strict": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/templates/modern/README.md

@@ -0,0 +1,28 @@
+# My App
+
+Built with [VorzelaJs](https://github.com/vorzela/VorzelaJS).
+
+## Getting Started
+
+```bash
+npm run dev     # Start dev server
+npm run build   # Build for production
+npm run serve   # Serve production build
+```
+
+## Project Structure
+
+```
+src/
+├── routes/         # File-based routes
+│   ├── __root.tsx  # Root layout
+│   ├── index.tsx   # Home page (/)
+│   └── about.tsx   # About page (/about)
+├── components/     # Reusable components
+└── styles.css      # Global styles
+```
+
+## Learn More
+
+- [VorzelaJs Documentation](https://github.com/vorzela/VorzelaJS#readme)
+- [SolidJS](https://www.solidjs.com/)

package/templates/modern/src/components/counter-card.tsx

@@ -0,0 +1,19 @@
+import { createSignal } from 'solid-js'
+
+export function CounterCard() {
+  const [count, setCount] = createSignal(0)
+
+  return (
+    <div class="counter-card">
+      <p class="counter-value">{count()}</p>
+      <div class="counter-actions">
+        <button onClick={() => setCount((c) => c - 1)} class="counter-btn">
+          −
+        </button>
+        <button onClick={() => setCount((c) => c + 1)} class="counter-btn">
+          +
+        </button>
+      </div>
+    </div>
+  )
+}

package/templates/modern/src/routes/__root.tsx

@@ -0,0 +1,42 @@
+import { createRootRoute, Link, Outlet } from 'vorzelajs'
+
+export const Route = createRootRoute()({
+  component: RootLayout,
+  head: () => ({
+    meta: [
+      { name: 'description', content: 'Built with VorzelaJs' },
+    ],
+  }),
+  notFoundComponent: () => (
+    <div class="not-found">
+      <h1>404</h1>
+      <p>Page not found</p>
+      <Link to="/" class="link">
+        Go home
+      </Link>
+    </div>
+  ),
+})
+
+function RootLayout() {
+  return (
+    <div class="app">
+      <header class="header">
+        <nav class="nav">
+          <Link to="/" class="nav-brand">
+            VorzelaJs
+          </Link>
+          <div class="nav-links">
+            <Link to="/" class="nav-link">
+              Home
+            </Link>
+            <Link to="/about" class="nav-link">
+              About
+            </Link>
+          </div>
+        </nav>
+      </header>
+      <Outlet />
+    </div>
+  )
+}

package/templates/modern/src/routes/about.tsx

@@ -0,0 +1,55 @@
+import { createFileRoute } from 'vorzelajs'
+
+export const Route = createFileRoute('/about')({
+  component: AboutPage,
+  head: () => ({
+    title: 'About — VorzelaJs',
+  }),
+})
+
+function AboutPage() {
+  return (
+    <main class="page">
+      <div class="page-content">
+        <h1>About VorzelaJs</h1>
+        <p>
+          VorzelaJs is a batteries-included SolidJS framework. Here's how your project is structured:
+        </p>
+
+        <section class="guide-section">
+          <h2>Project Structure</h2>
+          <pre class="code-block">{`src/
+├── routes/         # File-based routes
+│   ├── __root.tsx  # Root layout (wraps all pages)
+│   ├── index.tsx   # Home page (/)
+│   └── about.tsx   # This page (/about)
+├── components/     # Reusable components
+└── styles.css      # Global styles`}</pre>
+        </section>
+
+        <section class="guide-section">
+          <h2>Routes</h2>
+          <p>
+            Each file in <code>src/routes/</code> becomes a route. Use <code>createFileRoute</code> to define
+            loaders, head tags, and components. Files prefixed with <code>_</code> are pathless layout routes.
+          </p>
+        </section>
+
+        <section class="guide-section">
+          <h2>Server Boundaries</h2>
+          <p>
+            Name files with <code>.server.ts</code> to keep code server-only. Route <code>loader</code> and{' '}
+            <code>beforeLoad</code> functions run exclusively on the server and are stripped from the client bundle.
+          </p>
+        </section>
+
+        <section class="guide-section">
+          <h2>Commands</h2>
+          <pre class="code-block">{`npm run dev     # Start dev server
+npm run build   # Build for production
+npm run serve   # Serve production build`}</pre>
+        </section>
+      </div>
+    </main>
+  )
+}

package/templates/modern/src/routes/index.tsx

@@ -0,0 +1,51 @@
+import { createFileRoute } from 'vorzelajs'
+import { CounterCard } from '../components/counter-card'
+
+export const Route = createFileRoute('/')({
+  component: HomePage,
+  head: () => ({
+    title: 'VorzelaJs',
+  }),
+})
+
+function HomePage() {
+  return (
+    <main class="hero">
+      <div class="hero-content">
+        <h1 class="hero-title">VorzelaJs</h1>
+        <p class="hero-description">
+          A batteries-included SolidJS framework with file-based routing, streamed SSR, and server-only boundaries.
+        </p>
+
+        <CounterCard />
+
+        <div class="features">
+          <div class="feature-card">
+            <h3>File-Based Routing</h3>
+            <p>Drop a file in <code>src/routes/</code> and it becomes a route. Automatic code splitting included.</p>
+          </div>
+          <div class="feature-card">
+            <h3>Streamed SSR</h3>
+            <p>Server-rendered HTML streams to the browser with selective hydration per route.</p>
+          </div>
+          <div class="feature-card">
+            <h3>Server Boundaries</h3>
+            <p>Use <code>.server</code> files and route loaders to keep secrets on the server.</p>
+          </div>
+        </div>
+
+        <nav class="hero-links">
+          <a href="https://github.com/vorzela/VorzelaJS" target="_blank" rel="noopener noreferrer" class="link">
+            GitHub
+          </a>
+          <a href="https://github.com/vorzela/VorzelaJS#readme" target="_blank" rel="noopener noreferrer" class="link">
+            Documentation
+          </a>
+          <a href="https://www.npmjs.com/package/vorzelajs" target="_blank" rel="noopener noreferrer" class="link">
+            npm
+          </a>
+        </nav>
+      </div>
+    </main>
+  )
+}

package/templates/styling/css/styles.css

@@ -0,0 +1,269 @@
+:root {
+  --color-bg: #0a0a0f;
+  --color-surface: #15151e;
+  --color-border: #2a2a3e;
+  --color-text: #e4e4ef;
+  --color-text-muted: #8888a0;
+  --color-accent: #7c3aed;
+  --color-accent-hover: #6d28d9;
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-family: var(--font-sans);
+  background: var(--color-bg);
+  color: var(--color-text);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  min-height: 100dvh;
+}
+
+a {
+  color: var(--color-accent);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--color-accent-hover);
+}
+
+code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  background: var(--color-surface);
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+
+.app {
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  border-bottom: 1px solid var(--color-border);
+  padding: 0.75rem 1.5rem;
+}
+
+.nav {
+  max-width: 64rem;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.nav-brand {
+  font-weight: 700;
+  font-size: 1.125rem;
+  color: var(--color-text);
+}
+
+.nav-links {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.nav-link {
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+  transition: color 0.15s;
+}
+
+.nav-link:hover {
+  color: var(--color-text);
+}
+
+.hero {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 1.5rem;
+}
+
+.hero-content {
+  max-width: 40rem;
+  text-align: center;
+}
+
+.hero-title {
+  font-size: 3rem;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  background: linear-gradient(135deg, var(--color-accent) 0%, #a78bfa 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.hero-description {
+  margin-top: 1rem;
+  font-size: 1.125rem;
+  color: var(--color-text-muted);
+  line-height: 1.6;
+}
+
+.hero-links {
+  margin-top: 2rem;
+  display: flex;
+  gap: 1.5rem;
+  justify-content: center;
+}
+
+.link {
+  color: var(--color-accent);
+  font-weight: 500;
+  transition: color 0.15s;
+}
+
+.link:hover {
+  color: var(--color-accent-hover);
+}
+
+.counter-card {
+  margin-top: 2rem;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1.5rem;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.counter-value {
+  font-size: 2.5rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.counter-actions {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.counter-btn {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 8px;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-size: 1.25rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.counter-btn:hover {
+  background: var(--color-surface);
+  border-color: var(--color-accent);
+}
+
+.features {
+  margin-top: 3rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+  gap: 1rem;
+  text-align: left;
+}
+
+.feature-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1.25rem;
+}
+
+.feature-card h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.feature-card p {
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+  line-height: 1.5;
+}
+
+.page {
+  flex: 1;
+  padding: 3rem 1.5rem;
+}
+
+.page-content {
+  max-width: 48rem;
+  margin: 0 auto;
+}
+
+.page-content h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+}
+
+.page-content p {
+  color: var(--color-text-muted);
+  line-height: 1.6;
+  margin-bottom: 1.5rem;
+}
+
+.guide-section {
+  margin-top: 2rem;
+}
+
+.guide-section h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+}
+
+.code-block {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 1rem;
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+  overflow-x: auto;
+  white-space: pre;
+}
+
+.not-found {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 0.5rem;
+}
+
+.not-found h1 {
+  font-size: 4rem;
+  font-weight: 800;
+  color: var(--color-text-muted);
+}
+
+.not-found p {
+  color: var(--color-text-muted);
+}

package/templates/styling/css-modules/styles.css

@@ -0,0 +1,269 @@
+:root {
+  --color-bg: #0a0a0f;
+  --color-surface: #15151e;
+  --color-border: #2a2a3e;
+  --color-text: #e4e4ef;
+  --color-text-muted: #8888a0;
+  --color-accent: #7c3aed;
+  --color-accent-hover: #6d28d9;
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-family: var(--font-sans);
+  background: var(--color-bg);
+  color: var(--color-text);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  min-height: 100dvh;
+}
+
+a {
+  color: var(--color-accent);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--color-accent-hover);
+}
+
+code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  background: var(--color-surface);
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+
+.app {
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  border-bottom: 1px solid var(--color-border);
+  padding: 0.75rem 1.5rem;
+}
+
+.nav {
+  max-width: 64rem;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.nav-brand {
+  font-weight: 700;
+  font-size: 1.125rem;
+  color: var(--color-text);
+}
+
+.nav-links {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.nav-link {
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+  transition: color 0.15s;
+}
+
+.nav-link:hover {
+  color: var(--color-text);
+}
+
+.hero {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 1.5rem;
+}
+
+.hero-content {
+  max-width: 40rem;
+  text-align: center;
+}
+
+.hero-title {
+  font-size: 3rem;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  background: linear-gradient(135deg, var(--color-accent) 0%, #a78bfa 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.hero-description {
+  margin-top: 1rem;
+  font-size: 1.125rem;
+  color: var(--color-text-muted);
+  line-height: 1.6;
+}
+
+.hero-links {
+  margin-top: 2rem;
+  display: flex;
+  gap: 1.5rem;
+  justify-content: center;
+}
+
+.link {
+  color: var(--color-accent);
+  font-weight: 500;
+  transition: color 0.15s;
+}
+
+.link:hover {
+  color: var(--color-accent-hover);
+}
+
+.counter-card {
+  margin-top: 2rem;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1.5rem;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.counter-value {
+  font-size: 2.5rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.counter-actions {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.counter-btn {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 8px;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-size: 1.25rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.counter-btn:hover {
+  background: var(--color-surface);
+  border-color: var(--color-accent);
+}
+
+.features {
+  margin-top: 3rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+  gap: 1rem;
+  text-align: left;
+}
+
+.feature-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1.25rem;
+}
+
+.feature-card h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.feature-card p {
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+  line-height: 1.5;
+}
+
+.page {
+  flex: 1;
+  padding: 3rem 1.5rem;
+}
+
+.page-content {
+  max-width: 48rem;
+  margin: 0 auto;
+}
+
+.page-content h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+}
+
+.page-content p {
+  color: var(--color-text-muted);
+  line-height: 1.6;
+  margin-bottom: 1.5rem;
+}
+
+.guide-section {
+  margin-top: 2rem;
+}
+
+.guide-section h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+}
+
+.code-block {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 1rem;
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+  overflow-x: auto;
+  white-space: pre;
+}
+
+.not-found {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 0.5rem;
+}
+
+.not-found h1 {
+  font-size: 4rem;
+  font-weight: 800;
+  color: var(--color-text-muted);
+}
+
+.not-found p {
+  color: var(--color-text-muted);
+}

package/templates/styling/tailwind/styles.css

@@ -0,0 +1,271 @@
+@import "tailwindcss";
+
+:root {
+  --color-bg: #0a0a0f;
+  --color-surface: #15151e;
+  --color-border: #2a2a3e;
+  --color-text: #e4e4ef;
+  --color-text-muted: #8888a0;
+  --color-accent: #7c3aed;
+  --color-accent-hover: #6d28d9;
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-family: var(--font-sans);
+  background: var(--color-bg);
+  color: var(--color-text);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  min-height: 100dvh;
+}
+
+a {
+  color: var(--color-accent);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--color-accent-hover);
+}
+
+code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  background: var(--color-surface);
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+
+.app {
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  border-bottom: 1px solid var(--color-border);
+  padding: 0.75rem 1.5rem;
+}
+
+.nav {
+  max-width: 64rem;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.nav-brand {
+  font-weight: 700;
+  font-size: 1.125rem;
+  color: var(--color-text);
+}
+
+.nav-links {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.nav-link {
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+  transition: color 0.15s;
+}
+
+.nav-link:hover {
+  color: var(--color-text);
+}
+
+.hero {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 1.5rem;
+}
+
+.hero-content {
+  max-width: 40rem;
+  text-align: center;
+}
+
+.hero-title {
+  font-size: 3rem;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  background: linear-gradient(135deg, var(--color-accent) 0%, #a78bfa 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.hero-description {
+  margin-top: 1rem;
+  font-size: 1.125rem;
+  color: var(--color-text-muted);
+  line-height: 1.6;
+}
+
+.hero-links {
+  margin-top: 2rem;
+  display: flex;
+  gap: 1.5rem;
+  justify-content: center;
+}
+
+.link {
+  color: var(--color-accent);
+  font-weight: 500;
+  transition: color 0.15s;
+}
+
+.link:hover {
+  color: var(--color-accent-hover);
+}
+
+.counter-card {
+  margin-top: 2rem;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1.5rem;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.counter-value {
+  font-size: 2.5rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.counter-actions {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.counter-btn {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 8px;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-size: 1.25rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.counter-btn:hover {
+  background: var(--color-surface);
+  border-color: var(--color-accent);
+}
+
+.features {
+  margin-top: 3rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+  gap: 1rem;
+  text-align: left;
+}
+
+.feature-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1.25rem;
+}
+
+.feature-card h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.feature-card p {
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+  line-height: 1.5;
+}
+
+.page {
+  flex: 1;
+  padding: 3rem 1.5rem;
+}
+
+.page-content {
+  max-width: 48rem;
+  margin: 0 auto;
+}
+
+.page-content h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+}
+
+.page-content p {
+  color: var(--color-text-muted);
+  line-height: 1.6;
+  margin-bottom: 1.5rem;
+}
+
+.guide-section {
+  margin-top: 2rem;
+}
+
+.guide-section h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+}
+
+.code-block {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 1rem;
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+  overflow-x: auto;
+  white-space: pre;
+}
+
+.not-found {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 0.5rem;
+}
+
+.not-found h1 {
+  font-size: 4rem;
+  font-weight: 800;
+  color: var(--color-text-muted);
+}
+
+.not-found p {
+  color: var(--color-text-muted);
+}

package/templates/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "strict": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "types": ["vite/client"]
+  },
+  "include": ["bare/src", "modern/src"]
+}