@gjsify/create-app 0.1.10 → 0.1.12

package/dist-templates/adw-canvas2d/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "new-gjsify-app",
+    "description": "Adwaita app with HTML Canvas 2D rendering (Blueprint UI).",
+    "version": "0.1.10",
+    "type": "module",
+    "private": true,
+    "scripts": {
+        "check": "tsc --noEmit",
+        "build": "gjsify build src/index.ts --outfile dist/index.js",
+        "start": "gjsify run dist/index.js",
+        "dev": "gjsify build src/index.ts --outfile dist/index.js && gjsify run dist/index.js"
+    },
+    "devDependencies": {
+        "@girs/adw-1": "^1.10.0-4.0.0-rc.3",
+        "@girs/gio-2.0": "^2.88.0-4.0.0-rc.3",
+        "@girs/gjs": "^4.0.0-rc.3",
+        "@girs/gobject-2.0": "^2.88.0-4.0.0-rc.3",
+        "@girs/gtk-4.0": "^4.23.0-4.0.0-rc.3",
+        "@gjsify/cli": "^0.1.12",
+        "@gjsify/esbuild-plugin-blueprint": "^0.1.12",
+        "@types/node": "^25.6.0",
+        "typescript": "^6.0.2"
+    },
+    "dependencies": {
+        "@gjsify/canvas2d": "^0.1.12"
+    }
+}

package/dist-templates/adw-canvas2d/src/draw.ts

@@ -0,0 +1,27 @@
+export function startAnimation(canvas: HTMLCanvasElement): void {
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    let t = 0;
+    const loop = () => {
+        const { width, height } = canvas;
+        ctx.fillStyle = '#1e1e2e';
+        ctx.fillRect(0, 0, width, height);
+
+        const cx = width / 2 + Math.cos(t * 0.02) * (width / 3);
+        const cy = height / 2 + Math.sin(t * 0.03) * (height / 3);
+
+        const grad = ctx.createRadialGradient(cx, cy, 10, cx, cy, 120);
+        grad.addColorStop(0, '#f5c2e7');
+        grad.addColorStop(1, 'rgba(245, 194, 231, 0)');
+        ctx.fillStyle = grad;
+        ctx.beginPath();
+        ctx.arc(cx, cy, 120, 0, Math.PI * 2);
+        ctx.fill();
+
+        t++;
+        requestAnimationFrame(loop);
+    };
+
+    requestAnimationFrame(loop);
+}

package/dist-templates/adw-canvas2d/src/index.ts

@@ -0,0 +1,19 @@
+import '@girs/gjs';
+import '@girs/gtk-4.0';
+
+import Adw from 'gi://Adw?version=1';
+import Gio from 'gi://Gio?version=2.0';
+import { MainWindow } from './main-window.js';
+
+const app = new Adw.Application({
+    application_id: 'org.gjsify.example',
+    flags: Gio.ApplicationFlags.FLAGS_NONE,
+});
+
+app.connect('activate', () => {
+    let win = app.get_active_window();
+    if (!win) win = new MainWindow(app);
+    win.present();
+});
+
+app.run([]);

package/dist-templates/adw-canvas2d/src/main-window.blp

@@ -0,0 +1,19 @@
+using Gtk 4.0;
+using Adw 1;
+
+template $MainWindow: Adw.ApplicationWindow {
+  default-width: 800;
+  default-height: 600;
+  title: "new-gjsify-app — Canvas 2D";
+
+  content: Gtk.Box {
+    orientation: vertical;
+
+    Adw.HeaderBar {}
+
+    Gtk.Box canvasContainer {
+      hexpand: true;
+      vexpand: true;
+    }
+  };
+}

package/dist-templates/adw-canvas2d/src/main-window.ts

@@ -0,0 +1,37 @@
+import GObject from 'gi://GObject?version=2.0';
+import type Gtk from 'gi://Gtk?version=4.0';
+import Adw from 'gi://Adw?version=1';
+import { Canvas2DWidget } from '@gjsify/canvas2d';
+import { startAnimation } from './draw.js';
+import Template from './main-window.blp';
+
+export class MainWindow extends Adw.ApplicationWindow {
+    declare private _canvasContainer: Gtk.Box;
+
+    static {
+        GObject.registerClass(
+            {
+                GTypeName: 'MainWindow',
+                Template,
+                InternalChildren: ['canvasContainer'],
+            },
+            this,
+        );
+    }
+
+    constructor(application: Adw.Application) {
+        super({ application });
+
+        const canvasWidget = new Canvas2DWidget();
+        canvasWidget.set_hexpand(true);
+        canvasWidget.set_vexpand(true);
+        canvasWidget.installGlobals();
+        this._canvasContainer.append(canvasWidget);
+
+        canvasWidget.onReady((canvas) => {
+            canvas.width = canvasWidget.get_allocated_width();
+            canvas.height = canvasWidget.get_allocated_height();
+            startAnimation(canvas);
+        });
+    }
+}

package/dist-templates/adw-canvas2d/tsconfig.json

@@ -0,0 +1,20 @@
+{
+    "compilerOptions": {
+        "rootDir": "src",
+        "outDir": "dist",
+        "target": "ESNext",
+        "module": "NodeNext",
+        "moduleResolution": "NodeNext",
+        "types": [
+            "node",
+            "@girs/gjs",
+            "@girs/gtk-4.0",
+            "@girs/adw-1",
+            "@gjsify/esbuild-plugin-blueprint/types"
+        ],
+        "esModuleInterop": true,
+        "strict": true,
+        "skipLibCheck": true
+    },
+    "include": ["src"]
+}

package/dist-templates/adw-game/package.json

@@ -0,0 +1,29 @@
+{
+    "name": "new-gjsify-app",
+    "description": "Adwaita game shell using Excalibur.js, WebGL → Canvas2D fallback.",
+    "version": "0.1.10",
+    "type": "module",
+    "private": true,
+    "scripts": {
+        "check": "tsc --noEmit",
+        "build": "gjsify build src/index.ts --outfile dist/index.js --globals auto,dom",
+        "start": "gjsify run dist/index.js",
+        "dev": "gjsify build src/index.ts --outfile dist/index.js --globals auto,dom && gjsify run dist/index.js"
+    },
+    "devDependencies": {
+        "@girs/adw-1": "^1.10.0-4.0.0-rc.3",
+        "@girs/gio-2.0": "^2.88.0-4.0.0-rc.3",
+        "@girs/gjs": "^4.0.0-rc.3",
+        "@girs/gobject-2.0": "^2.88.0-4.0.0-rc.3",
+        "@girs/gtk-4.0": "^4.23.0-4.0.0-rc.3",
+        "@gjsify/canvas2d": "^0.1.12",
+        "@gjsify/cli": "^0.1.12",
+        "@gjsify/esbuild-plugin-blueprint": "^0.1.12",
+        "@types/node": "^25.6.0",
+        "typescript": "^6.0.2"
+    },
+    "dependencies": {
+        "@gjsify/webgl": "^0.1.12",
+        "excalibur": "0.32.0"
+    }
+}

package/dist-templates/adw-game/src/game.ts

@@ -0,0 +1,25 @@
+import * as ex from 'excalibur';
+
+export async function startGame(canvas: HTMLCanvasElement): Promise<ex.Engine> {
+    const engine = new ex.Engine({
+        canvasElement: canvas as unknown as HTMLCanvasElement,
+        width: canvas.width,
+        height: canvas.height,
+        backgroundColor: ex.Color.fromHex('#1e1e2e'),
+        suppressPlayButton: true,
+    });
+
+    const player = new ex.Actor({
+        pos: ex.vec(canvas.width / 2, canvas.height / 2),
+        width: 60,
+        height: 60,
+        color: ex.Color.fromHex('#89b4fa'),
+    });
+    player.actions.repeatForever((ctx) => {
+        ctx.rotateBy(Math.PI, 1);
+    });
+
+    engine.add(player);
+    await engine.start();
+    return engine;
+}

package/dist-templates/adw-game/src/index.ts

@@ -0,0 +1,19 @@
+import '@girs/gjs';
+import '@girs/gtk-4.0';
+
+import Adw from 'gi://Adw?version=1';
+import Gio from 'gi://Gio?version=2.0';
+import { MainWindow } from './main-window.js';
+
+const app = new Adw.Application({
+    application_id: 'org.gjsify.example',
+    flags: Gio.ApplicationFlags.FLAGS_NONE,
+});
+
+app.connect('activate', () => {
+    let win = app.get_active_window();
+    if (!win) win = new MainWindow(app);
+    win.present();
+});
+
+app.run([]);

package/dist-templates/adw-game/src/main-window.blp

@@ -0,0 +1,19 @@
+using Gtk 4.0;
+using Adw 1;
+
+template $MainWindow: Adw.ApplicationWindow {
+  default-width: 800;
+  default-height: 600;
+  title: "new-gjsify-app — Game";
+
+  content: Gtk.Box {
+    orientation: vertical;
+
+    Adw.HeaderBar {}
+
+    Gtk.Box canvasContainer {
+      hexpand: true;
+      vexpand: true;
+    }
+  };
+}

package/dist-templates/adw-game/src/main-window.ts

@@ -0,0 +1,55 @@
+import GObject from 'gi://GObject?version=2.0';
+import type Gtk from 'gi://Gtk?version=4.0';
+import Adw from 'gi://Adw?version=1';
+import { CanvasWebGLWidget } from '@gjsify/webgl';
+import { Canvas2DWidget } from '@gjsify/canvas2d';
+import { startGame } from './game.js';
+import Template from './main-window.blp';
+
+export class MainWindow extends Adw.ApplicationWindow {
+    declare private _canvasContainer: Gtk.Box;
+
+    static {
+        GObject.registerClass(
+            {
+                GTypeName: 'MainWindow',
+                Template,
+                InternalChildren: ['canvasContainer'],
+            },
+            this,
+        );
+    }
+
+    constructor(application: Adw.Application) {
+        super({ application });
+        this._startWithWidget(false);
+    }
+
+    private _startWithWidget(useFallback: boolean): void {
+        let child = this._canvasContainer.get_first_child();
+        while (child) {
+            this._canvasContainer.remove(child);
+            child = this._canvasContainer.get_first_child();
+        }
+
+        const widget = useFallback ? new Canvas2DWidget() : new CanvasWebGLWidget();
+        widget.set_hexpand(true);
+        widget.set_vexpand(true);
+        widget.installGlobals();
+        this._canvasContainer.append(widget);
+
+        widget.onReady((canvas) => {
+            widget.grab_focus();
+            canvas.width = widget.get_allocated_width();
+            canvas.height = widget.get_allocated_height();
+            startGame(canvas).catch((err: Error) => {
+                if (useFallback) {
+                    console.error('Canvas 2D fallback also failed:', err.message);
+                } else {
+                    console.error('WebGL start failed, trying Canvas 2D fallback:', err.message);
+                    this._startWithWidget(true);
+                }
+            });
+        });
+    }
+}

package/dist-templates/adw-game/tsconfig.json

@@ -0,0 +1,20 @@
+{
+    "compilerOptions": {
+        "rootDir": "src",
+        "outDir": "dist",
+        "target": "ESNext",
+        "module": "NodeNext",
+        "moduleResolution": "NodeNext",
+        "types": [
+            "node",
+            "@girs/gjs",
+            "@girs/gtk-4.0",
+            "@girs/adw-1",
+            "@gjsify/esbuild-plugin-blueprint/types"
+        ],
+        "esModuleInterop": true,
+        "strict": true,
+        "skipLibCheck": true
+    },
+    "include": ["src"]
+}

package/dist-templates/adw-webgl/package.json

@@ -0,0 +1,29 @@
+{
+    "name": "new-gjsify-app",
+    "description": "Adwaita app with WebGL + three.js (Blueprint UI).",
+    "version": "0.1.10",
+    "type": "module",
+    "private": true,
+    "scripts": {
+        "check": "tsc --noEmit",
+        "build": "gjsify build src/index.ts --outfile dist/index.js",
+        "start": "gjsify run dist/index.js",
+        "dev": "gjsify build src/index.ts --outfile dist/index.js && gjsify run dist/index.js"
+    },
+    "devDependencies": {
+        "@girs/adw-1": "^1.10.0-4.0.0-rc.3",
+        "@girs/gio-2.0": "^2.88.0-4.0.0-rc.3",
+        "@girs/gjs": "^4.0.0-rc.3",
+        "@girs/gobject-2.0": "^2.88.0-4.0.0-rc.3",
+        "@girs/gtk-4.0": "^4.23.0-4.0.0-rc.3",
+        "@gjsify/cli": "^0.1.12",
+        "@gjsify/esbuild-plugin-blueprint": "^0.1.12",
+        "@types/node": "^25.6.0",
+        "@types/three": "^0.183.1",
+        "typescript": "^6.0.2"
+    },
+    "dependencies": {
+        "@gjsify/webgl": "^0.1.12",
+        "three": "0.183.2"
+    }
+}

package/dist-templates/adw-webgl/src/index.ts

@@ -0,0 +1,19 @@
+import '@girs/gjs';
+import '@girs/gtk-4.0';
+
+import Adw from 'gi://Adw?version=1';
+import Gio from 'gi://Gio?version=2.0';
+import { MainWindow } from './main-window.js';
+
+const app = new Adw.Application({
+    application_id: 'org.gjsify.example',
+    flags: Gio.ApplicationFlags.FLAGS_NONE,
+});
+
+app.connect('activate', () => {
+    let win = app.get_active_window();
+    if (!win) win = new MainWindow(app);
+    win.present();
+});
+
+app.run([]);

package/dist-templates/adw-webgl/src/main-window.blp

@@ -0,0 +1,19 @@
+using Gtk 4.0;
+using Adw 1;
+
+template $MainWindow: Adw.ApplicationWindow {
+  default-width: 800;
+  default-height: 600;
+  title: "new-gjsify-app — WebGL";
+
+  content: Gtk.Box {
+    orientation: vertical;
+
+    Adw.HeaderBar {}
+
+    Gtk.Box canvasContainer {
+      hexpand: true;
+      vexpand: true;
+    }
+  };
+}

package/dist-templates/adw-webgl/src/main-window.ts

@@ -0,0 +1,37 @@
+import GObject from 'gi://GObject?version=2.0';
+import type Gtk from 'gi://Gtk?version=4.0';
+import Adw from 'gi://Adw?version=1';
+import { CanvasWebGLWidget } from '@gjsify/webgl';
+import { startScene } from './scene.js';
+import Template from './main-window.blp';
+
+export class MainWindow extends Adw.ApplicationWindow {
+    declare private _canvasContainer: Gtk.Box;
+
+    static {
+        GObject.registerClass(
+            {
+                GTypeName: 'MainWindow',
+                Template,
+                InternalChildren: ['canvasContainer'],
+            },
+            this,
+        );
+    }
+
+    constructor(application: Adw.Application) {
+        super({ application });
+
+        const glArea = new CanvasWebGLWidget();
+        glArea.set_hexpand(true);
+        glArea.set_vexpand(true);
+        glArea.installGlobals();
+        this._canvasContainer.append(glArea);
+
+        glArea.onReady((canvas) => {
+            canvas.width = glArea.get_allocated_width();
+            canvas.height = glArea.get_allocated_height();
+            startScene(canvas);
+        });
+    }
+}

package/dist-templates/adw-webgl/src/scene.ts

@@ -0,0 +1,35 @@
+import * as THREE from 'three';
+
+export function startScene(canvas: HTMLCanvasElement): void {
+    // Three.js r163+ requires WebGL2.
+    const gl2 = canvas.getContext('webgl2') as WebGL2RenderingContext | null;
+    if (!gl2) throw new Error('WebGL2 context unavailable');
+
+    const renderer = new THREE.WebGLRenderer({ canvas, context: gl2 });
+    renderer.setSize(canvas.width, canvas.height, false);
+    renderer.setClearColor(0x1e1e2e);
+
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(60, canvas.width / canvas.height, 0.1, 100);
+    camera.position.z = 3;
+
+    const geometry = new THREE.BoxGeometry(1, 1, 1);
+    const material = new THREE.MeshNormalMaterial();
+    const cube = new THREE.Mesh(geometry, material);
+    scene.add(cube);
+
+    canvas.addEventListener('resize', () => {
+        renderer.setSize(canvas.width, canvas.height, false);
+        camera.aspect = canvas.width / canvas.height;
+        camera.updateProjectionMatrix();
+    });
+
+    const loop = () => {
+        cube.rotation.x += 0.01;
+        cube.rotation.y += 0.013;
+        renderer.render(scene, camera);
+        requestAnimationFrame(loop);
+    };
+
+    requestAnimationFrame(loop);
+}

package/dist-templates/adw-webgl/tsconfig.json

@@ -0,0 +1,20 @@
+{
+    "compilerOptions": {
+        "rootDir": "src",
+        "outDir": "dist",
+        "target": "ESNext",
+        "module": "NodeNext",
+        "moduleResolution": "NodeNext",
+        "types": [
+            "node",
+            "@girs/gjs",
+            "@girs/gtk-4.0",
+            "@girs/adw-1",
+            "@gjsify/esbuild-plugin-blueprint/types"
+        ],
+        "esModuleInterop": true,
+        "strict": true,
+        "skipLibCheck": true
+    },
+    "include": ["src"]
+}

package/{templates → dist-templates/cli}/package.json

@@ -1,5 +1,6 @@
 {
     "name": "new-gjsify-app",
+    "description": "Command-line tool using yargs (Node.js + GJS).",
     "version": "0.1.10",
     "type": "module",
     "private": true,
@@ -10,11 +11,14 @@
         "dev": "gjsify build src/index.ts --outfile dist/index.js && gjsify run dist/index.js"
     },
     "devDependencies": {
-        "@gjsify/cli": "^0.1.10",
+        "@gjsify/cli": "^0.1.12",
+        "@gjsify/node-globals": "^0.1.12",
+        "@gjsify/runtime": "^0.1.12",
         "@types/node": "^25.6.0",
+        "@types/yargs": "^17.0.35",
         "typescript": "^6.0.2"
     },
     "dependencies": {
-        "@girs/gtk-4.0": "^4.23.0-4.0.0-rc.2"
+        "yargs": "^18.0.0"
     }
 }

package/dist-templates/cli/src/index.ts

@@ -0,0 +1,37 @@
+import { runtimeName } from '@gjsify/runtime';
+import yargs from 'yargs';
+import { hideBin } from 'yargs/helpers';
+
+const c = {
+    reset:  '\x1b[0m',
+    bold:   '\x1b[1m',
+    dim:    '\x1b[2m',
+    cyan:   '\x1b[36m',
+    green:  '\x1b[32m',
+};
+
+yargs(hideBin(process.argv))
+    .scriptName('new-gjsify-app')
+    .usage(`\n${c.bold}new-gjsify-app${c.reset} — a gjsify CLI starter`)
+    .command(
+        'greet [name]',
+        'Print a greeting',
+        (y) => y.positional('name', { type: 'string', default: 'world' }),
+        (args) => {
+            console.log(`${c.cyan}Hello, ${c.bold}${args.name}${c.reset}${c.cyan}!${c.reset}`);
+        },
+    )
+    .command(
+        'info',
+        'Show runtime info',
+        () => {},
+        () => {
+            console.log(`${c.dim}runtime :${c.reset} ${c.green}${runtimeName}${c.reset}`);
+            console.log(`${c.dim}platform:${c.reset} ${process.platform}`);
+            console.log(`${c.dim}pid     :${c.reset} ${process.pid}`);
+        },
+    )
+    .demandCommand(1, 'Pass --help to see available commands.')
+    .strict()
+    .help()
+    .parse();

package/{templates → dist-templates/cli}/tsconfig.json

@@ -5,7 +5,7 @@
         "target": "ESNext",
         "module": "NodeNext",
         "moduleResolution": "NodeNext",
-        "types": ["node", "@girs/gtk-4.0"],
+        "types": ["node"],
         "esModuleInterop": true,
         "strict": true,
         "skipLibCheck": true

package/dist-templates/gtk-minimal/package.json

@@ -0,0 +1,23 @@
+{
+    "name": "new-gjsify-app",
+    "description": "Minimal GTK4 app — Gtk.Window + Gtk.Label (no Adwaita, no Blueprint).",
+    "version": "0.1.10",
+    "type": "module",
+    "private": true,
+    "scripts": {
+        "check": "tsc --noEmit",
+        "build": "gjsify build src/index.ts --outfile dist/index.js",
+        "start": "gjsify run dist/index.js",
+        "dev": "gjsify build src/index.ts --outfile dist/index.js && gjsify run dist/index.js"
+    },
+    "devDependencies": {
+        "@gjsify/cli": "^0.1.12",
+        "@types/node": "^25.6.0",
+        "typescript": "^6.0.2"
+    },
+    "dependencies": {
+        "@girs/gio-2.0": "^2.88.0-4.0.0-rc.3",
+        "@girs/glib-2.0": "^2.88.0-4.0.0-rc.3",
+        "@girs/gtk-4.0": "^4.23.0-4.0.0-rc.3"
+    }
+}

package/dist-templates/gtk-minimal/src/index.ts

@@ -0,0 +1,40 @@
+import Gtk from 'gi://Gtk?version=4.0';
+import Gio from 'gi://Gio?version=2.0';
+
+const app = new Gtk.Application({
+    applicationId: 'org.gjsify.example',
+    flags: Gio.ApplicationFlags.FLAGS_NONE,
+});
+
+app.connect('activate', () => {
+    const window = new Gtk.ApplicationWindow({
+        application: app,
+        title: 'new-gjsify-app',
+        defaultWidth: 480,
+        defaultHeight: 280,
+    });
+
+    const box = new Gtk.Box({
+        orientation: Gtk.Orientation.VERTICAL,
+        spacing: 12,
+        marginTop: 24,
+        marginBottom: 24,
+        marginStart: 24,
+        marginEnd: 24,
+    });
+
+    const title = new Gtk.Label({ label: 'Hello from gjsify!' });
+    title.add_css_class('title-2');
+
+    const hint = new Gtk.Label({
+        label: `Running on ${process.platform} · PID ${process.pid}`,
+        xalign: 0.5,
+    });
+
+    box.append(title);
+    box.append(hint);
+    window.set_child(box);
+    window.present();
+});
+
+app.run([]);

package/dist-templates/gtk-minimal/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "rootDir": "src",
+        "outDir": "dist",
+        "target": "ESNext",
+        "module": "NodeNext",
+        "moduleResolution": "NodeNext",
+        "types": ["node", "@girs/gtk-4.0", "@girs/gio-2.0", "@girs/glib-2.0"],
+        "esModuleInterop": true,
+        "strict": true,
+        "skipLibCheck": true
+    },
+    "include": ["src"]
+}

package/dist-templates/web-server-express/package.json

@@ -0,0 +1,24 @@
+{
+    "name": "new-gjsify-app",
+    "description": "HTTP server using Express (familiar Node.js stack).",
+    "version": "0.1.10",
+    "type": "module",
+    "private": true,
+    "scripts": {
+        "check": "tsc --noEmit",
+        "build": "gjsify build src/index.ts --outfile dist/index.js",
+        "start": "gjsify run dist/index.js",
+        "dev": "gjsify build src/index.ts --outfile dist/index.js && gjsify run dist/index.js"
+    },
+    "devDependencies": {
+        "@gjsify/cli": "^0.1.12",
+        "@gjsify/node-globals": "^0.1.12",
+        "@gjsify/runtime": "^0.1.12",
+        "@types/express": "^5.0.6",
+        "@types/node": "^25.6.0",
+        "typescript": "^6.0.2"
+    },
+    "dependencies": {
+        "express": "^5.2.1"
+    }
+}

package/dist-templates/web-server-express/src/index.ts

@@ -0,0 +1,27 @@
+import { runtimeName } from '@gjsify/runtime';
+import express, { type Request, type Response } from 'express';
+
+const app = express();
+app.use(express.json());
+
+app.get('/', (_req: Request, res: Response) => {
+    res.type('html').send(`<!doctype html>
+<html>
+  <head><meta charset="utf-8"><title>new-gjsify-app</title></head>
+  <body>
+    <h1>new-gjsify-app</h1>
+    <p>Runtime: <strong>${runtimeName}</strong></p>
+    <p>Try <a href="/api/ping">GET /api/ping</a></p>
+  </body>
+</html>`);
+});
+
+app.get('/api/ping', (_req: Request, res: Response) => {
+    res.json({ ok: true, runtime: runtimeName, time: new Date().toISOString() });
+});
+
+const PORT = parseInt(process.env.PORT ?? '3000', 10);
+app.listen(PORT, () => {
+    console.log(`Express server running at http://localhost:${PORT}`);
+    console.log(`Runtime: ${runtimeName}`);
+});

package/dist-templates/web-server-express/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "rootDir": "src",
+        "outDir": "dist",
+        "target": "ESNext",
+        "module": "NodeNext",
+        "moduleResolution": "NodeNext",
+        "types": ["node"],
+        "esModuleInterop": true,
+        "strict": true,
+        "skipLibCheck": true
+    },
+    "include": ["src"]
+}

package/dist-templates/web-server-hono/package.json

@@ -0,0 +1,24 @@
+{
+    "name": "new-gjsify-app",
+    "description": "HTTP server using Hono (Web-standard fetch-style API).",
+    "version": "0.1.10",
+    "type": "module",
+    "private": true,
+    "scripts": {
+        "check": "tsc --noEmit",
+        "build": "gjsify build src/index.ts --outfile dist/index.js",
+        "start": "gjsify run dist/index.js",
+        "dev": "gjsify build src/index.ts --outfile dist/index.js && gjsify run dist/index.js"
+    },
+    "devDependencies": {
+        "@gjsify/cli": "^0.1.12",
+        "@gjsify/node-globals": "^0.1.12",
+        "@gjsify/runtime": "^0.1.12",
+        "@types/node": "^25.6.0",
+        "typescript": "^6.0.2"
+    },
+    "dependencies": {
+        "@hono/node-server": "^1.19.14",
+        "hono": "^4.12.14"
+    }
+}

package/dist-templates/web-server-hono/src/index.ts

@@ -0,0 +1,21 @@
+import { runtimeName } from '@gjsify/runtime';
+import { Hono } from 'hono';
+import { serve } from '@hono/node-server';
+
+const app = new Hono();
+
+app.get('/', (c) =>
+    c.json({
+        name: 'new-gjsify-app',
+        runtime: runtimeName,
+        endpoints: ['GET /', 'GET /api/ping'],
+    }),
+);
+
+app.get('/api/ping', (c) => c.json({ ok: true, time: new Date().toISOString() }));
+
+const PORT = parseInt(process.env.PORT ?? '3000', 10);
+serve({ fetch: app.fetch, port: PORT }, (info) => {
+    console.log(`Hono server running at http://localhost:${info.port}`);
+    console.log(`Runtime: ${runtimeName}`);
+});

package/dist-templates/web-server-hono/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "rootDir": "src",
+        "outDir": "dist",
+        "target": "ESNext",
+        "module": "NodeNext",
+        "moduleResolution": "NodeNext",
+        "types": ["node"],
+        "esModuleInterop": true,
+        "strict": true,
+        "skipLibCheck": true
+    },
+    "include": ["src"]
+}

package/lib/create.d.ts

@@ -1 +1,14 @@
-export declare function createProject(projectName: string): Promise<void>;
+export { discoverTemplates, findTemplate } from './discover-templates.js';
+export type { TemplateInfo } from './discover-templates.js';
+export interface CreateProjectOptions {
+    projectName: string;
+    /** Template short name, e.g. "gtk-minimal". If omitted, the caller is responsible for providing one via prompt. */
+    template: string;
+    /** Allow scaffolding into an existing non-empty directory. */
+    force?: boolean;
+    /** Run `npm install` in the scaffolded directory after writing files. */
+    install?: boolean;
+}
+/** npm package names: lowercase, digits, -, _, .; no leading . or _. */
+export declare function sanitizeProjectName(raw: string): string;
+export declare function createProject(options: CreateProjectOptions): Promise<void>;

package/lib/create.js

@@ -1,33 +1,100 @@
-import { readFileSync, writeFileSync, mkdirSync, existsSync, cpSync } from 'node:fs';
-import { resolve, join, dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
-const __dirname = dirname(fileURLToPath(import.meta.url));
-export async function createProject(projectName) {
+import { spawnSync } from 'node:child_process';
+import { readFileSync, writeFileSync, mkdirSync, existsSync, readdirSync, cpSync } from 'node:fs';
+import { resolve, join } from 'node:path';
+import { discoverTemplates, findTemplate } from './discover-templates.js';
+export { discoverTemplates, findTemplate } from './discover-templates.js';
+/** Sentinel replaced by the user's project name in every text file under the template. */
+const PROJECT_NAME_SENTINEL = 'new-gjsify-app';
+/** File extensions we treat as text and scan for the sentinel. */
+const TEXT_FILE_EXT = new Set([
+    '.json', '.md', '.ts', '.tsx', '.js', '.mjs', '.cjs',
+    '.blp', '.html', '.css', '.scss', '.xml', '.ui', '.txt',
+]);
+/** npm package names: lowercase, digits, -, _, .; no leading . or _. */
+export function sanitizeProjectName(raw) {
+    const trimmed = raw.trim();
+    if (!trimmed)
+        throw new Error('Project name cannot be empty.');
+    const cleaned = trimmed
+        .toLowerCase()
+        .replace(/[^a-z0-9._-]+/g, '-')
+        .replace(/^[._-]+/, '')
+        .replace(/[._-]+$/, '');
+    if (!cleaned)
+        throw new Error(`"${raw}" is not a valid npm package name.`);
+    return cleaned;
+}
+function isDirEmpty(path) {
+    if (!existsSync(path))
+        return true;
+    return readdirSync(path).length === 0;
+}
+export async function createProject(options) {
+    const projectName = sanitizeProjectName(options.projectName);
+    const { template, force = false, install = false } = options;
+    const info = findTemplate(template);
+    if (!info) {
+        const available = discoverTemplates().map((t) => t.name).join(', ');
+        throw new Error(`Unknown template "${template}". Available templates: ${available || '(none — run "yarn build" first)'}`);
+    }
     const targetDir = resolve(process.cwd(), projectName);
-    if (existsSync(targetDir)) {
-        console.error(`Error: Directory "${projectName}" already exists.`);
+    if (existsSync(targetDir) && !isDirEmpty(targetDir) && !force) {
+        console.error(`Error: Directory "${projectName}" exists and is not empty. Use --force to scaffold into it anyway.`);
         process.exit(1);
     }
-    console.log(`Creating new Gjsify project in ${targetDir}...`);
-    // Create directory structure
-    mkdirSync(join(targetDir, 'src'), { recursive: true });
-    // Copy template files
-    const templatesDir = resolve(__dirname, '..', 'templates');
-    // Generate package.json from template (replaces sentinel name with project name)
-    const packageJsonTemplate = readFileSync(join(templatesDir, 'package.json'), 'utf-8');
-    const packageJson = packageJsonTemplate.replace(/new-gjsify-app/g, projectName);
-    writeFileSync(join(targetDir, 'package.json'), packageJson);
-    // Copy tsconfig.json
-    cpSync(join(templatesDir, 'tsconfig.json'), join(targetDir, 'tsconfig.json'));
-    // Copy src/index.ts
-    cpSync(join(templatesDir, 'src', 'index.ts'), join(targetDir, 'src', 'index.ts'));
+    console.log(`Creating new Gjsify project in ${targetDir} (template: ${info.name})...`);
+    mkdirSync(targetDir, { recursive: true });
+    cpSync(info.path, targetDir, { recursive: true });
+    substituteProjectName(targetDir, projectName);
+    if (install) {
+        console.log('Running npm install...');
+        const result = spawnSync('npm', ['install', '--no-audit', '--no-fund'], {
+            cwd: targetDir,
+            stdio: 'inherit',
+        });
+        if (result.status !== 0) {
+            console.warn('npm install failed; re-run it manually in the project directory.');
+        }
+    }
+    printNextSteps(projectName, info, install);
+}
+/**
+ * Walk the scaffolded tree and replace the sentinel in every text file.
+ * Skips node_modules / dist / lib and non-text files by extension.
+ */
+function substituteProjectName(rootDir, projectName) {
+    const skipDirs = new Set(['node_modules', 'dist', 'lib']);
+    const stack = [rootDir];
+    while (stack.length > 0) {
+        const dir = stack.pop();
+        for (const entry of readdirSync(dir, { withFileTypes: true })) {
+            const full = join(dir, entry.name);
+            if (entry.isDirectory()) {
+                if (!skipDirs.has(entry.name))
+                    stack.push(full);
+                continue;
+            }
+            if (!entry.isFile())
+                continue;
+            const dot = entry.name.lastIndexOf('.');
+            const ext = dot >= 0 ? entry.name.slice(dot) : '';
+            if (!TEXT_FILE_EXT.has(ext))
+                continue;
+            const content = readFileSync(full, 'utf-8');
+            if (!content.includes(PROJECT_NAME_SENTINEL))
+                continue;
+            writeFileSync(full, content.replaceAll(PROJECT_NAME_SENTINEL, projectName));
+        }
+    }
+}
+function printNextSteps(projectName, template, installed) {
     console.log('');
-    console.log('Project created successfully!');
+    console.log(`Project created from template "${template.name}".`);
     console.log('');
     console.log('Next steps:');
     console.log(`  cd ${projectName}`);
-    console.log('  npm install');
-    console.log('  npm run build');
-    console.log('  npm start');
+    if (!installed)
+        console.log('  npm install');
+    console.log('  npm run dev');
     console.log('');
 }

package/lib/discover-templates.d.ts

@@ -0,0 +1,14 @@
+export interface TemplateInfo {
+    /** Short name, e.g. "gtk-minimal" */
+    name: string;
+    /** One-line description (from template package.json `description` or a built-in fallback) */
+    description: string;
+    /** Absolute path to the template directory inside dist-templates/ */
+    path: string;
+}
+/**
+ * Discover all shipped templates by scanning dist-templates/ next to this file.
+ * Returns templates sorted alphabetically by name.
+ */
+export declare function discoverTemplates(): TemplateInfo[];
+export declare function findTemplate(name: string): TemplateInfo | undefined;

package/lib/discover-templates.js

@@ -0,0 +1,45 @@
+import { readdirSync, readFileSync, existsSync, statSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+const FALLBACK_DESCRIPTIONS = {
+    'gtk-minimal': 'Minimal GTK4 app — Gtk.Window + Gtk.Label (no Adwaita, no Blueprint).',
+    'cli': 'Command-line tool using yargs (Node.js + GJS).',
+    'adw-canvas2d': 'Adwaita app with HTML Canvas 2D rendering (Blueprint UI).',
+    'adw-webgl': 'Adwaita app with WebGL + three.js (Blueprint UI).',
+    'adw-game': 'Adwaita game shell using Excalibur.js, WebGL → Canvas2D fallback.',
+    'web-server-hono': 'HTTP server using Hono (Web-standard fetch-style API).',
+    'web-server-express': 'HTTP server using Express (familiar Node.js stack).',
+};
+/**
+ * Discover all shipped templates by scanning dist-templates/ next to this file.
+ * Returns templates sorted alphabetically by name.
+ */
+export function discoverTemplates() {
+    const pkgRoot = join(dirname(fileURLToPath(import.meta.url)), '..');
+    const templatesRoot = join(pkgRoot, 'dist-templates');
+    if (!existsSync(templatesRoot))
+        return [];
+    const templates = [];
+    for (const name of readdirSync(templatesRoot)) {
+        const path = join(templatesRoot, name);
+        const pkgJsonPath = join(path, 'package.json');
+        if (!statSync(path).isDirectory() || !existsSync(pkgJsonPath))
+            continue;
+        let description = FALLBACK_DESCRIPTIONS[name] ?? '';
+        try {
+            const pkg = JSON.parse(readFileSync(pkgJsonPath, 'utf-8'));
+            if (typeof pkg.description === 'string' && pkg.description.trim()) {
+                description = pkg.description;
+            }
+        }
+        catch {
+            // Fall back to built-in description
+        }
+        templates.push({ name, description, path });
+    }
+    templates.sort((a, b) => a.name.localeCompare(b.name));
+    return templates;
+}
+export function findTemplate(name) {
+    return discoverTemplates().find((t) => t.name === name);
+}

package/lib/index.d.ts

@@ -1,2 +1,3 @@
 #!/usr/bin/env node
-export { createProject } from './create.js';
+export { createProject, sanitizeProjectName, type CreateProjectOptions } from './create.js';
+export { discoverTemplates, findTemplate, type TemplateInfo } from './discover-templates.js';

package/lib/index.js

@@ -2,18 +2,56 @@
 import yargs from 'yargs';
 import { hideBin } from 'yargs/helpers';
 import { createProject } from './create.js';
+import { discoverTemplates } from './discover-templates.js';
+import { promptTemplate } from './prompt-template.js';
+const templates = discoverTemplates();
+const templateChoices = templates.map((t) => t.name);
 void yargs(hideBin(process.argv))
     .scriptName('@gjsify/create-app')
     .usage('$0 [project-name]', 'Create a new Gjsify project', (yargs) => {
-    return yargs.positional('project-name', {
+    return yargs
+        .positional('project-name', {
         describe: 'Name of the project directory to create',
         type: 'string',
-        default: 'my-gjs-app'
+        default: 'my-gjs-app',
+    })
+        .option('template', {
+        alias: 't',
+        describe: 'Template to scaffold from',
+        type: 'string',
+        choices: templateChoices.length > 0 ? templateChoices : undefined,
+    })
+        .option('force', {
+        alias: 'f',
+        describe: 'Scaffold into a non-empty directory',
+        type: 'boolean',
+        default: false,
+    })
+        .option('install', {
+        describe: 'Run npm install after scaffolding',
+        type: 'boolean',
+        default: false,
     });
 }, async (argv) => {
     const projectName = argv['project-name'];
-    await createProject(projectName);
+    let template = argv['template'];
+    if (!template) {
+        if (!process.stdin.isTTY) {
+            const list = templateChoices.join(', ');
+            console.error(`Error: --template is required in non-interactive mode. Available templates: ${list || '(none)'}`);
+            process.exit(1);
+        }
+        const picked = await promptTemplate(templates);
+        template = picked.name;
+    }
+    await createProject({
+        projectName,
+        template,
+        force: argv['force'],
+        install: argv['install'],
+    });
 })
     .help()
     .argv;
-export { createProject } from './create.js';
+export { createProject, sanitizeProjectName } from './create.js';
+export { discoverTemplates, findTemplate } from './discover-templates.js';

package/lib/prompt-template.d.ts

@@ -0,0 +1,6 @@
+import type { TemplateInfo } from './discover-templates.js';
+/**
+ * Interactive template picker. Returns the selected TemplateInfo.
+ * Throws if stdin is not a TTY — caller should check process.stdin.isTTY first.
+ */
+export declare function promptTemplate(templates: TemplateInfo[]): Promise<TemplateInfo>;

package/lib/prompt-template.js

@@ -0,0 +1,73 @@
+import { stdin, stdout } from 'node:process';
+import { emitKeypressEvents } from 'node:readline';
+const c = {
+    reset: '\x1b[0m',
+    bold: '\x1b[1m',
+    dim: '\x1b[2m',
+    cyan: '\x1b[36m',
+    green: '\x1b[32m',
+};
+/**
+ * Render a templates list with one row highlighted.
+ * First call: just draws. Subsequent calls move the cursor back up first.
+ */
+function render(templates, selected, firstRender) {
+    if (!firstRender) {
+        // Move cursor up over the previously drawn rows
+        stdout.write(`\x1b[${templates.length}A`);
+    }
+    for (let i = 0; i < templates.length; i++) {
+        const t = templates[i];
+        const marker = i === selected ? `${c.cyan}❯${c.reset}` : ' ';
+        const label = i === selected ? `${c.bold}${c.green}${t.name}${c.reset}` : t.name;
+        // Clear line, then write content
+        stdout.write(`\x1b[2K\r ${marker} ${label}  ${c.dim}${t.description}${c.reset}\n`);
+    }
+}
+/**
+ * Interactive template picker. Returns the selected TemplateInfo.
+ * Throws if stdin is not a TTY — caller should check process.stdin.isTTY first.
+ */
+export function promptTemplate(templates) {
+    if (templates.length === 0) {
+        return Promise.reject(new Error('No templates available.'));
+    }
+    return new Promise((resolve, reject) => {
+        let selected = 0;
+        stdout.write(`${c.bold}Select a template${c.reset} ${c.dim}(↑/↓ to navigate, Enter to confirm, Ctrl+C to cancel)${c.reset}\n`);
+        render(templates, selected, true);
+        emitKeypressEvents(stdin);
+        if (stdin.isTTY)
+            stdin.setRawMode(true);
+        stdin.resume();
+        const cleanup = () => {
+            stdin.removeListener('keypress', onKeypress);
+            if (stdin.isTTY)
+                stdin.setRawMode(false);
+            stdin.pause();
+        };
+        const onKeypress = (_str, key) => {
+            if (!key)
+                return;
+            if (key.ctrl && key.name === 'c') {
+                cleanup();
+                stdout.write('\n');
+                reject(new Error('Cancelled by user'));
+                return;
+            }
+            if (key.name === 'up' || key.name === 'k') {
+                selected = (selected - 1 + templates.length) % templates.length;
+                render(templates, selected, false);
+            }
+            else if (key.name === 'down' || key.name === 'j') {
+                selected = (selected + 1) % templates.length;
+                render(templates, selected, false);
+            }
+            else if (key.name === 'return' || key.name === 'enter') {
+                cleanup();
+                resolve(templates[selected]);
+            }
+        };
+        stdin.on('keypress', onKeypress);
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gjsify/create-app",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "Create a new Gjsify project",
   "type": "module",
   "main": "lib/create.js",
@@ -10,6 +10,10 @@
       "types": "./lib/create.d.ts",
       "import": "./lib/create.js"
     },
+    "./prompt": {
+      "types": "./lib/prompt-template.d.ts",
+      "import": "./lib/prompt-template.js"
+    },
     "./package.json": "./package.json"
   },
   "bin": "./lib/index.js",
@@ -28,7 +32,7 @@
   ],
   "files": [
     "lib",
-    "templates"
+    "dist-templates"
   ],
   "dependencies": {
     "yargs": "^18.0.0"

package/templates/src/index.ts

@@ -1,64 +0,0 @@
-import Gtk from 'gi://Gtk?version=4.0'
-
-// Globals (process, crypto, Buffer, etc.) are automatically detected
-// and injected by `gjsify build` via --globals auto (the default).
-
-const app = new Gtk.Application({
-    applicationId: 'org.gjsify.example',
-})
-
-app.connect('activate', () => {
-    const window = new Gtk.ApplicationWindow({
-        application: app,
-        title: 'new-gjsify-app',
-        defaultWidth: 480,
-        defaultHeight: 280,
-    })
-
-    const box = new Gtk.Box({
-        orientation: Gtk.Orientation.VERTICAL,
-        spacing: 16,
-        margin_top: 24,
-        margin_bottom: 24,
-        margin_start: 24,
-        margin_end: 24,
-    })
-
-    // Node.js — process API
-    const platformLabel = new Gtk.Label({
-        label: `Platform: ${process.platform}  |  PID: ${process.pid}`,
-        xalign: 0,
-    })
-
-    // Web Crypto API — UUID
-    const uuidLabel = new Gtk.Label({
-        label: 'UUID:   —',
-        xalign: 0,
-    })
-
-    // Node.js — Buffer API
-    const base64Label = new Gtk.Label({
-        label: 'Base64: —',
-        xalign: 0,
-    })
-
-    // Button wires everything together
-    const button = new Gtk.Button({ label: '↺  Generate UUID' })
-    button.connect('clicked', () => {
-        const uuid = crypto.randomUUID()                          // Web Crypto
-        const base64 = Buffer.from(uuid).toString('base64')      // Node.js Buffer
-        uuidLabel.set_label(`UUID:   ${uuid}`)
-        base64Label.set_label(`Base64: ${base64}`)
-    })
-
-    box.append(platformLabel)
-    box.append(new Gtk.Separator({ orientation: Gtk.Orientation.HORIZONTAL }))
-    box.append(button)
-    box.append(uuidLabel)
-    box.append(base64Label)
-
-    window.set_child(box)
-    window.present()
-})
-
-app.run([])