@sigx/cli 0.1.0

package/dist/templates/ssr-daisyui/src/pages/Home.tsx

@@ -0,0 +1,133 @@
+import { component, effect } from 'sigx';
+import { Button, Card, Badge, Toggle, Stats, Stat, Hero } from '@sigx/daisyui';
+
+export const Home = component(({ signal }) => {
+    const state = signal({
+        count: 0,
+        autoIncrement: false,
+        elapsed: 0,
+    });
+
+    // Auto-increment effect — shows reactive effects in action
+    effect(() => {
+        if (!state.autoIncrement) return;
+        const timer = setInterval(() => state.count++, 800);
+        return () => clearInterval(timer);
+    });
+
+    // Elapsed timer — shows independent reactive state
+    effect(() => {
+        const timer = setInterval(() => state.elapsed++, 1000);
+        return () => clearInterval(timer);
+    });
+
+    const formatTime = (s: number) => {
+        const m = Math.floor(s / 60);
+        const sec = s % 60;
+        return `${m}:${sec.toString().padStart(2, '0')}`;
+    };
+
+    return () => (
+        <div>
+            {/* Hero */}
+            <Hero class="bg-base-100 py-20">
+                <Hero.Content>
+                    <div class="max-w-2xl">
+                        <h1 class="text-5xl font-bold leading-tight">
+                            Build Reactive Apps<br />
+                            <span class="text-primary">with SignalX</span>
+                        </h1>
+                        <p class="py-6 text-lg text-base-content/70">
+                            Fine-grained reactivity, SSR streaming, and a beautiful component library —
+                            everything you need to build modern web applications.
+                        </p>
+                        <div class="flex gap-3 justify-center">
+                            <Button variant="primary" size="lg">Get Started</Button>
+                            <Button variant="ghost" size="lg" outline>Documentation</Button>
+                        </div>
+                    </div>
+                </Hero.Content>
+            </Hero>
+
+            {/* Stats — all reactive */}
+            <div class="px-6 -mt-8 relative z-10 flex justify-center">
+                <Stats class="w-full max-w-3xl bg-base-100">
+                    <Stat title="Counter" value={state.count} description="Reactive signal" />
+                    <Stat title="Doubled" value={state.count * 2} description="Computed value" />
+                    <Stat title="Uptime" value={formatTime(state.elapsed)} description="Live timer" />
+                </Stats>
+            </div>
+
+            {/* Features */}
+            <section class="py-16 px-6">
+                <div class="max-w-5xl mx-auto">
+                    <h2 class="text-3xl font-bold text-center mb-12">Why SignalX?</h2>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                        <Card bordered>
+                            <Card.Body>
+                                <Card.Title>⚡ Fine-grained Reactivity</Card.Title>
+                                <p class="text-base-content/70">
+                                    Signals update only what changed — no virtual DOM diffing,
+                                    no unnecessary re-renders. Surgical precision updates.
+                                </p>
+                            </Card.Body>
+                        </Card>
+                        <Card bordered>
+                            <Card.Body>
+                                <Card.Title>🌊 SSR Streaming</Card.Title>
+                                <p class="text-base-content/70">
+                                    Server-side render your app with streaming HTML.
+                                    Instant first paint, seamless hydration, full interactivity.
+                                </p>
+                            </Card.Body>
+                        </Card>
+                        <Card bordered>
+                            <Card.Body>
+                                <Card.Title>🎨 DaisyUI Themes</Card.Title>
+                                <p class="text-base-content/70">
+                                    30+ built-in themes, dark mode, and full component library.
+                                    Switch the theme above to see it in action!
+                                </p>
+                            </Card.Body>
+                        </Card>
+                    </div>
+                </div>
+            </section>
+
+            {/* Interactive Demo */}
+            <section class="py-16 px-6 bg-base-100">
+                <div class="max-w-xl mx-auto">
+                    <h2 class="text-3xl font-bold text-center mb-2">Try It Live</h2>
+                    <p class="text-center text-base-content/60 mb-8">Interact with reactive signals right here</p>
+
+                    <Card shadow="lg" bordered>
+                        <Card.Body center>
+                            <div class="flex items-center gap-4 mb-6">
+                                <Badge variant="primary" size="lg">{state.count}</Badge>
+                                <span class="text-base-content/60">×2 =</span>
+                                <Badge variant="secondary" size="lg">{state.count * 2}</Badge>
+                            </div>
+                            <Card.Actions justify="center">
+                                <Button variant="primary" onClick={() => state.count++}>
+                                    + Increment
+                                </Button>
+                                <Button variant="error" outline onClick={() => state.count--}>
+                                    − Decrement
+                                </Button>
+                                <Button variant="ghost" onClick={() => (state.count = 0)}>
+                                    Reset
+                                </Button>
+                            </Card.Actions>
+                            <div class="divider">AUTO MODE</div>
+                            <Toggle
+                                onChange={(val: boolean) => (state.autoIncrement = val)}
+                                label="Auto-increment every 800ms"
+                                color="success"
+                            />
+                        </Card.Body>
+                    </Card>
+                </div>
+            </section>
+        </div>
+    );
+});

package/dist/templates/ssr-daisyui/src/router.ts

@@ -0,0 +1,27 @@
+import {
+    createRouter,
+    createWebHistory,
+    createMemoryHistory,
+    type RouteRecordRaw
+} from '@sigx/router';
+import { Home } from './pages/Home';
+import { About } from './pages/About';
+
+export const routes: RouteRecordRaw[] = [
+    { path: '/', name: 'home', component: Home },
+    { path: '/about', name: 'about', component: About }
+];
+
+export function createClientRouter() {
+    return createRouter({
+        history: createWebHistory(),
+        routes
+    });
+}
+
+export function createServerRouter(url: string) {
+    return createRouter({
+        history: createMemoryHistory({ initialLocation: url }),
+        routes
+    });
+}

package/dist/templates/ssr-daisyui/src/style.css

@@ -0,0 +1,5 @@
+@import "tailwindcss";
+@source "../../node_modules/@sigx/daisyui/dist/**/*.js";
+@plugin "daisyui" {
+  themes: light --default, dark --prefersdark, cupcake, synthwave, cyberpunk, dracula, nord, autumn;
+}

package/dist/templates/ssr-daisyui/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "target": "ESNext",
+        "jsx": "react-jsx",
+        "jsxImportSource": "sigx",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noEmit": true,
+        "skipLibCheck": true
+    },
+    "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

package/dist/templates/ssr-daisyui/vite.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite';
+import { sigxPlugin } from '@sigx/vite';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+    plugins: [
+        sigxPlugin(),
+        tailwindcss()
+    ],
+    build: {
+        outDir: 'dist/client'
+    },
+    // Vite 8 uses oxc instead of esbuild for JSX transforms
+    oxc: {
+        jsx: {
+            runtime: 'automatic',
+            importSource: 'sigx'
+        }
+    }
+});

package/dist/templates/ssr-tailwind/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}}</title>
+    <link rel="stylesheet" href="/src/style.css" />
+  </head>
+  <body class="bg-gray-100 text-gray-900">
+    <div id="app"><!--app-html--></div>
+    <script type="module" src="/src/entry-client.tsx"></script>
+  </body>
+</html>

package/dist/templates/ssr-tailwind/package.json

@@ -0,0 +1,26 @@
+{
+    "name": "{{projectName}}",
+    "version": "0.1.0",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "dev": "node server.js",
+        "build": "vite build && vite build --ssr src/entry-server.tsx --outDir dist/server",
+        "start": "cross-env NODE_ENV=production node server.js",
+        "preview": "cross-env NODE_ENV=production node server.js"
+    },
+    "dependencies": {
+        "sigx": "^0.4.1",
+        "@sigx/server-renderer": "^0.4.1",
+        "@sigx/router": "^0.3.2",
+        "express": "^4.18.2"
+    },
+    "devDependencies": {
+        "@sigx/vite": "^0.4.1",
+        "cross-env": "^7.0.3",
+        "vite": "^8.0.3",
+        "typescript": "^5.9.3",
+        "tailwindcss": "^4.1.0",
+        "@tailwindcss/vite": "^4.2.2"
+    }
+}

package/dist/templates/ssr-tailwind/src/App.tsx

@@ -0,0 +1,32 @@
+import { component } from 'sigx';
+import { RouterView, Link, useRoute } from '@sigx/router';
+
+export const App = component(() => {
+    const route = useRoute();
+
+    return () => (
+        <div class="max-w-2xl mx-auto p-10">
+            <header class="bg-gray-800 text-white p-4 mb-8 rounded-lg flex justify-between items-center">
+                <h1 class="text-xl font-bold">🚀 {{projectName}}</h1>
+                <nav class="flex gap-4">
+                    <Link
+                        to="/"
+                        class={`text-white no-underline px-4 py-2 rounded ${route.path === '/' ? 'bg-blue-500' : 'hover:bg-gray-700'}`}
+                    >
+                        Home
+                    </Link>
+                    <Link
+                        to="/about"
+                        class={`text-white no-underline px-4 py-2 rounded ${route.path === '/about' ? 'bg-blue-500' : 'hover:bg-gray-700'}`}
+                    >
+                        About
+                    </Link>
+                </nav>
+            </header>
+
+            <main class="bg-white p-8 rounded-lg shadow-sm">
+                <RouterView />
+            </main>
+        </div>
+    );
+});

package/dist/templates/ssr-tailwind/src/entry-client.tsx

@@ -0,0 +1,25 @@
+import { defineApp } from 'sigx';
+import { ssrClientPlugin } from '@sigx/server-renderer/client';
+import { App } from './App';
+import { createClientRouter } from './router';
+
+const router = createClientRouter();
+
+function startHydration() {
+    defineApp(<App />)
+        .use(router)
+        .use(ssrClientPlugin)
+        .hydrate('#app');
+}
+
+if (window.__SIGX_STREAMING_COMPLETE__) {
+    startHydration();
+} else {
+    window.addEventListener('sigx:ready', startHydration, { once: true });
+}
+
+declare global {
+    interface Window {
+        __SIGX_STREAMING_COMPLETE__?: boolean;
+    }
+}

package/dist/templates/ssr-tailwind/src/entry-server.tsx

@@ -0,0 +1,24 @@
+import { defineApp } from 'sigx';
+import { renderToString, renderToStreamWithCallbacks } from '@sigx/server-renderer/server';
+import { App } from './App';
+import { createServerRouter } from './router';
+
+function createApp(url: string) {
+    const router = createServerRouter(url);
+    return defineApp(<App />).use(router);
+}
+
+export async function render(url: string) {
+    const app = createApp(url);
+    return await renderToString(app);
+}
+
+export async function renderStreamWithCallback(url: string, callbacks: {
+    onShellReady: (html: string) => void;
+    onAsyncChunk: (chunk: string) => void;
+    onComplete: () => void;
+    onError: (error: Error) => void;
+}) {
+    const app = createApp(url);
+    return await renderToStreamWithCallbacks(app, callbacks);
+}

package/dist/templates/ssr-tailwind/src/pages/About.tsx

@@ -0,0 +1,21 @@
+import { component } from 'sigx';
+
+export const About = component(() => {
+    return () => (
+        <div>
+            <h2 class="text-2xl font-bold text-gray-800 mb-4">About</h2>
+            <p class="text-gray-600 mb-4">
+                This is a SignalX SSR application with streaming server-side rendering,
+                client-side hydration, and file-based routing.
+            </p>
+            <ul class="text-gray-600 space-y-2">
+                <li>⚡ Streaming SSR with Express</li>
+                <li>🔄 Client-side hydration</li>
+                <li>🧭 Router with <code class="bg-gray-200 px-2 py-1 rounded">@sigx/router</code></li>
+                <li>🎨 Tailwind CSS styling</li>
+                <li>📡 API routes ready (<code class="bg-gray-200 px-2 py-1 rounded">/api/hello</code>)</li>
+                <li>🏗️ Production build support</li>
+            </ul>
+        </div>
+    );
+});

package/dist/templates/ssr-tailwind/src/pages/Home.tsx

@@ -0,0 +1,31 @@
+import { component } from 'sigx';
+
+export const Home = component(({ signal }) => {
+    const state = signal({ count: 0 });
+
+    return () => (
+        <div>
+            <h2 class="text-2xl font-bold text-gray-800 mb-4">Home</h2>
+            <p class="text-gray-600 mb-6">
+                Welcome to your SignalX SSR app! Edit <code class="bg-gray-200 px-2 py-1 rounded">src/pages/Home.tsx</code> to get started.
+            </p>
+            <div class="bg-gray-50 p-8 rounded-xl text-center">
+                <p class="text-6xl font-bold mb-6">{state.count}</p>
+                <div class="flex gap-4 justify-center">
+                    <button
+                        onClick={() => state.count++}
+                        class="px-6 py-3 text-lg font-medium bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors cursor-pointer"
+                    >
+                        Increment
+                    </button>
+                    <button
+                        onClick={() => state.count--}
+                        class="px-6 py-3 text-lg font-medium bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors cursor-pointer"
+                    >
+                        Decrement
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+});

package/dist/templates/ssr-tailwind/src/router.ts

@@ -0,0 +1,27 @@
+import {
+    createRouter,
+    createWebHistory,
+    createMemoryHistory,
+    type RouteRecordRaw
+} from '@sigx/router';
+import { Home } from './pages/Home';
+import { About } from './pages/About';
+
+export const routes: RouteRecordRaw[] = [
+    { path: '/', name: 'home', component: Home },
+    { path: '/about', name: 'about', component: About }
+];
+
+export function createClientRouter() {
+    return createRouter({
+        history: createWebHistory(),
+        routes
+    });
+}
+
+export function createServerRouter(url: string) {
+    return createRouter({
+        history: createMemoryHistory({ initialLocation: url }),
+        routes
+    });
+}

package/dist/templates/ssr-tailwind/src/style.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/dist/templates/ssr-tailwind/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "target": "ESNext",
+        "jsx": "react-jsx",
+        "jsxImportSource": "sigx",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noEmit": true,
+        "skipLibCheck": true
+    },
+    "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

package/dist/templates/ssr-tailwind/vite.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite';
+import { sigxPlugin } from '@sigx/vite';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+    plugins: [
+        sigxPlugin(),
+        tailwindcss()
+    ],
+    build: {
+        outDir: 'dist/client'
+    },
+    // Vite 8 uses oxc instead of esbuild for JSX transforms
+    oxc: {
+        jsx: {
+            runtime: 'automatic',
+            importSource: 'sigx'
+        }
+    }
+});

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@sigx/cli",
+  "version": "0.1.0",
+  "description": "Unified CLI for SignalX — create, dev, build, and run projects",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "bin": {
+    "sigx": "./dist/cli.js"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./plugin": {
+      "import": "./dist/plugin.js",
+      "types": "./dist/plugin.d.ts"
+    },
+    "./create": {
+      "import": "./dist/commands/create.js",
+      "types": "./dist/commands/create.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "dependencies": {
+    "@sigx/terminal": "^0.3.2",
+    "citty": "^0.2.2"
+  },
+  "devDependencies": {
+    "@sigx/vite": "^0.4.1",
+    "@types/node": "^22.0.0",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.3"
+  },
+  "author": "Andreas Ekdahl",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/signalxjs/cli.git",
+    "directory": "packages/cli"
+  },
+  "homepage": "https://github.com/signalxjs/cli/tree/main/packages/cli",
+  "bugs": {
+    "url": "https://github.com/signalxjs/cli/issues"
+  },
+  "keywords": [
+    "signalx",
+    "sigx",
+    "cli",
+    "scaffold",
+    "create",
+    "plugin"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build && node scripts/generate-types.js && node scripts/copy-templates.js",
+    "dev": "vite build --watch"
+  }
+}

package/templates/basic/index.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}}</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        line-height: 1.6;
+        color: #333;
+        background: #f5f5f5;
+      }
+      
+      #app {
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 40px 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/App.tsx"></script>
+  </body>
+</html>

package/templates/basic/package.json

@@ -0,0 +1,19 @@
+{
+    "name": "{{projectName}}",
+    "version": "0.1.0",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "sigx": "^0.4.1"
+    },
+    "devDependencies": {
+        "@sigx/vite": "^0.4.1",
+        "vite": "^8.0.3",
+        "typescript": "^5.9.3"
+    }
+}

package/templates/basic/src/App.tsx

@@ -0,0 +1,35 @@
+import { component, defineApp } from "sigx";
+
+const Counter = component(({ signal }) => {
+    const state = signal({ count: 0 });
+
+    return () => (
+        <div style="text-align: center; padding: 40px;">
+            <h1 style="color: #2c3e50; margin-bottom: 20px;">
+                🚀 Welcome to sigx!
+            </h1>
+            <p style="color: #666; margin-bottom: 30px;">
+                Edit <code>src/App.tsx</code> to get started
+            </p>
+            <div style="background: white; padding: 30px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                <p style="font-size: 48px; margin-bottom: 20px;">
+                    {state.count}
+                </p>
+                <button
+                    onClick={() => state.count++}
+                    style="padding: 12px 24px; font-size: 16px; background: #3498db; color: white; border: none; border-radius: 6px; cursor: pointer; margin: 0 8px;"
+                >
+                    Increment
+                </button>
+                <button
+                    onClick={() => state.count--}
+                    style="padding: 12px 24px; font-size: 16px; background: #e74c3c; color: white; border: none; border-radius: 6px; cursor: pointer; margin: 0 8px;"
+                >
+                    Decrement
+                </button>
+            </div>
+        </div>
+    );
+});
+
+defineApp(Counter).mount('#app');

package/templates/basic/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "target": "ESNext",
+        "jsx": "react-jsx",
+        "jsxImportSource": "sigx",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noEmit": true,
+        "skipLibCheck": true
+    },
+    "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

package/templates/basic/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite';
+import { sigxPlugin } from '@sigx/vite';
+
+export default defineConfig({
+    plugins: [
+        sigxPlugin()
+    ],
+    // Vite 8 uses oxc instead of esbuild for JSX transforms
+    oxc: {
+        jsx: {
+            runtime: 'automatic',
+            importSource: 'sigx'
+        }
+    }
+});

package/templates/basic-daisyui/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en" data-theme="light">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}}</title>
+    <link rel="stylesheet" href="/src/style.css" />
+    <script>(function(){try{var t=localStorage.getItem('daisy-theme');if(!t&&window.matchMedia('(prefers-color-scheme:dark)').matches)t='dark';if(t)document.documentElement.setAttribute('data-theme',t);}catch(e){}})()</script>
+  </head>
+  <body class="bg-base-200 min-h-screen">
+    <div id="app"></div>
+    <script type="module" src="/src/App.tsx"></script>
+  </body>
+</html>