hadars 1.0.0 → 1.0.2

package/dist/cli.js

@@ -147,24 +147,6 @@ var SLIM_ELEMENT = Symbol.for("react.element");
 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/jsx.ts
-function createElement(type, props, ...children) {
-  const normalizedProps = { ...props || {} };
-  if (children.length === 1) {
-    normalizedProps.children = children[0];
-  } else if (children.length > 1) {
-    normalizedProps.children = children;
-  }
-  const key = normalizedProps.key ?? null;
-  delete normalizedProps.key;
-  return {
-    $$typeof: SLIM_ELEMENT,
-    type,
-    props: normalizedProps,
-    key
-  };
-}
-
 // src/slim-react/renderContext.ts
 var MAP_KEY = "__slimReactContextMap";
 var _g = globalThis;
@@ -189,8 +171,7 @@ function getContextValue(context) {
   const map = _g[MAP_KEY];
   if (map && map.has(context))
     return map.get(context);
-  const c = context;
-  return "_defaultValue" in c ? c._defaultValue : c._currentValue;
+  return context._currentValue;
 }
 function pushContextValue(context, value) {
   let map = _g[MAP_KEY];
@@ -198,8 +179,7 @@ function pushContextValue(context, value) {
     map = new Map;
     _g[MAP_KEY] = map;
   }
-  const c = context;
-  const prev = map.has(context) ? map.get(context) : ("_defaultValue" in c) ? c._defaultValue : c._currentValue;
+  const prev = map.has(context) ? map.get(context) : context._currentValue;
   map.set(context, value);
   return prev;
 }
@@ -304,14 +284,35 @@ function getTreeId() {
   const stripped = (id & ~(1 << 31 - Math.clz32(id))).toString(32);
   return stripped + overflow;
 }
+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();
   const n = st.localIdCounter++;
-  let id = "_R_" + st.idPrefix + treeId;
-  if (n > 0)
-    id += "H" + n.toString(32);
-  return id + "_";
+  const suffix = n > 0 ? "H" + n.toString(32) : "";
+  if (REACT_MAJOR < 19) {
+    return ":" + st.idPrefix + "R" + treeId + suffix + ":";
+  }
+  return "_R_" + st.idPrefix + treeId + suffix + "_";
+}
+
+// src/slim-react/jsx.ts
+function createElement(type, props, ...children) {
+  const normalizedProps = { ...props || {} };
+  if (children.length === 1) {
+    normalizedProps.children = children[0];
+  } else if (children.length > 1) {
+    normalizedProps.children = children;
+  }
+  const key = normalizedProps.key ?? null;
+  delete normalizedProps.key;
+  return {
+    $$typeof: SLIM_ELEMENT,
+    type,
+    props: normalizedProps,
+    key
+  };
 }
 
 // src/slim-react/hooks.ts
@@ -364,8 +365,24 @@ function use(usable) {
 }
 // src/slim-react/dispatcher.ts
 import * as ReactNS from "react";
-var _reactInternalsKey = "__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE";
-var _internals = ReactNS[_reactInternalsKey];
+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),
@@ -391,15 +408,25 @@ var slimDispatcher = {
   useHostTransitionStatus: () => false
 };
 function installDispatcher() {
-  if (!_internals)
-    return null;
-  const prev = _internals.H;
-  _internals.H = slimDispatcher;
-  return prev;
+  _detect();
+  if (_r19) {
+    const prev = _r19.H;
+    _r19.H = slimDispatcher;
+    return prev;
+  }
+  if (_r18) {
+    const prev = _r18.ReactCurrentDispatcher.current;
+    _r18.ReactCurrentDispatcher.current = slimDispatcher;
+    return prev;
+  }
+  return null;
 }
 function restoreDispatcher(prev) {
-  if (_internals)
-    _internals.H = prev;
+  _detect();
+  if (_r19)
+    _r19.H = prev;
+  else if (_r18)
+    _r18.ReactCurrentDispatcher.current = prev;
 }
 
 // src/slim-react/render.ts
@@ -660,7 +687,7 @@ function writeAttributes(writer, props, isSvg, skip) {
     if (isSvg && key in SVG_ATTR_MAP) {
       attrName = SVG_ATTR_MAP[key];
     } else {
-      attrName = key === "className" ? "class" : key === "htmlFor" ? "for" : key === "tabIndex" ? "tabindex" : key === "defaultValue" ? "value" : key === "defaultChecked" ? "checked" : key;
+      attrName = key === "className" ? "class" : key === "htmlFor" ? "for" : key === "tabIndex" ? "tabindex" : key === "defaultValue" ? "value" : key === "defaultChecked" ? "checked" : key === "contentEditable" && REACT_MAJOR < 19 ? "contenteditable" : key;
     }
     if (value === false || value == null) {
       if (value === false && (attrName.charCodeAt(0) === 97 && attrName.startsWith("aria-") || attrName.charCodeAt(0) === 100 && attrName.startsWith("data-"))) {
@@ -871,7 +898,8 @@ function renderComponent(type, props, writer, isSvg, _suspenseRetries = 0) {
     const LazyComp = resolved?.default ?? resolved;
     return renderComponent(LazyComp, props, writer, isSvg);
   }
-  if (typeOf === REACT_CONSUMER) {
+  const isConsumer = typeOf === REACT_CONSUMER || typeOf === REACT_CONTEXT && "_context" in type && !("value" in props);
+  if (isConsumer) {
     const ctx2 = type._context;
     const value = ctx2 ? getContextValue(ctx2) : undefined;
     const result2 = typeof props.children === "function" ? props.children(value) : null;
@@ -2448,6 +2476,20 @@ var HadarsFolder = "./.hadars";
 var StaticPath = `${HadarsFolder}/static`;
 var HADARS_TMP_DIR = pathMod2.join(os.tmpdir(), "hadars");
 var ensureHadarsTmpDir = () => fs.mkdir(HADARS_TMP_DIR, { recursive: true });
+var readReactMajor = async () => {
+  let dir = process.cwd();
+  while (true) {
+    try {
+      const pkgPath = pathMod2.join(dir, "node_modules", "react", "package.json");
+      const pkg = JSON.parse(await fs.readFile(pkgPath, "utf-8"));
+      return parseInt(pkg.version.split(".")[0], 10);
+    } catch {}
+    const parent = pathMod2.dirname(dir);
+    if (parent === dir)
+      return 19;
+    dir = parent;
+  }
+};
 var validateOptions = (options) => {
   if (!options.entry) {
     throw new Error("Entry file is required");
@@ -2567,6 +2609,8 @@ var dev = async (options) => {
   });
   const workerCmd = resolveWorkerCmd(packageDir2);
   console.log("Spawning SSR worker:", workerCmd.join(" "), "entry:", entry);
+  const reactMajor = await readReactMajor();
+  const ssrDefine = { __HADARS_REACT_MAJOR__: String(reactMajor), ...options.define };
   const child = spawn(workerCmd[0], [
     ...workerCmd.slice(1),
     `--entry=${entry}`,
@@ -2574,7 +2618,7 @@ var dev = async (options) => {
     `--outFile=${SSR_FILENAME}`,
     `--base=${baseURL}`,
     ...options.swcPlugins ? [`--swcPlugins=${JSON.stringify(options.swcPlugins)}`] : [],
-    ...options.define ? [`--define=${JSON.stringify(options.define)}`] : [],
+    `--define=${JSON.stringify(ssrDefine)}`,
     ...options.moduleRules ? [`--moduleRules=${JSON.stringify(options.moduleRules, (_k, v) => v instanceof RegExp ? { __re: v.source, __flags: v.flags } : v)}`] : []
   ], { stdio: "pipe" });
   child.stdin?.end();
@@ -2748,6 +2792,7 @@ var build = async (options) => {
   const tmpFilePath = pathMod2.join(HADARS_TMP_DIR, `client-${Date.now()}.tsx`);
   await fs.writeFile(tmpFilePath, clientScript);
   const resolvedHtmlTemplate = options.htmlTemplate ? await processHtmlTemplate(pathMod2.resolve(__dirname3, options.htmlTemplate)) : undefined;
+  const reactMajor = await readReactMajor();
   console.log("Building client and server bundles in parallel...");
   await Promise.all([
     compileEntry(tmpFilePath, {
@@ -2779,7 +2824,7 @@ var build = async (options) => {
       target: "node",
       mode: "production",
       swcPlugins: options.swcPlugins,
-      define: options.define,
+      define: { __HADARS_REACT_MAJOR__: String(reactMajor), ...options.define },
       moduleRules: options.moduleRules,
       plugins: options.plugins,
       postcssPlugins: options.postcssPlugins
@@ -3184,8 +3229,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",
@@ -3199,19 +3402,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",
@@ -3226,215 +3438,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
 `);
 }