webnek 0.1.0

package/README.md

@@ -0,0 +1,44 @@
+# webnek
+
+Installer for the Rust web framework. Run it with `bunx` / `npx` — it is **not** a dependency of your app.
+
+Generated apps have **no** `package.json`, **no** lockfile, **no** `node_modules`. `Cargo.toml` is the only manifest (`[package.metadata.npm]` for JS packages, cached in `~/.cargo/webnek/cache/`).
+
+## Create an app
+
+```bash
+bunx webnek my-app
+# or
+npx webnek my-app
+```
+
+```
+my-app/
+  Cargo.toml      # only manifest (Rust crates + [package.metadata.npm])
+  Cargo.lock
+  public/
+  src/
+```
+
+Then:
+
+```bash
+cd my-app
+cargo webnek dev
+cargo webnek add canvas-confetti --npm
+vercel
+```
+
+Do not `bun add webnek` inside the app. That is the two-ecosystem split this installer exists to avoid.
+
+## Commands
+
+| Command | What it does |
+|---|---|
+| `webnek [dir]` / `webnek new [dir]` | Scaffold a project |
+| `webnek init` | Scaffold into the current directory |
+| `webnek dev` | `cargo webnek dev` |
+| `webnek build` | `cargo webnek build` |
+| `webnek add <pkg>` | `cargo webnek add` |
+
+Requires [Rust](https://rustup.rs/). `cargo webnek` is the `cargo-webnek` binary (`cargo install --path crates/cli` from this repo).

package/bin/cli.mjs

@@ -0,0 +1,249 @@
+#!/usr/bin/env node
+import { spawnSync } from "node:child_process";
+import {
+  existsSync,
+  mkdirSync,
+  readFileSync,
+  readdirSync,
+  rmSync,
+  statSync,
+  writeFileSync,
+} from "node:fs";
+import { dirname, join, relative, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const pkgRoot = resolve(here, "..");
+const templateRoot = join(pkgRoot, "template");
+
+const args = process.argv.slice(2);
+const cmd = args[0];
+
+const IGNORE_WHEN_EMPTY = new Set([
+  ".git",
+  ".gitignore",
+  ".ds_store",
+  "node_modules",
+  "package.json",
+  "package-lock.json",
+  "bun.lock",
+  "bun.lockb",
+  "pnpm-lock.yaml",
+  "yarn.lock",
+  "index.ts",
+  "index.js",
+  "tsconfig.json",
+  "readme.md",
+  "claude.md",
+  "agents.md",
+]);
+
+function help() {
+  console.log(`
+  webnek  0.1.0
+
+  webnek [dir]             Scaffold a new app
+  webnek new [dir]         Same as above
+  webnek init              Scaffold into the current directory
+  webnek dev [...args]     cargo webnek dev
+  webnek build [...args]   cargo webnek build
+  webnek add [...args]     cargo webnek add
+  webnek export [...args]  cargo webnek export
+`);
+}
+
+function rustPackageName(dirName) {
+  const n = dirName.replace(/[^a-zA-Z0-9_-]/g, "-").replace(/^-+/, "");
+  return n || "webnek-app";
+}
+
+function findFrameworkRoot() {
+  if (process.env.WEBNEK_HOME && existsSync(join(process.env.WEBNEK_HOME, "crates/framework/Cargo.toml"))) {
+    return resolve(process.env.WEBNEK_HOME);
+  }
+  let dir = process.cwd();
+  for (let i = 0; i < 8; i++) {
+    if (existsSync(join(dir, "crates/framework/Cargo.toml"))) return dir;
+    const parent = dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+  dir = pkgRoot;
+  for (let i = 0; i < 6; i++) {
+    if (existsSync(join(dir, "crates/framework/Cargo.toml"))) return dir;
+    const parent = dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+  return null;
+}
+
+function frameworkDep(appDir) {
+  const root = findFrameworkRoot();
+  if (root) {
+    const fw = resolve(root, "crates/framework");
+    let rel = relative(appDir, fw);
+    if (!rel.startsWith(".") && !rel.startsWith("/")) rel = `./${rel}`;
+    // Cargo.toml paths work with forward slashes on all platforms.
+    rel = rel.replaceAll("\\", "/");
+    return `webnek = { path = "${rel}", features = ["ssr"] }`;
+  }
+  return `webnek = { version = "0.1.0", features = ["ssr"] }`;
+}
+
+function isEffectivelyEmpty(dir) {
+  if (!existsSync(dir)) return true;
+  const names = readdirSync(dir);
+  return names.every((n) => IGNORE_WHEN_EMPTY.has(n.toLowerCase()));
+}
+
+function copyTemplate(from, to, vars) {
+  mkdirSync(to, { recursive: true });
+  for (const name of readdirSync(from)) {
+    if (name === ".gitkeep" && existsSync(join(to, name))) continue;
+    const src = join(from, name);
+    const destName = name.endsWith(".tmpl") ? name.slice(0, -5) : name;
+    const dest = join(to, destName);
+    if (statSync(src).isDirectory()) {
+      copyTemplate(src, dest, vars);
+      continue;
+    }
+    let text = readFileSync(src, "utf8");
+    for (const [k, v] of Object.entries(vars)) {
+      text = text.replaceAll(`{{${k}}}`, v);
+    }
+    mkdirSync(dirname(dest), { recursive: true });
+    writeFileSync(dest, text);
+  }
+}
+
+function stripNodeManifests(appDir) {
+  for (const leftover of [
+    "package.json",
+    "package-lock.json",
+    "bun.lock",
+    "bun.lockb",
+    "pnpm-lock.yaml",
+    "yarn.lock",
+    "index.ts",
+    "index.js",
+    "CLAUDE.md",
+  ]) {
+    const p = join(appDir, leftover);
+    if (existsSync(p)) rmSync(p, { force: true });
+  }
+  const nm = join(appDir, "node_modules");
+  if (existsSync(nm)) rmSync(nm, { recursive: true, force: true });
+}
+
+function scaffold(targetArg) {
+  const appDir = resolve(process.cwd(), targetArg || ".");
+  const pkgName = rustPackageName(
+    appDir === process.cwd() ? (process.cwd().split(/[/\\]/).pop() || "app") : targetArg.replace(/\/+$/, "").split(/[/\\]/).pop()
+  );
+
+  if (existsSync(join(appDir, "Cargo.toml"))) {
+    console.error(`  ✖ ${appDir} already has a Cargo.toml`);
+    process.exit(1);
+  }
+  if (existsSync(appDir) && !isEffectivelyEmpty(appDir)) {
+    console.error(
+      `  ✖ ${appDir} is not empty. Use an empty folder (node_modules / lockfiles are ok).`
+    );
+    process.exit(1);
+  }
+
+  mkdirSync(appDir, { recursive: true });
+  stripNodeManifests(appDir);
+  const vars = {
+    PACKAGE_NAME: pkgName,
+    FRAMEWORK_DEP: frameworkDep(appDir),
+    PROJECT_NAME: pkgName,
+  };
+  copyTemplate(templateRoot, appDir, vars);
+  stripNodeManifests(appDir);
+
+  const rel = relative(process.cwd(), appDir) || ".";
+  console.log(`
+  webnek  created  ${rel}
+
+  src/          source (Rust, TS islands, styles.css)
+  public/       static files you add
+  target/web/   generated CSS/JS (gitignored)
+
+  Next:
+    cd ${rel === "." ? "." : rel}
+    cargo webnek dev
+`);
+}
+
+function which(bin) {
+  const r = spawnSync("sh", ["-c", `command -v ${bin}`], { encoding: "utf8" });
+  return r.status === 0 ? r.stdout.trim() : "";
+}
+
+function ensureCargoWeb() {
+  const probe = spawnSync("cargo", ["webnek", "--help"], {
+    encoding: "utf8",
+    stdio: "pipe",
+  });
+  if (probe.status === 0) return "cargo";
+
+  if (which("cargo-webnek")) {
+    return "cargo-webnek";
+  }
+
+  const root = findFrameworkRoot();
+  if (root && existsSync(join(root, "crates/cli/Cargo.toml"))) {
+    console.log("  webnek  installing cargo-webnek from local crates/cli …");
+    const ins = spawnSync(
+      "cargo",
+      ["install", "--path", join(root, "crates/cli"), "--force"],
+      { stdio: "inherit" }
+    );
+    if (ins.status === 0) return "cargo";
+  }
+
+  console.error(`
+  ✖ cargo-webnek is not installed.
+
+    cargo install cargo-webnek
+    # or, from this repo:
+    cargo install --path crates/cli
+`);
+  process.exit(1);
+}
+
+function proxyCargoWeb(forward) {
+  ensureCargoWeb();
+  const result = spawnSync("cargo", ["webnek", ...forward], {
+    stdio: "inherit",
+    cwd: process.cwd(),
+  });
+  process.exit(result.status ?? 1);
+}
+
+const createInvoked =
+  process.argv[1] && process.argv[1].includes("create-webnek");
+
+if (args.length === 0 && createInvoked) {
+  scaffold(".");
+} else if (args.length === 0) {
+  if (isEffectivelyEmpty(process.cwd()) && !existsSync(join(process.cwd(), "Cargo.toml"))) {
+    scaffold(".");
+  } else {
+    help();
+  }
+} else if (cmd === "-h" || cmd === "--help" || cmd === "help") {
+  help();
+} else if (cmd === "new" || cmd === "create" || cmd === "init") {
+  scaffold(cmd === "init" ? args[1] || "." : args[1] || ".");
+} else if (["dev", "build", "add", "export"].includes(cmd)) {
+  proxyCargoWeb(args);
+} else if (cmd.startsWith("-")) {
+  help();
+  process.exit(1);
+} else {
+  // `webnek my-app`
+  scaffold(cmd);
+}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "webnek",
+  "version": "0.1.0",
+  "description": "Next-gen fullstack Rust web framework with React ergonomics. Scaffold with bunx webnek, then cargo webnek dev.",
+  "type": "module",
+  "license": "MIT OR Apache-2.0",
+  "author": "Grenish Rai <mrcoder2033d@gmail.com>",
+  "bin": {
+    "webnek": "./bin/cli.mjs",
+    "create-webnek": "./bin/cli.mjs"
+  },
+  "files": [
+    "bin",
+    "template",
+    "README.md"
+  ],
+  "keywords": [
+    "rust",
+    "ssr",
+    "fullstack",
+    "tailwind",
+    "framework",
+    "create-webnek"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Grenish/webnek"
+  }
+}

package/template/.vercelignore

@@ -0,0 +1,5 @@
+target/**
+!target/release
+!target/x86_64-unknown-linux-gnu/release/**
+!target/aarch64-unknown-linux-gnu/release/**
+.git

package/template/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "rust-analyzer.procMacro.enable": true,
+  "rust-analyzer.cargo.buildScripts.enable": true
+}

package/template/.zed/settings.json

@@ -0,0 +1,10 @@
+{
+  "lsp": {
+    "rust-analyzer": {
+      "initialization_options": {
+        "procMacro": { "enable": true },
+        "cargo": { "buildScripts": { "enable": true } }
+      }
+    }
+  }
+}

package/template/Cargo.toml

@@ -0,0 +1,18 @@
+[package]
+name = "{{PACKAGE_NAME}}"
+version = "0.1.0"
+edition = "2021"
+
+[workspace]
+
+[dependencies]
+{{FRAMEWORK_DEP}}
+tokio = { version = "1.38", features = ["full"] }
+
+[[bin]]
+name = "index"
+path = "api/index.rs"
+
+[package.metadata.npm]
+# Frontend NPM packages installed to ~/.cargo/webnek/cache/
+# Add new packages with: cargo webnek add <package> --npm

package/template/README.md

@@ -0,0 +1,19 @@
+# {{PROJECT_NAME}}
+
+Fullstack Rust with React ergonomics.
+
+```bash
+cargo webnek dev
+```
+
+- Edit `src/styles.css` (Tailwind v4). Compiled CSS goes to `target/web/`.
+- `public/` is for files you add (favicon, images).
+- JS packages: `cargo webnek add <pkg> --npm` (global cache, no local node_modules).
+
+## Deploy to Vercel
+
+```bash
+vercel
+```
+
+Same app, no `package.json`. Vercel compiles `api/index.rs`. CSS and client JS are built during that compile.

package/template/api/index.rs

@@ -0,0 +1,12 @@
+use webnek::prelude::*;
+
+#[path = "../src/assets.rs"]
+mod assets;
+#[path = "../src/routes/mod.rs"]
+mod routes;
+
+#[tokio::main]
+async fn main() -> Result<(), Box<dyn std::error::Error>> {
+    assets::install();
+    serve_vercel(routes::router(), Some(routes::metadata()), None, None).await
+}

package/template/build.rs

@@ -0,0 +1,107 @@
+//! Compile CSS and client JS into OUT_DIR so the Vercel function can embed them.
+//!
+//! Local `cargo webnek dev` still serves from `target/web/` (hot reload).
+//! On Vercel, `npx` compiles Tailwind and esbuild.
+
+use std::env;
+use std::fs;
+use std::path::{Path, PathBuf};
+use std::process::Command;
+
+fn main() {
+    println!("cargo:rerun-if-changed=src/styles.css");
+    println!("cargo:rerun-if-changed=src/client/index.ts");
+
+    let out = PathBuf::from(env::var("OUT_DIR").unwrap());
+    write_css(&out.join("styles.css"));
+    write_js(&out.join("client.js"));
+}
+
+fn write_css(dest: &Path) {
+    if copy_generated("styles.css", dest) {
+        return;
+    }
+    if on_vercel() && npx_ok(&[
+        "--yes",
+        "@tailwindcss/cli@4.3.3",
+        "-i",
+        "src/styles.css",
+        "-o",
+        dest.to_str().unwrap_or("styles.css"),
+        "--minify",
+    ]) {
+        return;
+    }
+    let fallback = fs::read_to_string("src/styles.css").unwrap_or_else(|_| {
+        "/* styles.css missing — run cargo webnek dev */\n".to_string()
+    });
+    let _ = fs::write(dest, fallback);
+}
+
+fn write_js(dest: &Path) {
+    if copy_generated("pkg/client.js", dest) {
+        return;
+    }
+    if on_vercel()
+        && npx_ok(&[
+            "--yes",
+            "esbuild",
+            "src/client/index.ts",
+            "--bundle",
+            "--format=esm",
+            "--outfile",
+            dest.to_str().unwrap_or("client.js"),
+        ])
+    {
+        return;
+    }
+    if on_vercel()
+        && npx_ok(&[
+            "--yes",
+            "esbuild",
+            "src/client/index.ts",
+            "--format=esm",
+            "--outfile",
+            dest.to_str().unwrap_or("client.js"),
+        ])
+    {
+        return;
+    }
+    let fallback = fs::read_to_string("src/client/index.ts")
+        .unwrap_or_else(|_| "// client\n".to_string());
+    let _ = fs::write(dest, fallback);
+}
+
+fn copy_generated(relative: &str, dest: &Path) -> bool {
+    let pkg = match env::var("CARGO_PKG_NAME") {
+        Ok(p) => p,
+        Err(_) => return false,
+    };
+    let manifest = PathBuf::from(env::var("CARGO_MANIFEST_DIR").unwrap_or_else(|_| ".".into()));
+    let mut candidates = Vec::new();
+    if let Ok(td) = env::var("CARGO_TARGET_DIR") {
+        candidates.push(PathBuf::from(td).join("web").join(&pkg).join(relative));
+    }
+    candidates.push(manifest.join("target/web").join(&pkg).join(relative));
+    if let Some(parent) = manifest.parent() {
+        candidates.push(parent.join("target/web").join(&pkg).join(relative));
+    }
+    for src in candidates {
+        if src.is_file() && fs::copy(&src, dest).is_ok() {
+            return true;
+        }
+    }
+    false
+}
+
+fn on_vercel() -> bool {
+    env::var_os("VERCEL").is_some()
+}
+
+fn npx_ok(args: &[&str]) -> bool {
+    Command::new("npx")
+        .args(args)
+        .status()
+        .map(|s| s.success())
+        .unwrap_or(false)
+}

package/template/public/.gitkeep

@@ -0,0 +1 @@
+User static files (favicon, images). Generated CSS/JS live in target/web/.

package/template/src/assets.rs

@@ -0,0 +1,8 @@
+/// CSS and JS compiled by `build.rs` into the binary.
+/// On Vercel the function serves these when `public/` is empty.
+pub fn install() {
+    webnek::prelude::embed_assets(
+        include_str!(concat!(env!("OUT_DIR"), "/styles.css")),
+        include_str!(concat!(env!("OUT_DIR"), "/client.js")),
+    );
+}

package/template/src/client/index.ts

@@ -0,0 +1,19 @@
+console.log("⚡ [webnek] Client island initialized");
+
+document.addEventListener("click", (e) => {
+  const target = (e.target as HTMLElement).closest("[data-action]");
+  if (!target) return;
+
+  const action = target.getAttribute("data-action");
+  const counterEl = document.querySelector("[data-counter-value]");
+  const doubleEl = document.querySelector("[data-double-value]");
+  if (!counterEl) return;
+
+  let val = parseInt(counterEl.textContent || "0", 10);
+  if (action === "inc") val += 1;
+  if (action === "dec") val -= 1;
+  if (action === "reset") val = 0;
+
+  counterEl.textContent = val.toString();
+  if (doubleEl) doubleEl.textContent = (val * 2).toString();
+});

package/template/src/main.rs

@@ -0,0 +1,20 @@
+use webnek::prelude::*;
+
+mod assets;
+mod routes;
+
+#[tokio::main]
+async fn main() -> Result<(), Box<dyn std::error::Error>> {
+    assets::install();
+
+    let port = std::env::var("PORT").unwrap_or_else(|_| "3030".to_string());
+
+    serve_router(
+        &format!("127.0.0.1:{}", port),
+        routes::router(),
+        Some(routes::metadata()),
+        None,
+        None,
+    )
+    .await
+}

package/template/src/routes/about.rs

@@ -0,0 +1,86 @@
+use webnek::prelude::*;
+
+#[component]
+pub fn about_page() -> View {
+    set_title("About · Webnek");
+    set_description("How to add a page.");
+
+    view! {
+        <div>
+            {super::layout::site_header("src/routes/about.rs")}
+            <main className="max-w-2xl mx-auto px-6 pt-24 pb-32">
+                <p className="font-display text-[15px] text-mute mb-3">
+                    "Another route."
+                </p>
+                <h1 className="text-[2rem] sm:text-[2.5rem] leading-[1.15] tracking-tight font-medium text-ink max-w-md">
+                    "This is /about."
+                </h1>
+                <p className="mt-4 text-[15px] leading-relaxed text-mute max-w-md">
+                    "This URL is "
+                    <code className="font-mono text-[12px] text-ink">"src/routes/about.rs"</code>
+                    ", plus one line in "
+                    <code className="font-mono text-[12px] text-ink">"src/main.rs"</code>
+                    "."
+                </p>
+
+                <section className="mt-16 pt-10 border-t border-line">
+                    <h2 className="font-mono text-[11px] uppercase tracking-[0.14em] text-mute mb-8">
+                        "Add a page"
+                    </h2>
+                    <ol className="space-y-8">
+                        <li className="grid grid-cols-[1.25rem_1fr] gap-x-3">
+                            <span className="font-mono text-[11px] text-mute pt-0.5">"1"</span>
+                            <div>
+                                <p className="text-[15px] text-ink">"Write the page"</p>
+                                <p className="mt-1 text-[15px] leading-relaxed text-mute">
+                                    "Create "
+                                    <code className="font-mono text-[12px] text-ink">"src/routes/hello.rs"</code>
+                                    ". Return the HTML from a function, same as this file."
+                                </p>
+                            </div>
+                        </li>
+                        <li className="grid grid-cols-[1.25rem_1fr] gap-x-3">
+                            <span className="font-mono text-[11px] text-mute pt-0.5">"2"</span>
+                            <div>
+                                <p className="text-[15px] text-ink">"Name the file"</p>
+                                <p className="mt-1 text-[15px] leading-relaxed text-mute">
+                                    "In "
+                                    <code className="font-mono text-[12px] text-ink">"src/main.rs"</code>
+                                    ", add "
+                                    <code className="font-mono text-[12px] text-ink">"pub mod hello;"</code>
+                                    " next to "
+                                    <code className="font-mono text-[12px] text-ink">"about"</code>
+                                    " and "
+                                    <code className="font-mono text-[12px] text-ink">"page"</code>
+                                    "."
+                                </p>
+                            </div>
+                        </li>
+                        <li className="grid grid-cols-[1.25rem_1fr] gap-x-3">
+                            <span className="font-mono text-[11px] text-mute pt-0.5">"3"</span>
+                            <div>
+                                <p className="text-[15px] text-ink">"Connect the URL"</p>
+                                <p className="mt-1 text-[15px] leading-relaxed text-mute">
+                                    "Copy the "
+                                    <code className="font-mono text-[12px] text-ink">"/about"</code>
+                                    " line. Change "
+                                    <code className="font-mono text-[12px] text-ink">"\"/about\""</code>
+                                    " to "
+                                    <code className="font-mono text-[12px] text-ink">"\"/hello\""</code>
+                                    " and "
+                                    <code className="font-mono text-[12px] text-ink">"about_page"</code>
+                                    " to "
+                                    <code className="font-mono text-[12px] text-ink">"hello_page"</code>
+                                    "."
+                                </p>
+                            </div>
+                        </li>
+                    </ol>
+                    <p className="mt-10 text-[15px] leading-relaxed text-mute">
+                        "A path with no matching line still 404s."
+                    </p>
+                </section>
+            </main>
+        </div>
+    }
+}

package/template/src/routes/layout.rs

@@ -0,0 +1,28 @@
+use webnek::prelude::*;
+
+pub fn site_header(file: &'static str) -> View {
+    view! {
+        <header className="border-b border-line">
+            <div className="max-w-2xl mx-auto px-6 h-14 flex items-center justify-between">
+                <a href="/" className="font-display text-[17px] tracking-tight text-ink">
+                    "Webnek"
+                </a>
+                <nav className="flex items-center gap-5 font-mono text-[11px] text-mute">
+                    <a href="/" className="hover:text-ink">"/"</a>
+                    <a href="/about" className="hover:text-ink">"/about"</a>
+                    <span className="text-line">"·"</span>
+                    <span>{file}</span>
+                </nav>
+            </div>
+        </header>
+    }
+}
+
+#[component]
+pub fn root_layout(children: View) -> View {
+    view! {
+        <div className="min-h-screen bg-paper text-ink font-sans antialiased">
+            {children}
+        </div>
+    }
+}

package/template/src/routes/mod.rs

@@ -0,0 +1,18 @@
+use webnek::prelude::*;
+
+pub mod about;
+pub mod layout;
+pub mod page;
+
+pub fn metadata() -> Metadata {
+    Metadata::new()
+        .title("Webnek")
+        .description("A running native web app. SSR, signals, Tailwind.")
+        .robots("index, follow")
+}
+
+pub fn router() -> Router {
+    Router::new()
+        .route("/", |_| layout::root_layout(page::home_page()))
+        .route("/about", |_| layout::root_layout(about::about_page()))
+}

package/template/src/routes/page.rs

@@ -0,0 +1,65 @@
+use webnek::prelude::*;
+
+#[component]
+pub fn home_page() -> View {
+    set_title("Webnek");
+    set_description("A running native web app. SSR, signals, Tailwind.");
+
+    let (count, set_count) = use_state(0);
+    let double_count = use_memo(move || count.get() * 2);
+
+    view! {
+        <div>
+            {super::layout::site_header("src/routes/page.rs")}
+            <main className="max-w-2xl mx-auto px-6 pt-24 pb-32">
+                <p className="font-display text-[15px] text-mute mb-3">
+                    "A running app."
+                </p>
+                <h1 className="text-[2rem] sm:text-[2.5rem] leading-[1.15] tracking-tight font-medium text-ink max-w-md">
+                    "Native SSR. Signals. No node_modules."
+                </h1>
+                <p className="mt-4 text-[15px] leading-relaxed text-mute max-w-sm">
+                    "This page was rendered on the server. The number below is a reactive signal — edit "
+                    <code className="font-mono text-[12px] text-ink">"src/routes/page.rs"</code>
+                    " and save."
+                </p>
+
+                <div className="mt-16 pt-10 border-t border-line">
+                    <div className="flex items-end justify-between gap-8">
+                        <div>
+                            <div className="font-mono text-[11px] uppercase tracking-[0.14em] text-mute mb-3">
+                                "count"
+                            </div>
+                            <div
+                                data-counter-value="true"
+                                className="font-mono text-6xl sm:text-7xl tabular-nums tracking-tight text-ink leading-none"
+                            >
+                                {count}
+                            </div>
+                            <div className="mt-3 font-mono text-[12px] text-mute">
+                                "×2  "
+                                <span data-double-value="true" className="text-ink">{double_count}</span>
+                            </div>
+                        </div>
+                        <div className="flex gap-2 pb-1">
+                            <button
+                                data-action="dec"
+                                className="w-10 h-10 border border-line bg-paper text-ink text-lg leading-none hover:bg-white transition-colors"
+                                onClick={move || set_count.update(|c| *c -= 1)}
+                            >
+                                "−"
+                            </button>
+                            <button
+                                data-action="inc"
+                                className="w-10 h-10 bg-ink text-paper text-lg leading-none hover:bg-patina transition-colors"
+                                onClick={move || set_count.update(|c| *c += 1)}
+                            >
+                                "+"
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+    }
+}

package/template/src/styles.css

@@ -0,0 +1,30 @@
+@import "tailwindcss";
+
+@source "../src";
+@source not "../target";
+
+@theme {
+  --color-paper: #f6f5f2;
+  --color-ink: #111110;
+  --color-mute: #73726c;
+  --color-line: #e4e2dc;
+  --color-patina: #2c5c4f;
+  --font-display: ui-serif, "Iowan Old Style", Palatino, Georgia, serif;
+  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
+}
+
+html {
+  background: var(--color-paper);
+  color: var(--color-ink);
+}
+
+::selection {
+  background: var(--color-patina);
+  color: var(--color-paper);
+}
+
+:focus-visible {
+  outline: 2px solid var(--color-ink);
+  outline-offset: 3px;
+}

package/template/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "jsx": "preserve",
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "*": ["~/.cargo/webnek/cache/node_modules/*", "*"]
+    }
+  },
+  "include": ["src/client/**/*"]
+}

package/template/vercel.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "rewrites": [
+    {
+      "source": "/(.*)",
+      "destination": "/api/index"
+    }
+  ]
+}