create-absolutejs 0.2.1 → 0.3.0

package/dist/index.js

@@ -188,14 +188,14 @@ var W = { exports: {} };
     return i;
   }, u.slice = function(F, s, i) {
     textLen = u.length(F), s = s || 0, i = i || 1, s < 0 && (s = textLen + s), i < 0 && (i = textLen + i);
-    for (var D = "", r = 0, n = t(F), E = 0;E < n.length; E++) {
+    for (var D = "", C = 0, n = t(F), E = 0;E < n.length; E++) {
       var a = n[E], o = u.length(a);
-      if (r >= s - (o == 2 ? 1 : 0))
-        if (r + o <= i)
+      if (C >= s - (o == 2 ? 1 : 0))
+        if (C + o <= i)
           D += a;
         else
           break;
-      r += o;
+      C += o;
     }
     return D;
   };
@@ -234,19 +234,19 @@ var w = 10;
 var N = (e = 0) => (u) => `\x1B[${u + e}m`;
 var I = (e = 0) => (u) => `\x1B[${38 + e};5;${u}m`;
 var R = (e = 0) => (u, t, F) => `\x1B[${38 + e};2;${u};${t};${F}m`;
-var C = { modifier: { reset: [0, 0], bold: [1, 22], dim: [2, 22], italic: [3, 23], underline: [4, 24], overline: [53, 55], inverse: [7, 27], hidden: [8, 28], strikethrough: [9, 29] }, color: { black: [30, 39], red: [31, 39], green: [32, 39], yellow: [33, 39], blue: [34, 39], magenta: [35, 39], cyan: [36, 39], white: [37, 39], blackBright: [90, 39], gray: [90, 39], grey: [90, 39], redBright: [91, 39], greenBright: [92, 39], yellowBright: [93, 39], blueBright: [94, 39], magentaBright: [95, 39], cyanBright: [96, 39], whiteBright: [97, 39] }, bgColor: { bgBlack: [40, 49], bgRed: [41, 49], bgGreen: [42, 49], bgYellow: [43, 49], bgBlue: [44, 49], bgMagenta: [45, 49], bgCyan: [46, 49], bgWhite: [47, 49], bgBlackBright: [100, 49], bgGray: [100, 49], bgGrey: [100, 49], bgRedBright: [101, 49], bgGreenBright: [102, 49], bgYellowBright: [103, 49], bgBlueBright: [104, 49], bgMagentaBright: [105, 49], bgCyanBright: [106, 49], bgWhiteBright: [107, 49] } };
-Object.keys(C.modifier);
-var iD = Object.keys(C.color);
-var rD = Object.keys(C.bgColor);
+var r = { modifier: { reset: [0, 0], bold: [1, 22], dim: [2, 22], italic: [3, 23], underline: [4, 24], overline: [53, 55], inverse: [7, 27], hidden: [8, 28], strikethrough: [9, 29] }, color: { black: [30, 39], red: [31, 39], green: [32, 39], yellow: [33, 39], blue: [34, 39], magenta: [35, 39], cyan: [36, 39], white: [37, 39], blackBright: [90, 39], gray: [90, 39], grey: [90, 39], redBright: [91, 39], greenBright: [92, 39], yellowBright: [93, 39], blueBright: [94, 39], magentaBright: [95, 39], cyanBright: [96, 39], whiteBright: [97, 39] }, bgColor: { bgBlack: [40, 49], bgRed: [41, 49], bgGreen: [42, 49], bgYellow: [43, 49], bgBlue: [44, 49], bgMagenta: [45, 49], bgCyan: [46, 49], bgWhite: [47, 49], bgBlackBright: [100, 49], bgGray: [100, 49], bgGrey: [100, 49], bgRedBright: [101, 49], bgGreenBright: [102, 49], bgYellowBright: [103, 49], bgBlueBright: [104, 49], bgMagentaBright: [105, 49], bgCyanBright: [106, 49], bgWhiteBright: [107, 49] } };
+Object.keys(r.modifier);
+var iD = Object.keys(r.color);
+var CD = Object.keys(r.bgColor);
 [...iD];
-function CD() {
+function rD() {
   const e = new Map;
-  for (const [u, t] of Object.entries(C)) {
+  for (const [u, t] of Object.entries(r)) {
     for (const [F, s] of Object.entries(t))
-      C[F] = { open: `\x1B[${s[0]}m`, close: `\x1B[${s[1]}m` }, t[F] = C[F], e.set(s[0], s[1]);
-    Object.defineProperty(C, u, { value: t, enumerable: false });
+      r[F] = { open: `\x1B[${s[0]}m`, close: `\x1B[${s[1]}m` }, t[F] = r[F], e.set(s[0], s[1]);
+    Object.defineProperty(r, u, { value: t, enumerable: false });
   }
-  return Object.defineProperty(C, "codes", { value: e, enumerable: false }), C.color.close = "\x1B[39m", C.bgColor.close = "\x1B[49m", C.color.ansi = N(), C.color.ansi256 = I(), C.color.ansi16m = R(), C.bgColor.ansi = N(w), C.bgColor.ansi256 = I(w), C.bgColor.ansi16m = R(w), Object.defineProperties(C, { rgbToAnsi256: { value: (u, t, F) => u === t && t === F ? u < 8 ? 16 : u > 248 ? 231 : Math.round((u - 8) / 247 * 24) + 232 : 16 + 36 * Math.round(u / 255 * 5) + 6 * Math.round(t / 255 * 5) + Math.round(F / 255 * 5), enumerable: false }, hexToRgb: { value: (u) => {
+  return Object.defineProperty(r, "codes", { value: e, enumerable: false }), r.color.close = "\x1B[39m", r.bgColor.close = "\x1B[49m", r.color.ansi = N(), r.color.ansi256 = I(), r.color.ansi16m = R(), r.bgColor.ansi = N(w), r.bgColor.ansi256 = I(w), r.bgColor.ansi16m = R(w), Object.defineProperties(r, { rgbToAnsi256: { value: (u, t, F) => u === t && t === F ? u < 8 ? 16 : u > 248 ? 231 : Math.round((u - 8) / 247 * 24) + 232 : 16 + 36 * Math.round(u / 255 * 5) + 6 * Math.round(t / 255 * 5) + Math.round(F / 255 * 5), enumerable: false }, hexToRgb: { value: (u) => {
     const t = /[a-f\d]{6}|[a-f\d]{3}/i.exec(u.toString(16));
     if (!t)
       return [0, 0, 0];
@@ -254,7 +254,7 @@ function CD() {
     F.length === 3 && (F = [...F].map((i) => i + i).join(""));
     const s = Number.parseInt(F, 16);
     return [s >> 16 & 255, s >> 8 & 255, s & 255];
-  }, enumerable: false }, hexToAnsi256: { value: (u) => C.rgbToAnsi256(...C.hexToRgb(u)), enumerable: false }, ansi256ToAnsi: { value: (u) => {
+  }, enumerable: false }, hexToAnsi256: { value: (u) => r.rgbToAnsi256(...r.hexToRgb(u)), enumerable: false }, ansi256ToAnsi: { value: (u) => {
     if (u < 8)
       return 30 + u;
     if (u < 16)
@@ -264,17 +264,17 @@ function CD() {
       t = ((u - 232) * 10 + 8) / 255, F = t, s = t;
     else {
       u -= 16;
-      const r = u % 36;
-      t = Math.floor(u / 36) / 5, F = Math.floor(r / 6) / 5, s = r % 6 / 5;
+      const C = u % 36;
+      t = Math.floor(u / 36) / 5, F = Math.floor(C / 6) / 5, s = C % 6 / 5;
     }
     const i = Math.max(t, F, s) * 2;
     if (i === 0)
       return 30;
     let D = 30 + (Math.round(s) << 2 | Math.round(F) << 1 | Math.round(t));
     return i === 2 && (D += 60), D;
-  }, enumerable: false }, rgbToAnsi: { value: (u, t, F) => C.ansi256ToAnsi(C.rgbToAnsi256(u, t, F)), enumerable: false }, hexToAnsi: { value: (u) => C.ansi256ToAnsi(C.hexToAnsi256(u)), enumerable: false } }), C;
+  }, enumerable: false }, rgbToAnsi: { value: (u, t, F) => r.ansi256ToAnsi(r.rgbToAnsi256(u, t, F)), enumerable: false }, hexToAnsi: { value: (u) => r.ansi256ToAnsi(r.hexToAnsi256(u)), enumerable: false } }), r;
 }
-var ED = CD();
+var ED = rD();
 var d = new Set(["\x1B", "›"]);
 var oD = 39;
 var y = "\x07";
@@ -288,13 +288,13 @@ var aD = (e) => e.split(" ").map((u) => p(u));
 var k = (e, u, t) => {
   const F = [...u];
   let s = false, i = false, D = p(P(e[e.length - 1]));
-  for (const [r, n] of F.entries()) {
+  for (const [C, n] of F.entries()) {
     const E = p(n);
-    if (D + E <= t ? e[e.length - 1] += n : (e.push(n), D = 0), d.has(n) && (s = true, i = F.slice(r + 1).join("").startsWith(_)), s) {
+    if (D + E <= t ? e[e.length - 1] += n : (e.push(n), D = 0), d.has(n) && (s = true, i = F.slice(C + 1).join("").startsWith(_)), s) {
       i ? n === y && (s = false, i = false) : n === G && (s = false);
       continue;
     }
-    D += E, D === t && r < F.length - 1 && (e.push(""), D = 0);
+    D += E, D === t && C < F.length - 1 && (e.push(""), D = 0);
   }
   !D && e[e.length - 1].length > 0 && e.length > 1 && (e[e.length - 2] += e.pop());
 };
@@ -310,30 +310,30 @@ var lD = (e, u, t = {}) => {
     return "";
   let F = "", s, i;
   const D = aD(e);
-  let r = [""];
+  let C = [""];
   for (const [E, a] of e.split(" ").entries()) {
-    t.trim !== false && (r[r.length - 1] = r[r.length - 1].trimStart());
-    let o = p(r[r.length - 1]);
-    if (E !== 0 && (o >= u && (t.wordWrap === false || t.trim === false) && (r.push(""), o = 0), (o > 0 || t.trim === false) && (r[r.length - 1] += " ", o++)), t.hard && D[E] > u) {
+    t.trim !== false && (C[C.length - 1] = C[C.length - 1].trimStart());
+    let o = p(C[C.length - 1]);
+    if (E !== 0 && (o >= u && (t.wordWrap === false || t.trim === false) && (C.push(""), o = 0), (o > 0 || t.trim === false) && (C[C.length - 1] += " ", o++)), t.hard && D[E] > u) {
       const c = u - o, f = 1 + Math.floor((D[E] - c - 1) / u);
-      Math.floor((D[E] - 1) / u) < f && r.push(""), k(r, a, u);
+      Math.floor((D[E] - 1) / u) < f && C.push(""), k(C, a, u);
       continue;
     }
     if (o + D[E] > u && o > 0 && D[E] > 0) {
       if (t.wordWrap === false && o < u) {
-        k(r, a, u);
+        k(C, a, u);
         continue;
       }
-      r.push("");
+      C.push("");
     }
     if (o + D[E] > u && t.wordWrap === false) {
-      k(r, a, u);
+      k(C, a, u);
       continue;
     }
-    r[r.length - 1] += a;
+    C[C.length - 1] += a;
   }
-  t.trim !== false && (r = r.map((E) => hD(E)));
-  const n = [...r.join(`
+  t.trim !== false && (C = C.map((E) => hD(E)));
+  const n = [...C.join(`
 `)];
   for (const [E, a] of n.entries()) {
     if (F += a, d.has(a)) {
@@ -389,15 +389,15 @@ function m(e, u) {
 function fD({ input: e = j, output: u = M, overwrite: t = true, hideCursor: F = true } = {}) {
   const s = g.createInterface({ input: e, output: u, prompt: "", tabSize: 1 });
   g.emitKeypressEvents(e, s), e.isTTY && e.setRawMode(true);
-  const i = (D, { name: r, sequence: n }) => {
+  const i = (D, { name: C, sequence: n }) => {
     const E = String(D);
-    if ($([E, r, n], "cancel")) {
+    if ($([E, C, n], "cancel")) {
       F && u.write(import_sisteransi.cursor.show), process.exit(0);
       return;
     }
     if (!t)
       return;
-    const a = r === "return" ? 0 : -1, o = r === "return" ? -1 : 0;
+    const a = C === "return" ? 0 : -1, o = C === "return" ? -1 : 0;
     g.moveCursor(u, a, o, () => {
       g.clearLine(u, 1, () => {
         e.once("keypress", i);
@@ -415,8 +415,8 @@ var h = (e, u, t) => (vD(e, typeof u != "symbol" ? u + "" : u, t), t);
 class x {
   constructor(u, t = true) {
     h(this, "input"), h(this, "output"), h(this, "_abortSignal"), h(this, "rl"), h(this, "opts"), h(this, "_render"), h(this, "_track", false), h(this, "_prevFrame", ""), h(this, "_subscribers", new Map), h(this, "_cursor", 0), h(this, "state", "initial"), h(this, "error", ""), h(this, "value");
-    const { input: F = j, output: s = M, render: i, signal: D, ...r } = u;
-    this.opts = r, this.onKeypress = this.onKeypress.bind(this), this.close = this.close.bind(this), this.render = this.render.bind(this), this._render = i.bind(this), this._track = t, this._abortSignal = D, this.input = F, this.output = s;
+    const { input: F = j, output: s = M, render: i, signal: D, ...C } = u;
+    this.opts = C, this.onKeypress = this.onKeypress.bind(this), this.close = this.close.bind(this), this.render = this.render.bind(this), this._render = i.bind(this), this._track = t, this._abortSignal = D, this.input = F, this.output = s;
   }
   unsubscribe() {
     this._subscribers.clear();
@@ -459,7 +459,7 @@ class x {
   }
   onKeypress(u, t) {
     if (this.state === "error" && (this.state = "active"), t?.name && (!this._track && B.aliases.has(t.name) && this.emit("cursor", B.aliases.get(t.name)), B.actions.has(t.name) && this.emit("cursor", t.name)), u && (u.toLowerCase() === "y" || u.toLowerCase() === "n") && this.emit("confirm", u.toLowerCase() === "y"), u === "\t" && this.opts.placeholder && (this.value || (this.rl?.write(this.opts.placeholder), this.emit("value", this.opts.placeholder))), u && this.emit("key", u.toLowerCase()), t?.name === "return") {
-      if (!this.value && this.opts.placeholder && (this.rl?.write(this.opts.placeholder), this.emit("value", this.opts.placeholder)), this.opts.validate) {
+      if (this.opts.validate) {
         const F = this.opts.validate(this.value);
         F && (this.error = F instanceof Error ? F.message : F, this.state = "error", this.rl?.write(this.value));
       }
@@ -619,7 +619,7 @@ var u = (t, n) => V2 ? t : n;
 var le = u("◆", "*");
 var L2 = u("■", "x");
 var W2 = u("▲", "x");
-var C2 = u("◇", "o");
+var C = u("◇", "o");
 var ue = u("┌", "T");
 var o = u("│", "|");
 var d2 = u("└", "—");
@@ -654,11 +654,10 @@ var availableFrontends = [
   "react",
   "html",
   "svelte",
+  "vue",
   "htmx"
 ];
 var availableAuthProviders = ["absoluteAuth", "none"];
-var availableLanguages = ["ts", "js"];
-var availableHTMLScriptOptions = ["js", "ts", "none"];
 var availableDatabaseEngines = [
   "postgresql",
   "mysql",
@@ -686,8 +685,9 @@ var availableCodeQualityTools = ["eslint+prettier", "biome"];
 var frontendLabels = {
   react: import_picocolors3.cyan("React"),
   html: "HTML",
+  htmx: "HTMX",
   svelte: import_picocolors3.magenta("Svelte"),
-  htmx: "HTMX"
+  vue: import_picocolors3.green("Vue")
 };
 var availablePlugins = [
   {
@@ -720,6 +720,17 @@ var absoluteAuthPlugin = {
   latestVersion: "0.3.2",
   value: "@absolutejs/auth"
 };
+var scopedStatePlugin = {
+  imports: [
+    {
+      config: { count: { value: 0 } },
+      isPlugin: true,
+      packageName: "scopedState"
+    }
+  ],
+  latestVersion: "0.1.1",
+  value: "elysia-scoped-state"
+};
 var eslintAndPrettierDependencies = [
   {
     latestVersion: "9.27.0",
@@ -740,10 +751,11 @@ var defaultDependencies = [
 var defaultPlugins = [
   {
     imports: [
+      { isPlugin: false, packageName: "asset" },
       { isPlugin: false, packageName: "build" },
-      { isPlugin: true, packageName: "networkingPlugin" }
+      { isPlugin: true, packageName: "networking" }
     ],
-    latestVersion: "0.8.14",
+    latestVersion: "0.11.1",
     value: "@absolutejs/absolute"
   },
   {
@@ -783,14 +795,13 @@ Options:
   ${import_picocolors4.cyan("--host")} ${import_picocolors4.dim(import_picocolors4.cyan("<host>"))}                   Database host provider (neon | planetscale | supabase | turso | vercel | upstash | atlas) or 'none' to skip database host setup
   ${import_picocolors4.cyan("--html")} ${import_picocolors4.dim(import_picocolors4.cyan("<dir>"))}                    Directory name for an HTML frontend
   ${import_picocolors4.cyan("--htmx")} ${import_picocolors4.dim(import_picocolors4.cyan("<dir>"))}                    Directory name for an HTMX frontend
-  ${import_picocolors4.cyan("--lang")} ${import_picocolors4.dim(import_picocolors4.cyan("<lang>"))}                   Language: "ts" or "js"
   ${import_picocolors4.cyan("--lts")}                           Use LTS versions of required packages
   ${import_picocolors4.cyan("--npm")}                           Use the package manager that invoked this command to install dependencies
   ${import_picocolors4.cyan("--orm")} ${import_picocolors4.dim(import_picocolors4.cyan("<orm>"))}                     ORM to configure: "drizzle" or "prisma" or 'none' to skip ORM setup
   ${import_picocolors4.cyan("--plugin")} ${import_picocolors4.dim(import_picocolors4.cyan("<plugin>"))}               Elysia plugin(s) to include (can be specified multiple times), passing 'none' will skip plugin setup and ignore any other plugin options
   ${import_picocolors4.cyan("--quality")} ${import_picocolors4.dim(import_picocolors4.cyan("<tool>"))}                Code quality tool: "eslint+prettier" or "biome"
   ${import_picocolors4.cyan("--react")} ${import_picocolors4.dim(import_picocolors4.cyan("<dir>"))}                   Directory name for a React frontend
-  ${import_picocolors4.cyan("--script")} ${import_picocolors4.dim(import_picocolors4.cyan("<option>"))}               HTML scripting option: "ts" or "js" or 'none' to skip HTML scripting setup 
+  ${import_picocolors4.cyan("--html-script")} ${import_picocolors4.dim(import_picocolors4.cyan("<option>"))}          Enable HTML scripting with TypeScript
   ${import_picocolors4.cyan("--skip")}                          Skips non required prompts and uses 'none' for all optional configurations
   ${import_picocolors4.cyan("--svelte")} ${import_picocolors4.dim(import_picocolors4.cyan("<dir>"))}                  Directory name for a Svelte frontend
   ${import_picocolors4.cyan("--tailwind")}                      Include Tailwind CSS setup
@@ -810,13 +821,12 @@ var getOutroMessage = ({
 var getDebugMessage = ({
   response: {
     projectName,
-    language,
     codeQualityTool,
     directoryConfig,
     useTailwind,
     tailwind,
     frontends,
-    htmlScriptOption,
+    useHTMLScripts,
     frontendDirectories,
     buildDirectory,
     assetsDirectory,
@@ -831,12 +841,7 @@ var getDebugMessage = ({
   },
   packageManager
 }) => {
-  const htmlLabels = {
-    js: import_picocolors4.yellow("JavaScript"),
-    none: import_picocolors4.dim("None"),
-    ts: import_picocolors4.blueBright("TypeScript")
-  };
-  const htmlScriptingValue = htmlScriptOption ? htmlLabels[htmlScriptOption] : import_picocolors4.dim("None");
+  const htmlScriptingValue = useHTMLScripts ? import_picocolors4.blueBright("TypeScript") : import_picocolors4.dim("None");
   const frameworkConfig = frontends.map((name) => `${frontendLabels[name]}: src/frontend/${frontendDirectories[name]}`).join(`
     `);
   const tailwindSection = useTailwind && tailwind ? `Input:  ${tailwind.input}
@@ -846,7 +851,6 @@ Output: ${tailwind.output}` : import_picocolors4.dim("None");
     ["Project Name", projectName],
     ["Package Manager", packageManager],
     ["Config Type", isCustomConfig ? import_picocolors4.green("Custom") : import_picocolors4.dim("Default")],
-    ["Language", language === "ts" ? import_picocolors4.blueBright("TypeScript") : import_picocolors4.yellow("JavaScript")],
     ["Linting", codeQualityTool === "eslint+prettier" ? "ESLint + Prettier" : "Biome"],
     ["Tailwind Configuration", tailwindSection],
     [frontends.length === 1 ? "Frontend" : "Frontends", frontends.map((name) => frontendLabels[name]).join(", ")],
@@ -886,7 +890,7 @@ var u2 = (t, n) => V3 ? t : n;
 var le2 = u2("◆", "*");
 var L3 = u2("■", "x");
 var W3 = u2("▲", "x");
-var C3 = u2("◇", "o");
+var C2 = u2("◇", "o");
 var ue2 = u2("┌", "T");
 var o2 = u2("│", "|");
 var d3 = u2("└", "—");
@@ -914,15 +918,15 @@ var b2 = (t) => {
     case "error":
       return import_picocolors5.default.yellow(W3);
     case "submit":
-      return import_picocolors5.default.green(C3);
+      return import_picocolors5.default.green(C2);
   }
 };
 var G2 = (t) => {
-  const { cursor: n, options: r, style: i } = t, s = t.maxItems ?? Number.POSITIVE_INFINITY, c = Math.max(process.stdout.rows - 4, 0), a = Math.min(c, Math.max(s, 5));
+  const { cursor: n, options: r2, style: i } = t, s = t.maxItems ?? Number.POSITIVE_INFINITY, c = Math.max(process.stdout.rows - 4, 0), a = Math.min(c, Math.max(s, 5));
   let l2 = 0;
-  n >= l2 + a - 3 ? l2 = Math.max(Math.min(n - a + 3, r.length - a), 0) : n < l2 + 2 && (l2 = Math.max(n - 2, 0));
-  const $2 = a < r.length && l2 > 0, g2 = a < r.length && l2 + a < r.length;
-  return r.slice(l2, l2 + a).map((p2, v2, f) => {
+  n >= l2 + a - 3 ? l2 = Math.max(Math.min(n - a + 3, r2.length - a), 0) : n < l2 + 2 && (l2 = Math.max(n - 2, 0));
+  const $2 = a < r2.length && l2 > 0, g2 = a < r2.length && l2 + a < r2.length;
+  return r2.slice(l2, l2 + a).map((p2, v2, f) => {
     const j2 = v2 === 0 && $2, E = v2 === f.length - 1 && g2;
     return j2 || E ? import_picocolors5.default.dim("...") : i(p2, v2 + l2 === n);
   });
@@ -930,7 +934,7 @@ var G2 = (t) => {
 var he = (t) => new RD({ validate: t.validate, placeholder: t.placeholder, defaultValue: t.defaultValue, initialValue: t.initialValue, render() {
   const n = `${import_picocolors5.default.gray(o2)}
 ${b2(this.state)}  ${t.message}
-`, r = t.placeholder ? import_picocolors5.default.inverse(t.placeholder[0]) + import_picocolors5.default.dim(t.placeholder.slice(1)) : import_picocolors5.default.inverse(import_picocolors5.default.hidden("_")), i = this.value ? this.valueWithCursor : r;
+`, r2 = t.placeholder ? import_picocolors5.default.inverse(t.placeholder[0]) + import_picocolors5.default.dim(t.placeholder.slice(1)) : import_picocolors5.default.inverse(import_picocolors5.default.hidden("_")), i = this.value ? this.valueWithCursor : r2;
   switch (this.state) {
     case "error":
       return `${n.trim()}
@@ -949,11 +953,11 @@ ${import_picocolors5.default.cyan(d3)}
   }
 } }).prompt();
 var ye = (t) => {
-  const n = t.active ?? "Yes", r = t.inactive ?? "No";
-  return new dD({ active: n, inactive: r, initialValue: t.initialValue ?? true, render() {
+  const n = t.active ?? "Yes", r2 = t.inactive ?? "No";
+  return new dD({ active: n, inactive: r2, initialValue: t.initialValue ?? true, render() {
     const i = `${import_picocolors5.default.gray(o2)}
 ${b2(this.state)}  ${t.message}
-`, s = this.value ? n : r;
+`, s = this.value ? n : r2;
     switch (this.state) {
       case "submit":
         return `${i}${import_picocolors5.default.gray(o2)}  ${import_picocolors5.default.dim(s)}`;
@@ -961,20 +965,20 @@ ${b2(this.state)}  ${t.message}
         return `${i}${import_picocolors5.default.gray(o2)}  ${import_picocolors5.default.strikethrough(import_picocolors5.default.dim(s))}
 ${import_picocolors5.default.gray(o2)}`;
       default:
-        return `${i}${import_picocolors5.default.cyan(o2)}  ${this.value ? `${import_picocolors5.default.green(k3)} ${n}` : `${import_picocolors5.default.dim(P3)} ${import_picocolors5.default.dim(n)}`} ${import_picocolors5.default.dim("/")} ${this.value ? `${import_picocolors5.default.dim(P3)} ${import_picocolors5.default.dim(r)}` : `${import_picocolors5.default.green(k3)} ${r}`}
+        return `${i}${import_picocolors5.default.cyan(o2)}  ${this.value ? `${import_picocolors5.default.green(k3)} ${n}` : `${import_picocolors5.default.dim(P3)} ${import_picocolors5.default.dim(n)}`} ${import_picocolors5.default.dim("/")} ${this.value ? `${import_picocolors5.default.dim(P3)} ${import_picocolors5.default.dim(r2)}` : `${import_picocolors5.default.green(k3)} ${r2}`}
 ${import_picocolors5.default.cyan(d3)}
 `;
     }
   } }).prompt();
 };
 var ve = (t) => {
-  const n = (r, i) => {
-    const s = r.label ?? String(r.value);
+  const n = (r2, i) => {
+    const s = r2.label ?? String(r2.value);
     switch (i) {
       case "selected":
         return `${import_picocolors5.default.dim(s)}`;
       case "active":
-        return `${import_picocolors5.default.green(k3)} ${s} ${r.hint ? import_picocolors5.default.dim(`(${r.hint})`) : ""}`;
+        return `${import_picocolors5.default.green(k3)} ${s} ${r2.hint ? import_picocolors5.default.dim(`(${r2.hint})`) : ""}`;
       case "cancelled":
         return `${import_picocolors5.default.strikethrough(import_picocolors5.default.dim(s))}`;
       default:
@@ -982,17 +986,17 @@ var ve = (t) => {
     }
   };
   return new LD({ options: t.options, initialValue: t.initialValue, render() {
-    const r = `${import_picocolors5.default.gray(o2)}
+    const r2 = `${import_picocolors5.default.gray(o2)}
 ${b2(this.state)}  ${t.message}
 `;
     switch (this.state) {
       case "submit":
-        return `${r}${import_picocolors5.default.gray(o2)}  ${n(this.options[this.cursor], "selected")}`;
+        return `${r2}${import_picocolors5.default.gray(o2)}  ${n(this.options[this.cursor], "selected")}`;
       case "cancel":
-        return `${r}${import_picocolors5.default.gray(o2)}  ${n(this.options[this.cursor], "cancelled")}
+        return `${r2}${import_picocolors5.default.gray(o2)}  ${n(this.options[this.cursor], "cancelled")}
 ${import_picocolors5.default.gray(o2)}`;
       default:
-        return `${r}${import_picocolors5.default.cyan(o2)}  ${G2({ cursor: this.cursor, options: this.options, maxItems: t.maxItems, style: (i, s) => n(i, s ? "active" : "inactive") }).join(`
+        return `${r2}${import_picocolors5.default.cyan(o2)}  ${G2({ cursor: this.cursor, options: this.options, maxItems: t.maxItems, style: (i, s) => n(i, s ? "active" : "inactive") }).join(`
 ${import_picocolors5.default.cyan(o2)}  `)}
 ${import_picocolors5.default.cyan(d3)}
 `;
@@ -1000,16 +1004,16 @@ ${import_picocolors5.default.cyan(d3)}
   } }).prompt();
 };
 var fe = (t) => {
-  const n = (r, i) => {
-    const s = r.label ?? String(r.value);
-    return i === "active" ? `${import_picocolors5.default.cyan(A3)} ${s} ${r.hint ? import_picocolors5.default.dim(`(${r.hint})`) : ""}` : i === "selected" ? `${import_picocolors5.default.green(T2)} ${import_picocolors5.default.dim(s)} ${r.hint ? import_picocolors5.default.dim(`(${r.hint})`) : ""}` : i === "cancelled" ? `${import_picocolors5.default.strikethrough(import_picocolors5.default.dim(s))}` : i === "active-selected" ? `${import_picocolors5.default.green(T2)} ${s} ${r.hint ? import_picocolors5.default.dim(`(${r.hint})`) : ""}` : i === "submitted" ? `${import_picocolors5.default.dim(s)}` : `${import_picocolors5.default.dim(F2)} ${import_picocolors5.default.dim(s)}`;
+  const n = (r2, i) => {
+    const s = r2.label ?? String(r2.value);
+    return i === "active" ? `${import_picocolors5.default.cyan(A3)} ${s} ${r2.hint ? import_picocolors5.default.dim(`(${r2.hint})`) : ""}` : i === "selected" ? `${import_picocolors5.default.green(T2)} ${import_picocolors5.default.dim(s)} ${r2.hint ? import_picocolors5.default.dim(`(${r2.hint})`) : ""}` : i === "cancelled" ? `${import_picocolors5.default.strikethrough(import_picocolors5.default.dim(s))}` : i === "active-selected" ? `${import_picocolors5.default.green(T2)} ${s} ${r2.hint ? import_picocolors5.default.dim(`(${r2.hint})`) : ""}` : i === "submitted" ? `${import_picocolors5.default.dim(s)}` : `${import_picocolors5.default.dim(F2)} ${import_picocolors5.default.dim(s)}`;
   };
-  return new SD({ options: t.options, initialValues: t.initialValues, required: t.required ?? true, cursorAt: t.cursorAt, validate(r) {
-    if (this.required && r.length === 0)
+  return new SD({ options: t.options, initialValues: t.initialValues, required: t.required ?? true, cursorAt: t.cursorAt, validate(r2) {
+    if (this.required && r2.length === 0)
       return `Please select at least one option.
 ${import_picocolors5.default.reset(import_picocolors5.default.dim(`Press ${import_picocolors5.default.gray(import_picocolors5.default.bgWhite(import_picocolors5.default.inverse(" space ")))} to select, ${import_picocolors5.default.gray(import_picocolors5.default.bgWhite(import_picocolors5.default.inverse(" enter ")))} to submit`))}`;
   }, render() {
-    const r = `${import_picocolors5.default.gray(o2)}
+    const r2 = `${import_picocolors5.default.gray(o2)}
 ${b2(this.state)}  ${t.message}
 `, i = (s, c) => {
       const a = this.value.includes(s.value);
@@ -1017,23 +1021,23 @@ ${b2(this.state)}  ${t.message}
     };
     switch (this.state) {
       case "submit":
-        return `${r}${import_picocolors5.default.gray(o2)}  ${this.options.filter(({ value: s }) => this.value.includes(s)).map((s) => n(s, "submitted")).join(import_picocolors5.default.dim(", ")) || import_picocolors5.default.dim("none")}`;
+        return `${r2}${import_picocolors5.default.gray(o2)}  ${this.options.filter(({ value: s }) => this.value.includes(s)).map((s) => n(s, "submitted")).join(import_picocolors5.default.dim(", ")) || import_picocolors5.default.dim("none")}`;
       case "cancel": {
         const s = this.options.filter(({ value: c }) => this.value.includes(c)).map((c) => n(c, "cancelled")).join(import_picocolors5.default.dim(", "));
-        return `${r}${import_picocolors5.default.gray(o2)}  ${s.trim() ? `${s}
+        return `${r2}${import_picocolors5.default.gray(o2)}  ${s.trim() ? `${s}
 ${import_picocolors5.default.gray(o2)}` : ""}`;
       }
       case "error": {
         const s = this.error.split(`
 `).map((c, a) => a === 0 ? `${import_picocolors5.default.yellow(d3)}  ${import_picocolors5.default.yellow(c)}` : `   ${c}`).join(`
 `);
-        return `${r + import_picocolors5.default.yellow(o2)}  ${G2({ options: this.options, cursor: this.cursor, maxItems: t.maxItems, style: i }).join(`
+        return `${r2 + import_picocolors5.default.yellow(o2)}  ${G2({ options: this.options, cursor: this.cursor, maxItems: t.maxItems, style: i }).join(`
 ${import_picocolors5.default.yellow(o2)}  `)}
 ${s}
 `;
       }
       default:
-        return `${r}${import_picocolors5.default.cyan(o2)}  ${G2({ options: this.options, cursor: this.cursor, maxItems: t.maxItems, style: i }).join(`
+        return `${r2}${import_picocolors5.default.cyan(o2)}  ${G2({ options: this.options, cursor: this.cursor, maxItems: t.maxItems, style: i }).join(`
 ${import_picocolors5.default.cyan(o2)}  `)}
 ${import_picocolors5.default.cyan(d3)}
 `;
@@ -1047,7 +1051,7 @@ var xe = (t = "") => {
 };
 var J3 = `${import_picocolors5.default.gray(o2)}  `;
 var Y2 = ({ indicator: t = "dots" } = {}) => {
-  const n = V3 ? ["◒", "◐", "◓", "◑"] : ["•", "o", "O", "0"], r = V3 ? 80 : 120, i = process.env.CI === "true";
+  const n = V3 ? ["◒", "◐", "◓", "◑"] : ["•", "o", "O", "0"], r2 = V3 ? 80 : 120, i = process.env.CI === "true";
   let s, c, a = false, l2 = "", $2, g2 = performance.now();
   const p2 = (m2) => {
     const h2 = m2 > 1 ? "Something went wrong" : "Canceled";
@@ -1085,10 +1089,10 @@ var Y2 = ({ indicator: t = "dots" } = {}) => {
         process.stdout.write(`${I2}  ${l2}${z2}`);
       }
       h2 = h2 + 1 < n.length ? h2 + 1 : 0, w2 = w2 < n.length ? w2 + 0.125 : 0;
-    }, r);
+    }, r2);
   }, N2 = (m2 = "", h2 = 0) => {
     a = false, clearInterval(c), B2();
-    const w2 = h2 === 0 ? import_picocolors5.default.green(C3) : h2 === 1 ? import_picocolors5.default.red(L3) : import_picocolors5.default.red(W3);
+    const w2 = h2 === 0 ? import_picocolors5.default.green(C2) : h2 === 1 ? import_picocolors5.default.red(L3) : import_picocolors5.default.red(W3);
     l2 = R2(m2 ?? l2), t === "timer" ? process.stdout.write(`${w2}  ${l2} ${O2(g2)}
 `) : process.stdout.write(`${w2}  ${l2}
 `), E(), s();
@@ -1322,14 +1326,12 @@ var getFrontendDirectoryConfigurations = async (directoryConfiguration, frontend
 };
 
 // src/typeGuards.ts
-var isLanguage = (value) => value === "ts" || value === "js";
 var isAuthProvider = (value) => value === "absoluteAuth" || value === "none" || value === undefined;
 var isDirectoryConfig = (value) => value === "default" || value === "custom";
 var isDatabaseEngine = (value) => value === "postgresql" || value === "mysql" || value === "sqlite" || value === "mongodb" || value === "redis" || value === "singlestore" || value === "cockroachdb" || value === "mssql" || value === "none" || value === undefined;
 var isDatabaseHost = (value) => value === "neon" || value === "planetscale" || value === "supabase" || value === "turso" || value === "vercel" || value === "upstash" || value === "atlas" || value === undefined;
 var isORM = (value) => value === "drizzle" || value === "prisma" || value === undefined;
 var isCodeQualityTool = (value) => value === "eslint+prettier" || value === "biome" || value === undefined;
-var isHTMLScriptOption = (value) => value === "ts" || value === "js" || value === "ts+ssr" || value === "js+ssr" || value === "none" || value === undefined;
 var isFrontend = (value) => value !== undefined && Object.keys(frontendLabels).includes(value);
 
 // src/questions/frontends.ts
@@ -1347,13 +1349,13 @@ var getFrontends = async () => {
 };
 
 // src/questions/htmlScriptingOption.ts
-var getHtmlScriptingOption = async (language) => {
+var getHtmlScriptingOption = async () => {
   const useScripts = await ye({
     message: "Would you like to use scripts for your HTML pages?"
   });
   if (pD(useScripts))
     abort();
-  return useScripts ? language : undefined;
+  return useScripts;
 };
 
 // src/questions/initializeGitNow.ts
@@ -1376,30 +1378,15 @@ var getInstallDependencies = async () => {
   return installDependenciesNow;
 };
 
-// src/questions/language.ts
-var import_picocolors11 = __toESM(require_picocolors(), 1);
-var getLanguage = async () => {
-  const language = await ve({
-    message: "Language:",
-    options: [
-      { label: import_picocolors11.blueBright("TypeScript"), value: "ts" },
-      { label: import_picocolors11.yellow("JavaScript"), value: "js" }
-    ]
-  });
-  if (pD(language))
-    abort();
-  return language;
-};
-
 // src/questions/orm.ts
-var import_picocolors12 = __toESM(require_picocolors(), 1);
+var import_picocolors11 = __toESM(require_picocolors(), 1);
 var getORM = async () => {
   const orm = await ve({
     message: "Choose an ORM (optional):",
     options: [
       { label: "None", value: "none" },
-      { label: import_picocolors12.cyan("Drizzle"), value: "drizzle" },
-      { label: import_picocolors12.magenta("Prisma"), value: "prisma" }
+      { label: import_picocolors11.cyan("Drizzle"), value: "drizzle" },
+      { label: import_picocolors11.magenta("Prisma"), value: "prisma" }
     ]
   });
   if (pD(orm))
@@ -1427,7 +1414,7 @@ var getProjectName = async () => {
   });
   if (pD(projectName))
     abort();
-  return projectName;
+  return projectName ?? "absolutejs-project";
 };
 
 // src/questions/useTailwind.ts
@@ -1441,11 +1428,10 @@ var getUseTailwind = async () => {
 // src/prompt.ts
 var prompt = async (argumentConfiguration) => {
   const projectName = argumentConfiguration.projectName ?? await getProjectName();
-  const language = argumentConfiguration.language ?? await getLanguage();
   const codeQualityTool = argumentConfiguration.codeQualityTool ?? await getCodeQualityTool();
   const useTailwind = argumentConfiguration.useTailwind ?? await getUseTailwind();
   const frontends = argumentConfiguration.frontends?.filter((frontend) => frontend !== undefined) ?? await getFrontends();
-  const htmlScriptOption = !frontends.includes("html") || argumentConfiguration.htmlScriptOption === "none" ? undefined : argumentConfiguration.htmlScriptOption ?? await getHtmlScriptingOption(language);
+  const useHTMLScripts = !frontends.includes("html") || argumentConfiguration.useHTMLScripts === undefined ? false : argumentConfiguration.useHTMLScripts ?? await getHtmlScriptingOption();
   const databaseEngine = argumentConfiguration.databaseEngine ?? await getDatabaseEngine();
   const databaseHost = argumentConfiguration.databaseHost ?? await getDatabaseHost(databaseEngine);
   const orm = databaseEngine !== undefined && databaseEngine !== "none" ? argumentConfiguration.orm ?? await getORM() : undefined;
@@ -1474,28 +1460,27 @@ var prompt = async (argumentConfiguration) => {
     directoryConfig,
     frontendDirectories,
     frontends,
-    htmlScriptOption,
     initializeGitNow,
     installDependenciesNow,
-    language,
     orm,
     plugins,
     projectName,
     tailwind,
+    useHTMLScripts,
     useTailwind
   };
   return values;
 };
 
 // src/scaffold.ts
-import { copyFileSync as copyFileSync4 } from "node:fs";
-import { join as join10, dirname } from "node:path";
+import { copyFileSync as copyFileSync8 } from "node:fs";
+import { join as join12, dirname } from "node:path";
 import { fileURLToPath } from "node:url";
 
 // src/commands/formatProject.ts
 import { execSync } from "child_process";
 import { exit as exit2 } from "process";
-var import_picocolors13 = __toESM(require_picocolors(), 1);
+var import_picocolors12 = __toESM(require_picocolors(), 1);
 
 // src/utils/commandMaps.ts
 var formatCommands = {
@@ -1521,9 +1506,9 @@ var formatProject = ({
     const fmt = formatCommands[packageManager] ?? "bun run format";
     spin.start("Formatting files…");
     execSync(fmt, { cwd: projectName, stdio: "pipe" });
-    spin.stop(import_picocolors13.green("Files formatted"));
+    spin.stop(import_picocolors12.green("Files formatted"));
   } catch (err) {
-    spin.stop(import_picocolors13.red("Failed to format files"), 1);
+    spin.stop(import_picocolors12.red("Failed to format files"), 1);
     console.error("Error formatting:", err);
     exit2(1);
   }
@@ -1532,7 +1517,7 @@ var formatProject = ({
 // src/commands/installDependencies.ts
 import { execSync as execSync2 } from "child_process";
 import { exit as exit3 } from "process";
-var import_picocolors14 = __toESM(require_picocolors(), 1);
+var import_picocolors13 = __toESM(require_picocolors(), 1);
 var installDependencies = async ({
   projectName,
   packageManager
@@ -1542,16 +1527,16 @@ var installDependencies = async ({
   try {
     spin.start("Installing dependencies…");
     execSync2(cmd, { cwd: projectName, stdio: "pipe" });
-    spin.stop(import_picocolors14.green("Dependencies installed"));
+    spin.stop(import_picocolors13.green("Dependencies installed"));
   } catch (err) {
-    spin.stop(import_picocolors14.red("Installation failed"), 1);
+    spin.stop(import_picocolors13.red("Installation failed"), 1);
     console.error("Error installing dependencies:", err);
     exit3(1);
   }
 };
 
 // src/generators/configurations/addConfigurationFiles.ts
-var import_picocolors15 = __toESM(require_picocolors(), 1);
+var import_picocolors14 = __toESM(require_picocolors(), 1);
 import { copyFileSync, writeFileSync } from "fs";
 import { join } from "path";
 
@@ -1575,34 +1560,32 @@ var generatePrettierrc = (frontends) => {
 var addConfigurationFiles = ({
   tailwind,
   templatesDirectory,
-  language,
   codeQualityTool,
   frontends,
   initializeGitNow,
   projectName
 }) => {
+  copyFileSync(join(templatesDirectory, "configurations", "tsconfig.example.json"), join(projectName, "tsconfig.json"));
   if (tailwind) {
     copyFileSync(join(templatesDirectory, "tailwind", "postcss.config.ts"), join(projectName, "postcss.config.ts"));
     copyFileSync(join(templatesDirectory, "tailwind", "tailwind.config.ts"), join(projectName, "tailwind.config.ts"));
   }
   if (initializeGitNow)
     copyFileSync(join(templatesDirectory, "git", "gitignore"), join(projectName, ".gitignore"));
-  if (language === "ts")
-    copyFileSync(join(templatesDirectory, "configurations", "tsconfig.example.json"), join(projectName, "tsconfig.json"));
   if (codeQualityTool === "eslint+prettier") {
     copyFileSync(join(templatesDirectory, "configurations", "eslint.config.mjs"), join(projectName, "eslint.config.mjs"));
     copyFileSync(join(templatesDirectory, "configurations", ".prettierignore"), join(projectName, ".prettierignore"));
     const prettierrc = generatePrettierrc(frontends);
     writeFileSync(join(projectName, ".prettierrc.json"), prettierrc);
   } else
-    console.warn(`${import_picocolors15.dim("│")}
-${import_picocolors15.yellow("▲")}  Biome support not implemented yet`);
+    console.warn(`${import_picocolors14.dim("│")}
+${import_picocolors14.yellow("▲")}  Biome support not implemented yet`);
 };
 
 // src/generators/configurations/generatePackageJson.ts
 import { writeFileSync as writeFileSync2 } from "fs";
 import { join as join2 } from "path";
-var import_picocolors16 = __toESM(require_picocolors(), 1);
+var import_picocolors15 = __toESM(require_picocolors(), 1);
 
 // src/utils/getPackageVersion.ts
 import { execSync as execSync3 } from "child_process";
@@ -1632,8 +1615,10 @@ var createPackageJson = ({
   const resolveVersion = (name, listed) => latest ? getPackageVersion(name) ?? listed : listed;
   const dependencies = {};
   const devDependencies = {};
-  const usesReact = frontendDirectories["react"] !== undefined;
-  const usesSvelte = frontendDirectories["svelte"] !== undefined;
+  const requiresReact = frontendDirectories["react"] !== undefined;
+  const requiresSvelte = frontendDirectories["svelte"] !== undefined;
+  const requiresVue = frontendDirectories["vue"] !== undefined;
+  const requiresHtmx = frontendDirectories["htmx"] !== undefined;
   for (const p2 of defaultPlugins) {
     dependencies[p2.value] = resolveVersion(p2.value, p2.latestVersion);
   }
@@ -1657,20 +1642,26 @@ var createPackageJson = ({
     devDependencies["tailwindcss"] = resolveVersion("tailwindcss", "4.1.7");
     devDependencies["@tailwindcss/cli"] = resolveVersion("@tailwindcss/cli", "4.1.7");
   }
-  if (usesReact) {
+  if (requiresReact) {
     dependencies["react"] = resolveVersion("react", "19.1.0");
     dependencies["react-dom"] = resolveVersion("react-dom", "19.1.0");
     devDependencies["@types/react"] = resolveVersion("@types/react", "19.1.5");
     devDependencies["@types/react-dom"] = resolveVersion("@types/react-dom", "19.1.5");
   }
-  if (usesSvelte) {
+  if (requiresSvelte) {
     dependencies["svelte"] = resolveVersion("svelte", "5.34.7");
     codeQualityTool === "eslint+prettier" && (devDependencies["prettier-plugin-svelte"] = resolveVersion("prettier-plugin-svelte", "3.4.0"));
   }
-  latest && s.stop(import_picocolors16.green("Package versions resolved"));
+  if (requiresVue) {
+    dependencies["vue"] = resolveVersion("vue", "3.5.17");
+  }
+  if (requiresHtmx) {
+    dependencies["elysia-scoped-state"] = resolveVersion("elysia-scoped-state", "0.1.1");
+  }
+  latest && s.stop(import_picocolors15.green("Package versions resolved"));
   const scripts = {
-    dev: "bun run src/backend/server.ts",
-    format: `prettier --write "./**/*.{js,ts,css,json,mjs,md${usesReact ? ",jsx,tsx" : ""}${usesSvelte ? ",svelte" : ""}}"`,
+    dev: "bun run --watch src/backend/server.ts",
+    format: `prettier --write "./**/*.{js,ts,css,json,mjs,md${requiresReact ? ",jsx,tsx" : ""}${requiresSvelte ? ",svelte" : ""}${requiresVue ? ",vue" : ""}}"`,
     lint: "eslint ./src",
     test: 'echo "Error: no test specified" && exit 1',
     typecheck: "bun run tsc --noEmit"
@@ -1681,35 +1672,41 @@ var createPackageJson = ({
     name: projectName,
     scripts,
     type: "module",
-    version: "0.1.0"
+    version: "0.0.0"
   };
   writeFileSync2(join2(projectName, "package.json"), JSON.stringify(packageJson));
 };
 
 // src/generators/configurations/initializeRoot.ts
-import { copyFileSync as copyFileSync2, cpSync, existsSync, mkdirSync } from "node:fs";
+import { copyFileSync as copyFileSync2, existsSync, mkdirSync } from "node:fs";
 import { join as join3 } from "node:path";
 var initalizeRoot = (projectName, templatesDirectory) => {
-  if (existsSync(projectName))
+  if (existsSync(projectName)) {
     throw new Error(`Cannot create project "${projectName}": directory already exists.`);
+  }
   mkdirSync(projectName);
   const srcDir = join3(projectName, "src");
   mkdirSync(srcDir);
-  copyFileSync2(join3(templatesDirectory, "constants.ts"), join3(projectName, "src", "constants.ts"));
+  mkdirSync(join3(srcDir, "types"));
+  const constantsSrc = join3(templatesDirectory, "constants.ts");
+  const constantsDest = join3(srcDir, "constants.ts");
+  copyFileSync2(constantsSrc, constantsDest);
   const frontendDirectory = join3(srcDir, "frontend");
   const backendDirectory = join3(srcDir, "backend");
   mkdirSync(frontendDirectory);
   mkdirSync(backendDirectory);
-  mkdirSync(join3(srcDir, "types"));
-  cpSync(join3(templatesDirectory, "assets"), join3(backendDirectory, "assets"), { recursive: true });
-  return {
-    backendDirectory,
-    frontendDirectory
-  };
+  const projectAssetsDirectory = join3(backendDirectory, "assets");
+  mkdirSync(projectAssetsDirectory);
+  mkdirSync(join3(projectAssetsDirectory, "ico"), { recursive: true });
+  mkdirSync(join3(projectAssetsDirectory, "png"), { recursive: true });
+  mkdirSync(join3(projectAssetsDirectory, "svg"), { recursive: true });
+  copyFileSync2(join3(templatesDirectory, "assets", "ico", "favicon.ico"), join3(projectAssetsDirectory, "ico", "favicon.ico"));
+  copyFileSync2(join3(templatesDirectory, "assets", "png", "absolutejs-temp.png"), join3(projectAssetsDirectory, "png", "absolutejs-temp.png"));
+  return { backendDirectory, frontendDirectory, projectAssetsDirectory };
 };
 
 // src/generators/db/scaffoldDatabase.ts
-var import_picocolors17 = __toESM(require_picocolors(), 1);
+var import_picocolors16 = __toESM(require_picocolors(), 1);
 import { mkdirSync as mkdirSync2 } from "fs";
 import { join as join5 } from "path";
 
@@ -1738,15 +1735,15 @@ var scaffoldDatabase = ({
 }) => {
   mkdirSync2(join5(projectName, databaseDirectory), { recursive: true });
   if (databaseEngine !== "postgresql" && databaseEngine !== "none") {
-    console.warn(`${import_picocolors17.dim("│")}
-${import_picocolors17.yellow("▲")}  Only PostgreSQL support is implemented so far`);
+    console.warn(`${import_picocolors16.dim("│")}
+${import_picocolors16.yellow("▲")}  Only PostgreSQL support is implemented so far`);
   }
   if (orm === "drizzle") {
     createDrizzleConfig({ databaseEngine, projectName });
   }
   if (orm === "prisma") {
-    console.warn(`${import_picocolors17.dim("│")}
-${import_picocolors17.yellow("▲")}  Prisma support is not implemented yet`);
+    console.warn(`${import_picocolors16.dim("│")}
+${import_picocolors16.yellow("▲")}  Prisma support is not implemented yet`);
   }
 };
 
@@ -1772,30 +1769,46 @@ var createServerFile = ({
   const htmlDirectory = frontendDirectories["html"];
   const reactDirectory = frontendDirectories["react"];
   const svelteDirectory = frontendDirectories["svelte"];
+  const vueDirectory = frontendDirectories["vue"];
+  const htmxDirectory = frontendDirectories["htmx"];
   const requiresHtml = htmlDirectory !== undefined;
   const requiresReact = reactDirectory !== undefined;
   const requiresSvelte = svelteDirectory !== undefined;
+  const requiresVue = vueDirectory !== undefined;
+  const requiresHtmx = htmxDirectory !== undefined;
+  const nonFrameworkOnly = (requiresHtml || requiresHtmx) && !requiresReact && !requiresSvelte && !requiresVue;
   const selectedCustomPlugins = availablePlugins2.filter(({ value }) => plugins.indexOf(value) !== UNFOUND_INDEX);
   const authenticationPlugins = authProvider === "absoluteAuth" ? [absoluteAuthPlugin] : [];
+  const htmxPlugins = requiresHtmx ? [scopedStatePlugin] : [];
   const allDependencies = [
     ...defaultDependencies,
     ...defaultPlugins,
     ...selectedCustomPlugins,
-    ...authenticationPlugins
+    ...authenticationPlugins,
+    ...htmxPlugins
   ];
   const uniqueDependencies = Array.from(new Map(allDependencies.map((dependency) => [dependency.value, dependency])).values()).sort((a, b3) => a.value.localeCompare(b3.value));
-  const importLines = uniqueDependencies.flatMap(({ value, imports }) => imports && imports.length > 0 ? [
-    `import { ${imports.map(({ packageName }) => packageName).join(", ")} } from '${value}';`
-  ] : []);
+  const importLines = uniqueDependencies.flatMap(({ value, imports }) => {
+    const filteredImports = nonFrameworkOnly && imports ? imports.filter(({ packageName }) => packageName !== "asset") : imports;
+    return filteredImports && filteredImports.length > 0 ? [
+      `import { ${filteredImports.map(({ packageName }) => packageName).join(", ")} } from '${value}';`
+    ] : [];
+  });
   const absoluteImportIdx = importLines.findIndex((line) => line.includes("from '@absolutejs/absolute'"));
   if (absoluteImportIdx !== UNFOUND_INDEX && importLines[absoluteImportIdx]) {
     const existingItems = importLines[absoluteImportIdx].replace(/import\s*\{\s*|\}\s*from.*$/g, "").split(",").map((item) => item.trim()).filter((value) => value.length > 0);
     const additionalItems = [
       requiresHtml && !existingItems.includes("handleHTMLPageRequest") && "handleHTMLPageRequest",
       requiresReact && !existingItems.includes("handleReactPageRequest") && "handleReactPageRequest",
-      requiresSvelte && !existingItems.includes("handleSveltePageRequest") && "handleSveltePageRequest"
+      requiresSvelte && !existingItems.includes("handleSveltePageRequest") && "handleSveltePageRequest",
+      requiresVue && !existingItems.includes("handleVuePageRequest") && "handleVuePageRequest",
+      requiresVue && !existingItems.includes("generateHeadElement") && "generateHeadElement",
+      requiresHtmx && !existingItems.includes("handleHTMXPageRequest") && "handleHTMXPageRequest"
     ].filter((value) => typeof value === "string");
-    importLines[absoluteImportIdx] = `import { ${[...existingItems, ...additionalItems].join(", ")} } from '@absolutejs/absolute';`;
+    importLines[absoluteImportIdx] = `import { ${[
+      ...existingItems,
+      ...additionalItems
+    ].join(", ")} } from '@absolutejs/absolute';`;
   }
   if (reactDirectory !== undefined) {
     const reactImportSource = reactDirectory === "" ? "../frontend/pages/ReactExample" : `../frontend/${reactDirectory}/pages/ReactExample`;
@@ -1805,6 +1818,10 @@ var createServerFile = ({
     const svelteImportSource = svelteDirectory === "" ? "../frontend/pages/SvelteExample" : `../frontend/${svelteDirectory}/pages/SvelteExample`;
     importLines.push(`import SvelteExample from '${svelteImportSource}.svelte';`);
   }
+  if (requiresVue) {
+    const vueImportSource = vueDirectory === "" ? "../frontend/pages/VueExample" : `../frontend/${vueDirectory}/pages/VueExample`;
+    importLines.push(`import VueExample from '${vueImportSource}.vue';`);
+  }
   const useStatements = uniqueDependencies.flatMap(({ imports }) => imports ?? []).filter((entry) => entry.isPlugin).map((entry) => {
     if (entry.config === undefined)
       return `.use(${entry.packageName})`;
@@ -1818,40 +1835,53 @@ var createServerFile = ({
     ...Object.entries(frontendDirectories).map(([frameworkName, directory]) => `${frameworkName}Directory: './src/frontend/${directory}'`),
     tailwind ? `tailwind: ${JSON.stringify(tailwind)}` : ""
   ].filter(Boolean);
-  const manifestDeclaration = `const manifest = await build({
+  const manifestDeclaration = `${nonFrameworkOnly ? "" : "const manifest = "}await build({
   ${manifestOptions.join(`,
   `)}
 });`;
-  const guardStatements = [
-    `if (manifest === null) throw new Error('Manifest was not generated');`,
-    requiresReact ? `const { ReactExampleIndex } = manifest;
-if (ReactExampleIndex === undefined) throw new Error('ReactExampleIndex was not generated');` : ""
-  ].filter(Boolean).join(`
-`);
-  const routes = Object.entries(frontendDirectories).map(([frameworkName, directory], index) => {
-    const routePath = index === 0 ? "/" : `/${frameworkName}`;
-    if (frameworkName === "html") {
-      return `.get('${routePath}', () => handleHTMLPageRequest(\`${buildDirectory}/${directory}/pages/HTMLExample.html\`))`;
-    }
-    if (frameworkName === "react") {
-      return `.get('${routePath}', () => handleReactPageRequest(ReactExample, ReactExampleIndex))`;
+  const routesData = Object.entries(frontendDirectories).reduce((acc, [frameworkName, directory], index) => {
+    let handler;
+    switch (frameworkName) {
+      case "html":
+        handler = `handleHTMLPageRequest(\`${buildDirectory}${directory ? `/${directory}` : ""}/pages/HTMLExample.html\`)`;
+        break;
+      case "react":
+        handler = `handleReactPageRequest(ReactExample, asset(manifest, 'ReactExampleIndex'), { initialCount: 0, cssPath: asset(manifest, 'ReactExampleCSS') })`;
+        break;
+      case "svelte":
+        handler = `handleSveltePageRequest(SvelteExample, asset(manifest, 'SvelteExample'), asset(manifest, 'SvelteExampleIndex'), { initialCount: 0, cssPath: asset(manifest, 'SvelteExampleCSS') })`;
+        break;
+      case "vue":
+        handler = `handleVuePageRequest(VueExample, asset(manifest, 'VueExample'), asset(manifest, 'VueExampleIndex'), generateHeadElement({ cssPath: asset(manifest, 'VueExampleCSS'), title: 'AbsoluteJS + Vue' }), { initialCount: 0 })`;
+        break;
+      case "htmx":
+        handler = `handleHTMXPageRequest(\`${buildDirectory}${directory ? `/${directory}` : ""}/pages/HTMXExample.html\`)`;
+        if (index === 0) {
+          acc.indexRoute = `.get('/', () => ${handler})`;
+        }
+        acc.otherRoutes.push(`.post('/htmx/reset', ({ resetScopedStore }) => resetScopedStore())`, `.get('/htmx/count', ({ scopedStore }) => scopedStore.count)`, `.post('/htmx/increment', ({ scopedStore }) => ++scopedStore.count)`, `.get('htmx', () => ${handler})`);
+        return acc;
+      default:
+        return acc;
     }
-    if (frameworkName === "svelte") {
-      return `.get('${routePath}', () => handleSveltePageRequest(SvelteExample, manifest))`;
+    if (index === 0) {
+      acc.indexRoute = `.get('/', () => ${handler})`;
     }
-    return "";
-  }).filter(Boolean).join(`
+    acc.otherRoutes.push(`.get('${frameworkName}', () => ${handler})`);
+    return acc;
+  }, { indexRoute: null, otherRoutes: [] });
+  const routes = [routesData.indexRoute ?? "", ...routesData.otherRoutes].filter(Boolean).join(`
   `);
+  const useLines = useStatements.map((s) => `  ${s}`).join(`
+`);
   const serverFileContent = `${importLines.join(`
 `)}
 
 ${manifestDeclaration}
 
-${guardStatements}
-
-new Elysia()${routes}
-${useStatements.map((s) => `  ${s}`).join(`
-`)}
+new Elysia()
+${useLines}
+  ${routes}
   .on('error', (err) => {
     const { request } = err;
     console.error(\`Server error on \${request.method} \${request.url}: \${err.message}\`);
@@ -1861,352 +1891,256 @@ ${useStatements.map((s) => `  ${s}`).join(`
 };
 
 // src/generators/project/scaffoldFrontends.ts
-import { copyFileSync as copyFileSync3, mkdirSync as mkdirSync6 } from "node:fs";
-import { join as join9 } from "node:path";
+import { cpSync as cpSync6, mkdirSync as mkdirSync7 } from "node:fs";
+import { join as join11 } from "node:path";
 
 // src/generators/html/scaffoldHTML.ts
-import { mkdirSync as mkdirSync3, writeFileSync as writeFileSync5 } from "fs";
-import { join as join6 } from "path";
-
-// src/generators/html/generateHTMLPage.ts
-var generateHTMLPage = (htmlScriptOption) => {
-  let scriptTag = "";
-  if (htmlScriptOption === "js") {
-    scriptTag = `<script src="/html/scripts/javascriptExample.js"></script>`;
-  } else if (htmlScriptOption === "ts") {
-    scriptTag = `<script src="/html/scripts/typescriptExample.ts"></script>`;
-  }
-  return `<!DOCTYPE html>
-<html>
-    <head>
-        <title>Html Home</title>
-        <link rel="stylesheet" type="text/css" href="/assets/css/HtmlHome.css">
-        <link rel="icon" href="/assets/ico/favicon.ico" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-    </head>
-    <body>
-        <header>
-            <img id="logo" src="/assets/svg/brand_logo.svg" alt="AbsoluteJS Logo">
-            <h1 id="greeting"></h1>
-        </header>
-        <main>
-            <p>Welcome to AbsoluteJS, the next generation JavaScript framework. We're glad you're here.</p>
-            <button id="counter-button">Click me!</button>
-            <p id="counter">0</p>
-            <nav id="links">
-                <a href="/react" id="react-link">React</a>
-                <a href="/vue" id="vue-link">Vue</a>
-                <a href="/angular" id="angular-link">Angular</a>
-                <a href="/svelte" id="svelte-link">Svelte</a>
-                <a href="/ember" id="ember-link">Ember</a>
-                <a href="/htmx" id="htmx-link">HTMX</a>
-            </nav>
-        </main>
-        <footer>
-            <p id="footer-text"></p>
-        </footer>${scriptTag ? `
-        ${scriptTag}` : ""}
-    </body>
-</html>`;
-};
+import { copyFileSync as copyFileSync3, cpSync, mkdirSync as mkdirSync3, writeFileSync as writeFileSync5 } from "node:fs";
+import { join as join6 } from "node:path";
+
+// src/generators/project/generateMarkupCSS.ts
+var generateMarkupCSS = (isSingleFrontend) => `@import url('${isSingleFrontend ? "../styles/reset.css" : "../../styles/reset.css"}');
+
+header {
+	align-items: center;
+	background-color: #1a1a1a;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+	display: flex;
+	justify-content: space-between;
+	padding: 2rem;
+	text-align: center;
+}
 
-// src/generators/html/generateHTMLScript.ts
-var getHTMLScript = (htmlScriptOption, isSingleFrontend) => `import { HOURS_IN_DAY, TWO_THIRDS } from '${!isSingleFrontend ? "../" : ""}../../constants';
+header a {
+	position: relative;
+	color: #5fbeeb;
+	text-decoration: none;
+}
 
-const greeting = document.getElementById('greeting');
-const date = new Date();
-const hours = date.getHours();
-if (!greeting) throw new Error('Greeting element not found');
+header a::after {
+	content: '';
+	position: absolute;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	height: 2px;
+	background: linear-gradient(90deg, #5fbeeb 0%, #35d5a2 50%, #ff4b91 100%);
+	transform: scaleX(0);
+	transform-origin: left;
+	transition: transform 0.25s ease-in-out;
+}
 
-if (hours < HOURS_IN_DAY / 2) {
-  greeting.textContent = 'Good Morning, welcome to AbsoluteJS !';
-} else if (hours < HOURS_IN_DAY * TWO_THIRDS) {
-  greeting.textContent = 'Good Afternoon, welcome to AbsoluteJS !';
-} else {
-  greeting.textContent = 'Good Evening, welcome to AbsoluteJS !';
+header a:hover::after {
+	transform: scaleX(1);
 }
 
-const button = document.getElementById('counter-button');
-const counter = document.getElementById('counter');
-if (!button || !counter) throw new Error('Button or counter element not found');
-let count = 0;
-button.addEventListener('click', () => {
-  count++;
-  counter.textContent = count.toString();
-});
+h1 {
+	font-size: 2.5rem;
+	margin-top: 2rem;
+}
 
-const links = document.querySelectorAll${htmlScriptOption === "ts" ? "<HTMLAnchorElement>" : ""}('#links a');
-links.forEach((link) => {
-  link.addEventListener('mouseover', () => link.style.transform = 'scale(1.2)');
-  link.addEventListener('mouseout',  () => link.style.transform = 'scale(1)');
-});
+.logo {
+	height: 8rem;
+	width: 8rem;
+	will-change: filter;
+	transition: filter 300ms;
+}
+
+.logo:hover {
+	filter: drop-shadow(0 0 2rem #5fbeeb);
+}
+
+.logo.html:hover {
+	filter: drop-shadow(0 0 2rem #e34f26);
+}
+
+nav {
+	display: flex;
+	gap: 4rem;
+	justify-content: center;
+}
+
+header details {
+	position: relative;
+}
+
+header details summary {
+	list-style: none;
+	appearance: none;
+	-webkit-appearance: none;
+	cursor: pointer;
+	user-select: none;
+	color: #5fbeeb;
+	font-size: 1.5rem;
+	font-weight: 500;
+	padding: 0.5rem 1rem;
+}
+
+header summary::after {
+	content: '▼';
+	display: inline-block;
+	margin-left: 0.5rem;
+	font-size: 0.75rem;
+	transition: transform 0.3s ease;
+}
+
+header details[open] summary::after {
+	transform: rotate(180deg);
+}
+
+header details nav {
+	position: absolute;
+	top: 100%;
+	right: -0.5rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+	background: rgba(185, 185, 185, 0.1);
+	backdrop-filter: blur(4px);
+	border: 1px solid #5fbeeb;
+	border-radius: 1rem;
+	padding: 1rem 1.5rem;
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+	opacity: 0;
+	transform: translateY(-8px);
+	pointer-events: none;
+	transition:
+		opacity 0.3s ease,
+		transform 0.3s ease;
+	z-index: 1000;
+}
+
+header details[open] nav {
+	opacity: 1;
+	transform: translateY(0);
+	pointer-events: auto;
+}
 
-const footerText = document.getElementById('footer-text');
-if (!footerText) throw new Error('Footer text element not found');
-footerText.textContent = \`© ${new Date().getFullYear()} AbsoluteJS\`;
+header details nav a {
+	font-size: 1.1rem;
+	padding: 0.25rem 0;
+	white-space: nowrap;
+}
+
+@media (prefers-color-scheme: light) {
+	header {
+		background-color: #ffffff;
+	}
+
+	button {
+		background-color: #ffffff;
+	}
+}
 `;
 
 // src/generators/html/scaffoldHTML.ts
 var scaffoldHTML = ({
   isSingleFrontend,
   targetDirectory,
-  htmlScriptOption
+  useHTMLScripts,
+  templatesDirectory,
+  projectAssetsDirectory
 }) => {
-  const htmlPage = generateHTMLPage(htmlScriptOption);
-  const htmlPagesDirectory = join6(targetDirectory, "pages");
-  mkdirSync3(htmlPagesDirectory, { recursive: true });
-  writeFileSync5(join6(htmlPagesDirectory, "HTMLExample.html"), htmlPage);
-  if (htmlScriptOption !== undefined && htmlScriptOption !== "none") {
-    const scriptsDir = join6(targetDirectory, "scripts");
-    mkdirSync3(scriptsDir, { recursive: true });
-    const script = getHTMLScript(htmlScriptOption, isSingleFrontend);
-    const scriptFileName = htmlScriptOption === "ts" ? "typescriptExample.ts" : "javascriptExample.js";
-    writeFileSync5(join6(scriptsDir, scriptFileName), script);
-  }
-};
-
-// src/generators/react/scaffoldReact.ts
-import { cpSync as cpSync2, mkdirSync as mkdirSync4, writeFileSync as writeFileSync6 } from "node:fs";
-import { join as join7 } from "node:path";
-
-// src/generators/react/generateHeadComponent.ts
-var generateHeadComponent = (isSingleFrontend) => `import { styleReset } from '${isSingleFrontend ? "../../styles" : "../../../styles/react"}/defaultStyles';
-
-type HeadProps = {
-    title?: string;
-    icon?: string;
-    font?: string;
+  copyFileSync3(join6(templatesDirectory, "assets", "svg", "HTML5_Badge.svg"), join6(projectAssetsDirectory, "svg", "HTML5_Badge.svg"));
+  cpSync(join6(templatesDirectory, "html"), targetDirectory, {
+    recursive: true
+  });
+  const cssOutputDir = join6(targetDirectory, "styles");
+  mkdirSync3(cssOutputDir, { recursive: true });
+  const cssOutputFile = join6(cssOutputDir, "html-example.css");
+  const htmlCSS = generateMarkupCSS(isSingleFrontend);
+  writeFileSync5(cssOutputFile, htmlCSS, "utf-8");
 };
 
-export const Head = ({
-    title = 'AbsoluteJS',
-    icon = '/assets/ico/favicon.ico',
-    font = 'Poppins'
-}: HeadProps) => (
-    <head>
-        <meta charSet="utf-8" />
-        <title>{title}</title>
-        <meta name="description" content="Bun, Elysia & React" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href={icon} />
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link
-            rel="preconnect"
-            href="https://fonts.gstatic.com"
-            crossOrigin="anonymous"
-        />
-        <link
-            href={\`https://fonts.googleapis.com/css2?family=\${font}:wght@100..900&display=swap\`}
-            rel="stylesheet"
-        />
-        <style>{styleReset}</style>
-    </head>
-);
-`;
-
-// src/generators/react/generateReactPage.ts
-var generateReactPage = (isSingleFrontend) => `import { useState } from 'react';
-import { Head } from '../components/utils/Head';
-import {
-  bodyDefault,
-  htmlDefault,
-  mainDefault
-} from '${isSingleFrontend ? "../styles" : "../../styles/react"}/defaultStyles';
-
-export const ReactExample = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <html lang="en" style={htmlDefault}>
-      <Head />
-      <body style={bodyDefault}>
-        <main style={mainDefault}>
-          <style>{\`
-            @keyframes spin {
-              from { transform: rotate(0deg); }
-              to   { transform: rotate(360deg); }
-            }
-          \`}</style>
-          <div
-            style={{
-              flex: 1,
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'center',
-              alignItems: 'center',
-              padding: '1rem',
-              gap: '1.5rem'
-            }}
-          >
-            <a
-              href="https://react.dev"
-              target="_blank"
-              rel="noreferrer"
-              style={{
-                textDecoration: 'none'
-              }}
-            >
-              <img
-                src="/assets/svg/react.svg"
-                alt="React logo"
-                style={{
-                  animation: 'spin 20s linear infinite',
-                  transformOrigin: 'center center',
-                  height: 145,
-                  display: 'block'
-                }}
-              />
-            </a>
-            <h1
-              style={{
-                fontSize: '2rem',
-                fontWeight: 600,
-                color: '#333',
-                margin: 0
-              }}
-            >
-              AbsoluteJS + React
-            </h1>
-            <button
-              onClick={() => setCount(prev => prev + 1)}
-              style={{
-                padding: '0.75rem 1.5rem',
-                fontSize: '1rem',
-                fontWeight: 500,
-                backgroundColor: '#0070f3',
-                color: '#fff',
-                border: 'none',
-                borderRadius: '5px',
-                cursor: 'pointer'
-              }}
-            >
-              count is {count}
-            </button>
-            <p style={{ fontSize: '1rem', color: '#555', margin: 0 }}>
-              Edit{' '}
-              <code
-                style={{
-                  backgroundColor: '#f5f5f5',
-                  padding: '0.2rem 0.4rem',
-                  borderRadius: '3px',
-                  fontFamily: 'monospace'
-                }}
-              >
-                src/frontend/${isSingleFrontend ? "" : "react"}/pages/ReactExample.tsx
-              </code>{' '}
-              to edit this page
-            </p>
-          </div>
-        </main>
-      </body>
-    </html>
-  );
+// src/generators/htmx/scaffoldHTMX.ts
+import { copyFileSync as copyFileSync4, cpSync as cpSync2, mkdirSync as mkdirSync4, writeFileSync as writeFileSync6 } from "fs";
+import { join as join7 } from "path";
+var scaffoldHTMX = ({
+  targetDirectory,
+  templatesDirectory,
+  projectAssetsDirectory,
+  isSingleFrontend
+}) => {
+  copyFileSync4(join7(templatesDirectory, "assets", "svg", "htmx-logo-black.svg"), join7(projectAssetsDirectory, "svg", "htmx-logo-black.svg"));
+  copyFileSync4(join7(templatesDirectory, "assets", "svg", "htmx-logo-white.svg"), join7(projectAssetsDirectory, "svg", "htmx-logo-white.svg"));
+  cpSync2(join7(templatesDirectory, "htmx"), targetDirectory, {
+    recursive: true
+  });
+  const cssOutputDir = join7(targetDirectory, "styles");
+  mkdirSync4(cssOutputDir, { recursive: true });
+  const cssOutputFile = join7(cssOutputDir, "htmx-example.css");
+  const htmxCSS = generateMarkupCSS(isSingleFrontend);
+  writeFileSync6(cssOutputFile, htmxCSS, "utf-8");
 };
-`;
 
 // src/generators/react/scaffoldReact.ts
+import { copyFileSync as copyFileSync5, cpSync as cpSync3, mkdirSync as mkdirSync5, writeFileSync as writeFileSync7 } from "fs";
+import { join as join8 } from "path";
 var scaffoldReact = ({
-  stylesDirectory,
-  templatesDirectory,
   isSingleFrontend,
-  targetDirectory
+  targetDirectory,
+  templatesDirectory,
+  projectAssetsDirectory
 }) => {
-  const reactStylesSrc = join7(templatesDirectory, "react", "styles");
-  const reactTemplates = join7(templatesDirectory, "react");
-  const pagesDirectory = join7(targetDirectory, "pages");
-  const componentsDirectory = join7(targetDirectory, "components");
-  const pageExample = generateReactPage(isSingleFrontend);
-  const headComponent = generateHeadComponent(isSingleFrontend);
-  mkdirSync4(pagesDirectory, { recursive: true });
-  writeFileSync6(join7(pagesDirectory, "ReactExample.tsx"), pageExample);
-  mkdirSync4(join7(componentsDirectory, "utils"), { recursive: true });
-  writeFileSync6(join7(componentsDirectory, "utils", "Head.tsx"), headComponent);
-  cpSync2(join7(reactTemplates, "hooks"), join7(targetDirectory, "hooks"), {
+  copyFileSync5(join8(templatesDirectory, "assets", "svg", "react.svg"), join8(projectAssetsDirectory, "svg", "react.svg"));
+  cpSync3(join8(templatesDirectory, "react"), targetDirectory, {
     recursive: true
   });
-  if (isSingleFrontend) {
-    cpSync2(reactStylesSrc, stylesDirectory, {
-      recursive: true
-    });
-  } else {
-    const dest = join7(stylesDirectory, "react");
-    mkdirSync4(dest, { recursive: true });
-    cpSync2(reactStylesSrc, dest, {
-      recursive: true
-    });
-  }
+  const cssOutputDir = join8(targetDirectory, "styles");
+  mkdirSync5(cssOutputDir, { recursive: true });
+  const cssOutputFile = join8(cssOutputDir, "react-example.css");
+  const reactCSS = generateMarkupCSS(isSingleFrontend);
+  writeFileSync7(cssOutputFile, reactCSS, "utf-8");
 };
 
 // src/generators/svelte/scaffoldSvelte.ts
-import { mkdirSync as mkdirSync5, writeFileSync as writeFileSync7 } from "node:fs";
-import { join as join8 } from "node:path";
-
-// src/generators/svelte/generateSveltePage.ts
-var generateSveltePage = (language) => {
-  const scriptTag = language === "ts" ? `<script lang="ts">` : `<script>`;
-  return `${scriptTag}
-    let count = $state(0);
-
-    const year = new Date().getFullYear();
-</script>
-
-<svelte:head>
-    <meta charset="utf-8" />
-    <title>Svelte Home</title>
-    <meta name="description" content="Welcome to AbsoluteJS" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" href="/assets/ico/favicon.ico" />
-</svelte:head>
-
-<main>
-    <header><h1>This page was built with Svelte</h1></header>
-
-    <p>Welcome to the Svelte home page. This page was built using Svelte.</p>
-
-    <p>Counter: {count}</p>
-	<button onclick={() => (count += 1)}>Increment</button>
-
-    <div id="links">
-        <a href="/">Html</a>
-        <a href="/vue">Vue</a>
-    </div>
-
-    <footer><p>© {year} AbsoluteJS</p></footer>
-</main>
-`;
+import { copyFileSync as copyFileSync6, cpSync as cpSync4, mkdirSync as mkdirSync6, writeFileSync as writeFileSync8 } from "fs";
+import { join as join9 } from "path";
+var scaffoldSvelte = ({
+  isSingleFrontend,
+  targetDirectory,
+  templatesDirectory,
+  projectAssetsDirectory
+}) => {
+  copyFileSync6(join9(templatesDirectory, "assets", "svg", "svelte-logo.svg"), join9(projectAssetsDirectory, "svg", "svelte-logo.svg"));
+  cpSync4(join9(templatesDirectory, "svelte"), targetDirectory, {
+    recursive: true
+  });
+  const cssOutputDirectory = join9(targetDirectory, "styles");
+  mkdirSync6(cssOutputDirectory, { recursive: true });
+  const cssOutputFile = join9(cssOutputDirectory, "svelte-example.css");
+  const svelteCSS = `@import url('${isSingleFrontend ? "../" : "../../"}styles/reset.css');`;
+  writeFileSync8(cssOutputFile, svelteCSS, "utf-8");
 };
 
-// src/generators/svelte/scaffoldSvelte.ts
-var scaffoldSvelte = ({
+// src/generators/vue/scaffoldVue.ts
+import { cpSync as cpSync5, copyFileSync as copyFileSync7 } from "fs";
+import { join as join10 } from "path";
+var scaffoldVue = ({
   targetDirectory,
-  language
+  templatesDirectory,
+  projectAssetsDirectory
 }) => {
-  const pageExample = generateSveltePage(language);
-  const pagesDirectory = join8(targetDirectory, "pages");
-  const componentsDirectory = join8(targetDirectory, "components");
-  mkdirSync5(pagesDirectory, { recursive: true });
-  writeFileSync7(join8(pagesDirectory, "SvelteExample.svelte"), pageExample);
-  mkdirSync5(join8(componentsDirectory), { recursive: true });
+  copyFileSync7(join10(templatesDirectory, "assets", "svg", "vue-logo.svg"), join10(projectAssetsDirectory, "svg", "vue-logo.svg"));
+  cpSync5(join10(templatesDirectory, "vue"), targetDirectory, {
+    recursive: true
+  });
 };
 
 // src/generators/project/scaffoldFrontends.ts
 var scaffoldFrontends = ({
   frontendDirectory,
   templatesDirectory,
-  frontendDirectories,
-  language,
-  tailwind,
-  htmlScriptOption
+  projectAssetsDirectory,
+  useHTMLScripts,
+  frontendDirectories
 }) => {
+  const stylesTargetDirectory = join11(frontendDirectory, "styles");
+  cpSync6(join11(templatesDirectory, "styles"), stylesTargetDirectory, {
+    recursive: true
+  });
   const frontendEntries = Object.entries(frontendDirectories);
   const isSingleFrontend = frontendEntries.length === 1;
-  const stylesDirectory = join9(frontendDirectory, "styles");
-  const needsStylesDir = !(isSingleFrontend && frontendEntries[0]?.[0] === "svelte");
-  if (needsStylesDir)
-    mkdirSync6(stylesDirectory);
-  if (needsStylesDir && tailwind !== undefined) {
-    copyFileSync3(join9(templatesDirectory, "tailwind", "tailwind.css"), join9(stylesDirectory, "tailwind.css"));
-  }
   const directoryMap = new Map;
   for (const [frontendName, rawDirectory] of frontendEntries) {
     const directory = rawDirectory?.trim() ?? (isSingleFrontend ? "" : frontendName);
@@ -2214,26 +2148,51 @@ var scaffoldFrontends = ({
       throw new Error(`Frontend directory collision: "${directory}" is assigned to both "${directoryMap.get(directory)}" and "${frontendName}". Please pick unique directories.`);
     }
     directoryMap.set(directory, frontendName);
-    const targetDirectory = join9(frontendDirectory, directory);
+    const targetDirectory = join11(frontendDirectory, directory);
     if (!isSingleFrontend)
-      mkdirSync6(targetDirectory);
+      mkdirSync7(targetDirectory);
     switch (frontendName) {
       case "react":
         scaffoldReact({
           isSingleFrontend,
-          stylesDirectory,
+          projectAssetsDirectory,
           targetDirectory,
           templatesDirectory
         });
         break;
       case "svelte":
-        scaffoldSvelte({ language, targetDirectory });
+        scaffoldSvelte({
+          isSingleFrontend,
+          projectAssetsDirectory,
+          targetDirectory,
+          templatesDirectory
+        });
+        break;
+      case "vue":
+        scaffoldVue({
+          projectAssetsDirectory,
+          targetDirectory,
+          templatesDirectory
+        });
+        break;
+      case "angular":
+        console.warn("Angular is not yet supported. Refer to the documentation for more information.");
         break;
       case "html":
         scaffoldHTML({
-          htmlScriptOption,
           isSingleFrontend,
-          targetDirectory
+          projectAssetsDirectory,
+          targetDirectory,
+          templatesDirectory,
+          useHTMLScripts
+        });
+        break;
+      case "htmx":
+        scaffoldHTMX({
+          isSingleFrontend,
+          projectAssetsDirectory,
+          targetDirectory,
+          templatesDirectory
         });
         break;
     }
@@ -2244,11 +2203,10 @@ var scaffoldFrontends = ({
 var scaffold = ({
   response: {
     projectName,
-    language,
     codeQualityTool,
     initializeGitNow,
     databaseEngine,
-    htmlScriptOption,
+    useHTMLScripts,
     useTailwind,
     databaseDirectory,
     orm,
@@ -2265,14 +2223,13 @@ var scaffold = ({
   packageManager
 }) => {
   const __dirname2 = dirname(fileURLToPath(import.meta.url));
-  const templatesDirectory = join10(__dirname2, "/templates");
-  const { frontendDirectory, backendDirectory } = initalizeRoot(projectName, templatesDirectory);
-  copyFileSync4(join10(templatesDirectory, "README.md"), join10(projectName, "README.md"));
+  const templatesDirectory = join12(__dirname2, "/templates");
+  const { frontendDirectory, backendDirectory, projectAssetsDirectory } = initalizeRoot(projectName, templatesDirectory);
+  copyFileSync8(join12(templatesDirectory, "README.md"), join12(projectName, "README.md"));
   addConfigurationFiles({
     codeQualityTool,
     frontends,
     initializeGitNow,
-    language,
     projectName,
     tailwind,
     templatesDirectory
@@ -2286,7 +2243,7 @@ var scaffold = ({
     projectName,
     useTailwind
   });
-  const serverFilePath = join10(backendDirectory, "server.ts");
+  const serverFilePath = join12(backendDirectory, "server.ts");
   createServerFile({
     assetsDirectory,
     authProvider,
@@ -2306,10 +2263,9 @@ var scaffold = ({
   scaffoldFrontends({
     frontendDirectories,
     frontendDirectory,
-    htmlScriptOption,
-    language,
-    tailwind,
-    templatesDirectory
+    projectAssetsDirectory,
+    templatesDirectory,
+    useHTMLScripts
   });
   if (installDependenciesNow) {
     installDependencies({ packageManager, projectName });
@@ -2342,15 +2298,14 @@ var parseCommandLineOptions = () => {
       help: { default: false, short: "h", type: "boolean" },
       host: { type: "string" },
       html: { type: "string" },
+      "html-script": { type: "boolean" },
       htmx: { type: "string" },
-      lang: { type: "string" },
       lts: { default: false, type: "boolean" },
       npm: { type: "boolean" },
       orm: { type: "string" },
       plugin: { multiple: true, type: "string" },
       quality: { type: "string" },
       react: { type: "string" },
-      script: { type: "string" },
       skip: { type: "boolean" },
       svelte: { type: "string" },
       tailwind: { type: "boolean" },
@@ -2360,6 +2315,7 @@ var parseCommandLineOptions = () => {
     }
   });
   const errors = [];
+  const projectName = positionals[0] ?? values.skip ? "absolutejs-project" : undefined;
   let authProvider;
   if (values.auth !== undefined && !isAuthProvider(values.auth)) {
     errors.push(`Invalid auth provider: "${values.auth}". Expected: [ ${availableAuthProviders.join(", ")} ]`);
@@ -2397,18 +2353,6 @@ var parseCommandLineOptions = () => {
   if (values.quality !== undefined && codeQualityTool === undefined) {
     errors.push(`Invalid code quality tool: "${values.quality}". Expected: [ ${availableCodeQualityTools.join(", ")} ]`);
   }
-  let htmlScriptOption;
-  if (values.script !== undefined && !isHTMLScriptOption(values.script)) {
-    errors.push(`Invalid HTML script option: "${values.script}". Expected: [ ${availableHTMLScriptOptions.join(", ")} ]`);
-  } else if (values.script !== undefined) {
-    htmlScriptOption = values.script;
-  } else if (values.skip) {
-    htmlScriptOption = "none";
-  }
-  const language = values.lang !== undefined && isLanguage(values.lang) ? values.lang : undefined;
-  if (values.lang !== undefined && language === undefined) {
-    errors.push(`Invalid language: "${values.lang}". Expected: [ ${availableLanguages.join(", ")} ]`);
-  }
   const directoryConfig = values.directory !== undefined && isDirectoryConfig(values.directory) ? values.directory : undefined;
   if (values.directory !== undefined && directoryConfig === undefined) {
     errors.push(`Invalid directory configuration: "${values.directory}". Expected: [ ${availableDirectoryConfigurations.join(", ")} ]`);
@@ -2470,14 +2414,13 @@ var parseCommandLineOptions = () => {
     directoryConfig,
     frontendDirectories,
     frontends: values.frontend?.filter(isFrontend),
-    htmlScriptOption,
     initializeGitNow: values.git,
     installDependenciesNow: values.npm,
-    language,
     orm,
     plugins,
-    projectName: positionals[0],
+    projectName,
     tailwind,
+    useHTMLScripts: values["html-script"],
     useTailwind
   };
   return {