hadars 1.0.1 → 1.0.3

package/dist/cli.js

@@ -148,7 +148,6 @@ var REACT19_ELEMENT = Symbol.for("react.transitional.element");
 var FRAGMENT_TYPE = Symbol.for("react.fragment");
 var SUSPENSE_TYPE = Symbol.for("react.suspense");
 // src/slim-react/renderContext.ts
-import { createRequire as _nodeCreateRequire } from "node:module";
 var MAP_KEY = "__slimReactContextMap";
 var _g = globalThis;
 if (!("__slimReactContextMap" in _g))
@@ -285,27 +284,8 @@ function getTreeId() {
   const stripped = (id & ~(1 << 31 - Math.clz32(id))).toString(32);
   return stripped + overflow;
 }
-var _detectReact = () => {
-  if (typeof __HADARS_REACT_MAJOR__ !== "undefined") {
-    const major = parseInt(String(__HADARS_REACT_MAJOR__), 10);
-    return {
-      major,
-      version: major < 19 ? "18.3.1" : "19.1.1"
-    };
-  }
-  const parse = (ver) => ({ major: parseInt(ver.split(".")[0], 10), version: ver });
-  try {
-    return parse(__require("react").version);
-  } catch {}
-  try {
-    const req = _nodeCreateRequire(process.cwd() + "/__hadars__.js");
-    return parse(req("react").version);
-  } catch {}
-  return { major: 19, version: "19.1.1" };
-};
-var _react = _detectReact();
-var REACT_MAJOR = _react.major;
-var REACT_VERSION = _react.version;
+var REACT_MAJOR = typeof __HADARS_REACT_MAJOR__ !== "undefined" ? parseInt(String(__HADARS_REACT_MAJOR__), 10) : 19;
+var REACT_VERSION = REACT_MAJOR < 19 ? "18.3.1" : "19.1.1";
 function makeId() {
   const st = s();
   const treeId = getTreeId();
@@ -385,9 +365,24 @@ function use(usable) {
 }
 // src/slim-react/dispatcher.ts
 import * as ReactNS from "react";
-var _r19 = ReactNS.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
-var _r18Raw = !_r19 ? ReactNS.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED : undefined;
-var _r18 = _r18Raw?.ReactCurrentDispatcher ? _r18Raw : undefined;
+var _r19;
+var _r18;
+var _detected = false;
+var _k19 = "__CLIENT_INTERNALS_DO_NOT_USE" + "_OR_WARN_USERS_THEY_CANNOT_UPGRADE";
+var _k18 = "__SECRET_INTERNALS_DO_NOT_USE" + "_OR_YOU_WILL_BE_FIRED";
+function _detect() {
+  if (_detected)
+    return;
+  _detected = true;
+  const r19 = ReactNS[_k19];
+  if (r19) {
+    _r19 = r19;
+    return;
+  }
+  const raw = ReactNS[_k18];
+  if (raw?.ReactCurrentDispatcher)
+    _r18 = raw;
+}
 var slimDispatcher = {
   useId: makeId,
   readContext: (ctx) => getContextValue(ctx),
@@ -413,6 +408,7 @@ var slimDispatcher = {
   useHostTransitionStatus: () => false
 };
 function installDispatcher() {
+  _detect();
   if (_r19) {
     const prev = _r19.H;
     _r19.H = slimDispatcher;
@@ -426,6 +422,7 @@ function installDispatcher() {
   return null;
 }
 function restoreDispatcher(prev) {
+  _detect();
   if (_r19)
     _r19.H = prev;
   else if (_r18)
@@ -1223,14 +1220,28 @@ var getReactResponse = async (req, opts) => {
   globalThis.__hadarsUnsuspend = unsuspend;
   globalThis.__hadarsContext = context;
   const element = createElement(App, props);
-  try {
-    await renderPreflight(element);
-  } finally {
-    globalThis.__hadarsUnsuspend = null;
-    globalThis.__hadarsContext = null;
+  let bodyHtml = null;
+  if (opts.singlePass) {
+    globalThis.__hadarsUnsuspend = unsuspend;
+    globalThis.__hadarsContext = context;
+    try {
+      bodyHtml = await renderToString(element);
+    } finally {
+      globalThis.__hadarsUnsuspend = null;
+      globalThis.__hadarsContext = null;
+    }
+  } else {
+    try {
+      await renderPreflight(element);
+    } finally {
+      globalThis.__hadarsUnsuspend = null;
+      globalThis.__hadarsContext = null;
+    }
   }
   const status = context.head.status;
   const getAppBody = async () => {
+    if (bodyHtml !== null)
+      return bodyHtml;
     globalThis.__hadarsUnsuspend = unsuspend;
     globalThis.__hadarsContext = context;
     try {
@@ -1826,15 +1837,23 @@ async function transformStream(data, stream) {
   }
   return out;
 }
+var _zlibGzip = null;
+var _zlibGunzip = null;
 async function zlibGzip(d) {
-  const zlib = await import("node:zlib");
-  const { promisify } = await import("node:util");
-  return promisify(zlib.gzip)(d);
+  if (!_zlibGzip) {
+    const zlib = await import("node:zlib");
+    const { promisify } = await import("node:util");
+    _zlibGzip = promisify(zlib.gzip);
+  }
+  return _zlibGzip(d);
 }
 async function zlibGunzip(d) {
-  const zlib = await import("node:zlib");
-  const { promisify } = await import("node:util");
-  return promisify(zlib.gunzip)(d);
+  if (!_zlibGunzip) {
+    const zlib = await import("node:zlib");
+    const { promisify } = await import("node:util");
+    _zlibGunzip = promisify(zlib.gunzip);
+  }
+  return _zlibGunzip(d);
 }
 var gzipCompress = (d) => globalThis.CompressionStream ? transformStream(d, new globalThis.CompressionStream("gzip")) : zlibGzip(d);
 var gzipDecompress = (d) => globalThis.DecompressionStream ? transformStream(d, new globalThis.DecompressionStream("gzip")) : zlibGunzip(d);
@@ -2568,6 +2587,8 @@ var dev = async (options) => {
   const tmpFilePath = pathMod2.join(HADARS_TMP_DIR, `client-${Date.now()}.tsx`);
   await fs.writeFile(tmpFilePath, clientScript);
   let ssrBuildId = crypto.randomBytes(4).toString("hex");
+  let cachedSsrModule = null;
+  let cachedSsrBuildId = "";
   const resolvedHtmlTemplate = options.htmlTemplate ? await processHtmlTemplate(pathMod2.resolve(__dirname3, options.htmlTemplate)) : undefined;
   const clientCompiler = createClientCompiler(tmpFilePath, {
     target: "web",
@@ -2742,13 +2763,17 @@ var dev = async (options) => {
     if (projectRes)
       return projectRes;
     const ssrComponentPath = pathMod2.join(__dirname3, HadarsFolder, SSR_FILENAME);
-    const importPath = pathToFileURL(ssrComponentPath).href + `?t=${ssrBuildId}`;
     try {
+      if (ssrBuildId !== cachedSsrBuildId) {
+        const importPath = pathToFileURL(ssrComponentPath).href + `?t=${ssrBuildId}`;
+        cachedSsrModule = await import(importPath);
+        cachedSsrBuildId = ssrBuildId;
+      }
       const {
         default: Component,
         getInitProps,
         getFinalProps
-      } = await import(importPath);
+      } = cachedSsrModule;
       globalThis.__hadarsGraphQL = devStaticCtx?.graphql;
       const { head, status, getAppBody, finalize } = await getReactResponse(request, {
         document: {
@@ -2757,7 +2782,8 @@ var dev = async (options) => {
           getInitProps,
           getFinalProps
         },
-        staticCtx: devStaticCtx
+        staticCtx: devStaticCtx,
+        singlePass: true
       });
       if (request.headers.get("Accept") === "application/json") {
         const { clientProps } = await finalize();
@@ -2916,7 +2942,8 @@ var run = async (options) => {
           lang: "en",
           getInitProps,
           getFinalProps
-        }
+        },
+        singlePass: true
       });
       if (request.headers.get("Accept") === "application/json") {
         const { clientProps } = await finalize();
@@ -3232,8 +3259,166 @@ Deploy instructions:`);
     await unlink(shimPath).catch(() => {});
   }
 }
-var TEMPLATES = {
-  "package.json": (name) => JSON.stringify({
+var _R = "\x1B[0m";
+var _B = "\x1B[1m";
+var _D = "\x1B[2m";
+var _C = "\x1B[36m";
+var _G = "\x1B[32m";
+var _UP_KEY = "\x1B[A";
+var _DOWN_KEY = "\x1B[B";
+var _HIDE = "\x1B[?25l";
+var _SHOW = "\x1B[?25h";
+var _cl = () => "\r\x1B[2K";
+var _up = (n) => n > 0 ? `\x1B[${n}A` : "";
+function _readKeys(handler) {
+  return new Promise((resolve2) => {
+    const { stdin } = process;
+    const wasRaw = stdin.isTTY && stdin.isRaw;
+    if (stdin.isTTY)
+      stdin.setRawMode(true);
+    stdin.resume();
+    stdin.setEncoding("utf-8");
+    const onData = (key) => {
+      if (key === "\x03") {
+        cleanup();
+        process.stdout.write(_SHOW);
+        process.exit(130);
+      }
+      if (handler(key))
+        cleanup();
+    };
+    const cleanup = () => {
+      stdin.removeListener("data", onData);
+      if (stdin.isTTY && !wasRaw)
+        stdin.setRawMode(false);
+      stdin.pause();
+      resolve2();
+    };
+    stdin.on("data", onData);
+  });
+}
+async function promptRadio(question, options) {
+  const out = process.stdout;
+  let cursor = 0;
+  const total = 1 + options.length;
+  const render = (redraw) => {
+    if (redraw)
+      out.write(_up(total));
+    out.write(`${_cl()}  ${_B}${question}${_R}
+`);
+    for (let i = 0;i < options.length; i++) {
+      const arrow = i === cursor ? `${_C}❯${_R}` : " ";
+      const text = i === cursor ? `${_B}${options[i]}${_R}` : `${_D}${options[i]}${_R}`;
+      out.write(`${_cl()}  ${arrow} ${text}
+`);
+    }
+  };
+  out.write(_HIDE);
+  render(false);
+  await _readKeys((key) => {
+    if (key === _UP_KEY && cursor > 0) {
+      cursor--;
+      render(true);
+    } else if (key === _DOWN_KEY && cursor < options.length - 1) {
+      cursor++;
+      render(true);
+    } else if (key === "\r") {
+      return true;
+    }
+    return false;
+  });
+  out.write(_up(total));
+  out.write(`${_cl()}  ${question}  ${_C}${_B}${options[cursor]}${_R}
+`);
+  for (let i = 0;i < options.length; i++)
+    out.write(`${_cl()}
+`);
+  out.write(_up(options.length));
+  out.write(_SHOW);
+  return cursor;
+}
+async function promptMultiSelect(question, options) {
+  const out = process.stdout;
+  let cursor = 0;
+  const selected = new Set;
+  const total = 2 + options.length;
+  const render = (redraw) => {
+    if (redraw)
+      out.write(_up(total));
+    out.write(`${_cl()}  ${_B}${question}${_R}
+`);
+    out.write(`${_cl()}  ${_D}↑↓ navigate · Space select · Enter confirm${_R}
+`);
+    for (let i = 0;i < options.length; i++) {
+      const arrow = i === cursor ? `${_C}❯${_R}` : " ";
+      const box = selected.has(i) ? `${_G}●${_R}` : `${_D}○${_R}`;
+      const text = i === cursor ? `${_B}${options[i]}${_R}` : `${_D}${options[i]}${_R}`;
+      out.write(`${_cl()}  ${arrow} ${box}  ${text}
+`);
+    }
+  };
+  out.write(_HIDE);
+  render(false);
+  await _readKeys((key) => {
+    if (key === _UP_KEY && cursor > 0) {
+      cursor--;
+      render(true);
+    } else if (key === _DOWN_KEY && cursor < options.length - 1) {
+      cursor++;
+      render(true);
+    } else if (key === " ") {
+      selected.has(cursor) ? selected.delete(cursor) : selected.add(cursor);
+      render(true);
+    } else if (key === "\r") {
+      return true;
+    }
+    return false;
+  });
+  const picked = [...selected].sort((a, b) => a - b);
+  const summary = picked.length > 0 ? picked.map((i) => options[i]).join(", ") : "none";
+  out.write(_up(total));
+  out.write(`${_cl()}  ${question}  ${_C}${_B}${summary}${_R}
+`);
+  for (let i = 0;i < total - 1; i++)
+    out.write(`${_cl()}
+`);
+  out.write(_up(total - 1));
+  out.write(_SHOW);
+  return picked;
+}
+var PLUGINS = [
+  { pkg: "@swc/plugin-emotion", version: "12.0.0", label: "Emotion (CSS-in-JS)" },
+  { pkg: "@swc/plugin-styled-components", version: "10.0.0", label: "styled-components" },
+  { pkg: "@swc/plugin-relay", version: "10.0.0", label: "Relay (GraphQL)" },
+  { pkg: "@swc/plugin-styled-jsx", version: "11.0.0", label: "styled-jsx" },
+  { pkg: "@swc/plugin-transform-imports", version: "10.0.0", label: "transform-imports" },
+  { pkg: "@swc/plugin-loadable-components", version: "9.0.0", label: "Loadable Components" },
+  { pkg: "@swc/plugin-formatjs", version: "7.0.0", label: "FormatJS (i18n)" }
+];
+function renderSwcPluginsConfig(plugins) {
+  if (plugins.length === 0)
+    return "";
+  const lines = plugins.map((p) => {
+    if (p.pkg === "@swc/plugin-relay") {
+      return `    ['${p.pkg}', { rootDir: process.cwd(), artifactDirectory: 'src/__generated__' }],`;
+    }
+    return `    ['${p.pkg}', {}],`;
+  });
+  return `
+  swcPlugins: [
+${lines.join(`
+`)}
+  ],`;
+}
+function buildTemplates(name, opts) {
+  const { useTypeScript, plugins } = opts;
+  const appExt = useTypeScript ? "tsx" : "jsx";
+  const cfgExt = useTypeScript ? "ts" : "js";
+  const tsOrJs = useTypeScript ? "tsconfig.json" : "jsconfig.json";
+  const pluginDeps = {};
+  for (const p of plugins)
+    pluginDeps[p.pkg] = p.version;
+  const packageJson = JSON.stringify({
     name,
     version: "0.1.0",
     type: "module",
@@ -3247,19 +3432,28 @@ var TEMPLATES = {
       hadars: "latest",
       react: "^19.0.0",
       "react-dom": "^19.0.0"
-    }
+    },
+    ...Object.keys(pluginDeps).length > 0 ? { devDependencies: pluginDeps } : {}
   }, null, 2) + `
-`,
-  "hadars.config.ts": () => `import type { HadarsOptions } from 'hadars';
+`;
+  const swcSection = renderSwcPluginsConfig(plugins);
+  const hadarsConfig = useTypeScript ? `import type { HadarsOptions } from 'hadars';
 
 const config: HadarsOptions = {
   entry: 'src/App.tsx',
-  port: 3000,
+  port: 3000,${swcSection}
 };
 
 export default config;
-`,
-  "tsconfig.json": () => JSON.stringify({
+` : `/** @type {import('hadars').HadarsOptions} */
+const config = {
+  entry: 'src/App.jsx',
+  port: 3000,${swcSection}
+};
+
+export default config;
+`;
+  const tsConfigContent = useTypeScript ? JSON.stringify({
     compilerOptions: {
       lib: ["ESNext", "DOM"],
       target: "ESNext",
@@ -3274,215 +3468,184 @@ export default config;
       skipLibCheck: true
     }
   }, null, 2) + `
-`,
-  ".gitignore": () => `node_modules/
-.hadars/
-dist/
-`,
-  "src/App.tsx": () => `import React from 'react';
-import { HadarsHead, type HadarsApp } from 'hadars';
+` : JSON.stringify({
+    compilerOptions: {
+      lib: ["ESNext", "DOM"],
+      target: "ESNext",
+      module: "ESNext",
+      moduleResolution: "bundler",
+      jsx: "react-jsx",
+      checkJs: true,
+      noEmit: true,
+      skipLibCheck: true
+    }
+  }, null, 2) + `
+`;
+  const appImports = useTypeScript ? `import React from 'react';
+import { HadarsHead, type HadarsApp } from 'hadars';` : `import React from 'react';
+import { HadarsHead } from 'hadars';`;
+  const appSignature = useTypeScript ? `const App: HadarsApp<{}> = () => {` : `const App = () => {`;
+  const appContent = `${appImports}
 
 const css = \`
-  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  *, *::before, *::after { box-sizing: border-box; }
 
-  body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    background: #0f0f13;
-    color: #e2e8f0;
-    min-height: 100vh;
+  :root {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
   }
 
-  .nav {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 1rem 2rem;
-    border-bottom: 1px solid #1e1e2e;
-  }
-  .nav-brand { font-weight: 700; font-size: 1.1rem; color: #a78bfa; letter-spacing: -0.02em; }
-  .nav-links { display: flex; gap: 1.5rem; }
-  .nav-links a { color: #94a3b8; text-decoration: none; font-size: 0.9rem; }
-  .nav-links a:hover { color: #e2e8f0; }
+  body { margin: 0; }
 
-  .hero {
-    text-align: center;
-    padding: 5rem 1rem 4rem;
-    max-width: 680px;
+  #app {
+    max-width: 1280px;
     margin: 0 auto;
-  }
-  .hero-badge {
-    display: inline-block;
-    background: #1e1a2e;
-    border: 1px solid #4c1d95;
-    color: #a78bfa;
-    font-size: 0.75rem;
-    font-weight: 600;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-    padding: 0.3rem 0.8rem;
-    border-radius: 999px;
-    margin-bottom: 1.5rem;
-  }
-  .hero h1 {
-    font-size: clamp(2rem, 5vw, 3.25rem);
-    font-weight: 800;
-    letter-spacing: -0.03em;
-    line-height: 1.15;
-    margin-bottom: 1rem;
-  }
-  .hero h1 span { color: #a78bfa; }
-  .hero p {
-    font-size: 1.1rem;
-    color: #94a3b8;
-    line-height: 1.7;
-    margin-bottom: 2.5rem;
-  }
-  .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
-  .btn {
-    display: inline-flex;
+    padding: 2rem;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
     align-items: center;
-    gap: 0.4rem;
-    padding: 0.65rem 1.4rem;
+    justify-content: center;
+    min-height: 100vh;
+  }
+
+  .logos { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; }
+
+  .logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+    transition: filter 300ms;
+  }
+  .logo-react { animation: spin 20s linear infinite; }
+  .logo-react:hover { filter: drop-shadow(0 0 2em #61dafbaa); }
+
+  @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+  @media (prefers-reduced-motion: reduce) { .logo-react { animation: none; } }
+
+  h1 { font-size: 3.2em; line-height: 1.1; }
+
+  .card { padding: 2em; }
+  .card p { color: #aaa; }
+
+  button {
     border-radius: 8px;
-    font-size: 0.9rem;
-    font-weight: 600;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #1a1a1a;
     cursor: pointer;
-    border: none;
-    transition: opacity 0.15s, transform 0.1s;
-    text-decoration: none;
-  }
-  .btn:hover { opacity: 0.85; transform: translateY(-1px); }
-  .btn:active { transform: translateY(0); }
-  .btn-primary { background: #7c3aed; color: #fff; }
-  .btn-ghost { background: #1e1e2e; color: #e2e8f0; border: 1px solid #2d2d3e; }
+    transition: border-color 0.25s;
+  }
+  button:hover { border-color: #a78bfa; }
+  button:focus-visible { outline: 4px auto -webkit-focus-ring-color; }
 
-  .features {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-    gap: 1rem;
-    max-width: 900px;
-    margin: 0 auto 4rem;
-    padding: 0 1.5rem;
-  }
-  .card {
-    background: #16161f;
-    border: 1px solid #1e1e2e;
-    border-radius: 12px;
-    padding: 1.5rem;
-  }
-  .card-icon { font-size: 1.5rem; margin-bottom: 0.75rem; }
-  .card h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.4rem; }
-  .card p { font-size: 0.85rem; color: #64748b; line-height: 1.6; }
+  .hint { color: #555; font-size: 0.9em; }
+  .hint a { color: inherit; }
+  .hint a:hover { color: #a78bfa; }
 
-  .demo {
-    max-width: 480px;
-    margin: 0 auto 4rem;
-    padding: 0 1.5rem;
-    text-align: center;
+  @media (prefers-color-scheme: light) {
+    :root { color: #213547; background-color: #ffffff; }
+    button { background-color: #f9f9f9; }
+    .card p { color: #666; }
+    .hint { color: #999; }
   }
-  .demo-box {
-    background: #16161f;
-    border: 1px solid #1e1e2e;
-    border-radius: 12px;
-    padding: 2rem;
-  }
-  .demo-box h2 { font-size: 0.8rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1.25rem; }
-  .counter { font-size: 3.5rem; font-weight: 800; color: #a78bfa; letter-spacing: -0.04em; margin-bottom: 1.25rem; }
-  .demo-actions { display: flex; gap: 0.75rem; justify-content: center; }
-
 \`;
 
-const App: HadarsApp<{}> = () => {
+${appSignature}
   const [count, setCount] = React.useState(0);
 
   return (
     <>
       <HadarsHead status={200}>
-        <title>My App</title>
+        <title>${name}</title>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <style data-id="app-styles" dangerouslySetInnerHTML={{ __html: css }} />
       </HadarsHead>
 
-      <nav className="nav">
-        <span className="nav-brand">my-app</span>
-        <div className="nav-links">
-          <a href="https://github.com/dpostolachi/hadar" target="_blank" rel="noopener">github</a>
+      <div id="app">
+        <div className="logos">
+          <a href="https://react.dev" target="_blank" rel="noopener noreferrer">
+            <svg className="logo logo-react" xmlns="http://www.w3.org/2000/svg" viewBox="-11.5 -10.232 23 20.463" aria-label="React">
+              <circle cx="0" cy="0" r="2.05" fill="#61dafb" />
+              <g stroke="#61dafb" strokeWidth="1" fill="none">
+                <ellipse rx="11" ry="4.2" />
+                <ellipse rx="11" ry="4.2" transform="rotate(60)" />
+                <ellipse rx="11" ry="4.2" transform="rotate(120)" />
+              </g>
+            </svg>
+          </a>
         </div>
-      </nav>
 
-      <section className="hero">
-        <div className="hero-badge">built with hadars</div>
-        <h1>Ship <span>React apps</span><br />at full speed</h1>
-        <p>
-          SSR out of the box, zero config, instant hot-reload.
-          Edit <code>src/App.tsx</code> to get started.
-        </p>
-        <div className="hero-actions">
-          <button className="btn btn-primary" onClick={() => setCount(c => c + 1)}>
-            Try the counter ↓
-          </button>
-        </div>
-      </section>
+        <h1>React + hadars</h1>
 
-      <div className="features">
-        <div className="card">
-          <div className="card-icon">⚡</div>
-          <h3>Server-side rendering</h3>
-          <p>Pages render on the server and hydrate on the client — great for SEO and first paint.</p>
-        </div>
-        <div className="card">
-          <div className="card-icon">\uD83D\uDD25</div>
-          <h3>Hot module reload</h3>
-          <p>Changes in <code>src/App.tsx</code> reflect instantly in the browser during development.</p>
-        </div>
-        <div className="card">
-          <div className="card-icon">\uD83D\uDCE6</div>
-          <h3>Zero config</h3>
-          <p>One config file. Export a React component, run <code>hadars dev</code>, done.</p>
-        </div>
         <div className="card">
-          <div className="card-icon">\uD83D\uDDC4️</div>
-          <h3>Server data hooks</h3>
-          <p>Use <code>useServerData</code> to fetch data on the server without extra round-trips.</p>
+          <button onClick={() => setCount(c => c + 1)}>
+            count is {count}
+          </button>
+          <p>
+            Edit <code>src/App.${appExt}</code> and save to test HMR
+          </p>
         </div>
-      </div>
 
-      <div className="demo">
-        <div className="demo-box">
-          <h2>Client interactivity works</h2>
-          <div className="counter">{count}</div>
-          <div className="demo-actions">
-            <button className="btn btn-ghost" onClick={() => setCount(c => c - 1)}>− dec</button>
-            <button className="btn btn-primary" onClick={() => setCount(c => c + 1)}>+ inc</button>
-          </div>
-        </div>
+        <p className="hint">
+          <a href="https://hadars.xyz" target="_blank" rel="noopener noreferrer">hadars docs</a>
+          &nbsp;·&nbsp;
+          <a href="https://react.dev" target="_blank" rel="noopener noreferrer">react docs</a>
+        </p>
       </div>
-
     </>
   );
 };
 
 export default App;
-`
-};
+`;
+  return {
+    "package.json": packageJson,
+    [`hadars.config.${cfgExt}`]: hadarsConfig,
+    [tsOrJs]: tsConfigContent,
+    ".gitignore": `node_modules/
+.hadars/
+dist/
+`,
+    [`src/App.${appExt}`]: appContent
+  };
+}
 async function createProject(name, cwd) {
   const dir = resolve(cwd, name);
   if (existsSync3(dir)) {
     console.error(`Directory already exists: ${dir}`);
     process.exit(1);
   }
-  console.log(`Creating hadars project in ${dir}`);
+  const useTypeScript = await promptRadio("Language?", ["TypeScript", "JavaScript"]) === 0;
+  const selectedIndices = await promptMultiSelect("Select SWC plugins to enable (optional):", PLUGINS.map((p) => p.label));
+  const plugins = selectedIndices.map((i) => PLUGINS[i]);
+  console.log(`
+Creating hadars project in ${dir}`);
   await mkdir2(join2(dir, "src"), { recursive: true });
-  for (const [file, template] of Object.entries(TEMPLATES)) {
-    const content = template(name);
+  const files = buildTemplates(name, { useTypeScript, plugins });
+  for (const [file, content] of Object.entries(files)) {
     await writeFile2(join2(dir, file), content, "utf-8");
     console.log(`  created  ${file}`);
   }
+  const installHint = plugins.length > 0 ? `
+  # Also install selected SWC plugins:
+  npm install -D ${plugins.map((p) => `${p.pkg}@${p.version}`).join(" ")}
+` : "";
   console.log(`
 Done! Next steps:
 
   cd ${name}
-  npm install       # or: bun install / pnpm install
+  npm install       # or: bun install / pnpm install${installHint}
   npm run dev       # or: bun run dev
 `);
 }