create-addfox-app 0.1.1-beta.10

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 addfox
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,18 @@
+<p align="center">
+  <img width="200" src="https://raw.githubusercontent.com/addfox/addfox/main/addfox.png" alt="Addfox">
+</p>
+
+# create-addfox-app
+
+[中文](README-zh_CN.md) | English
+
+---
+
+Interactive scaffolder: generates a addfox-based extension project from options (template, package manager, entries, skills).
+
+- Commands: `create-addfox-app` or `pnpm create addfox-app` (and npm/yarn/bun equivalents)
+- Flow: (1) select framework (vanilla / vue / react / preact / svelte / solid), (2) language (TypeScript / JavaScript), (3) package manager (pnpm / npm / yarn / bun), (4) entries to include (multi-select), (5) whether to install addfox skills (yes/no). Output to cwd or a given directory. Generated project uses **addfox.config.ts** or **addfox.config.js** with minimal manifest (entry discovery; no built-in entry paths in manifest).
+
+## Templates
+
+Scaffold templates live at **repo root** in **`templates/`** (e.g. `template-vanilla-ts`, `template-react-ts`). The CLI downloads the chosen template from the GitHub repo tarball, so the repo must have `templates/` at root and committed. The npm package does not bundle templates; it fetches from GitHub at scaffold time.

package/dist/cli.js

@@ -0,0 +1,1015 @@
+#!/usr/bin/env node
+import { existsSync, mkdirSync, readFileSync, readdirSync, rmSync, statSync, writeFileSync } from "node:fs";
+import { dirname, join, relative, resolve as external_node_path_resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { createRequire } from "node:module";
+import { execSync } from "node:child_process";
+import prompts from "prompts";
+import { blue, cyan, dim, gray, green, lightBlue, magenta, red, trueColor, yellow } from "kolorist";
+import minimist from "minimist";
+import { cp, mkdir } from "node:fs/promises";
+import { gunzipSync } from "node:zlib";
+import { detectPackageManager, getExecCommand, getInstallCommand, getRunCommand } from "@addfox/pkg-manager";
+const GITHUB_REPO = "addfox/addfox";
+const TEMPLATE_BASE = "templates";
+function getRepoRoot() {
+    const fromDist = external_node_path_resolve(dirname(fileURLToPath(import.meta.url)), "..", "..", "..");
+    return fromDist;
+}
+function hasLocalTemplate(templateName) {
+    const repoRoot = getRepoRoot();
+    return existsSync(join(repoRoot, TEMPLATE_BASE, templateName));
+}
+const SKIP_TEMPLATE_PATH_PARTS = new Set([
+    "node_modules",
+    ".git",
+    ".pnpm"
+]);
+function shouldCopyLocalTemplatePath(src) {
+    const normalized = src.split(/[/\\]/);
+    for (const part of normalized)if (SKIP_TEMPLATE_PATH_PARTS.has(part)) return false;
+    return true;
+}
+async function tryLocalTemplates(templateName, destDir) {
+    const repoRoot = getRepoRoot();
+    const templatePath = join(repoRoot, TEMPLATE_BASE, templateName);
+    if (!existsSync(templatePath)) return false;
+    await mkdir(destDir, {
+        recursive: true
+    });
+    await cp(templatePath, destDir, {
+        recursive: true,
+        filter: (src)=>shouldCopyLocalTemplatePath(src)
+    });
+    return true;
+}
+function parseTarHeader(buf) {
+    if (buf.every((b)=>0 === b)) return null;
+    const rawName = buf.subarray(0, 100).toString("utf8").replace(/\0+$/, "");
+    const sizeStr = buf.subarray(124, 136).toString("utf8").replace(/\0+$/, "").trim();
+    const type = String.fromCharCode(buf[156]);
+    const prefix = buf.subarray(345, 500).toString("utf8").replace(/\0+$/, "");
+    return {
+        name: prefix ? `${prefix}/${rawName}` : rawName,
+        size: parseInt(sizeStr, 8) || 0,
+        type
+    };
+}
+function extractMatchingFiles(tarBuffer, templatePrefix, destDir) {
+    let offset = 0;
+    while(offset + 512 <= tarBuffer.length){
+        const header = parseTarHeader(tarBuffer.subarray(offset, offset + 512));
+        offset += 512;
+        if (!header) break;
+        const dataBlocks = 512 * Math.ceil(header.size / 512);
+        const idx = header.name.indexOf(templatePrefix);
+        if (-1 !== idx) {
+            const relativePath = header.name.substring(idx + templatePrefix.length).replace(/^\//, "");
+            if (relativePath) {
+                const destPath = join(destDir, relativePath);
+                const isDir = "5" === header.type || relativePath.endsWith("/");
+                if (isDir) mkdirSync(destPath, {
+                    recursive: true
+                });
+                else if ("0" === header.type || "\0" === header.type) {
+                    mkdirSync(dirname(destPath), {
+                        recursive: true
+                    });
+                    writeFileSync(destPath, tarBuffer.subarray(offset, offset + header.size));
+                }
+            }
+        }
+        offset += dataBlocks;
+    }
+}
+async function downloadTemplate(templateName, destDir, branch = "main") {
+    const url = `https://codeload.github.com/${GITHUB_REPO}/tar.gz/${branch}`;
+    const templatePrefix = `${TEMPLATE_BASE}/${templateName}/`;
+    const response = await fetch(url);
+    if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+    const compressed = Buffer.from(await response.arrayBuffer());
+    const tarBuffer = gunzipSync(compressed);
+    mkdirSync(destDir, {
+        recursive: true
+    });
+    extractMatchingFiles(tarBuffer, templatePrefix, destDir);
+}
+const FRAMES = [
+    "⠋",
+    "⠙",
+    "⠹",
+    "⠸",
+    "⠼",
+    "⠴",
+    "⠦",
+    "⠧",
+    "⠇",
+    "⠏"
+];
+const INTERVAL_MS = 80;
+function clearSpinnerLine() {
+    process.stdout.write("\r\x1b[K");
+}
+function sleep(ms) {
+    return new Promise((resolve)=>{
+        setTimeout(resolve, ms);
+    });
+}
+async function runWithTemplateSpinner(label, fn, options) {
+    const minVisibleMs = options?.minVisibleMs ?? 0;
+    if (!process.stdout.isTTY) {
+        console.log(yellow(`\n  ${label}\n`));
+        return fn();
+    }
+    let frameIndex = 0;
+    process.stdout.write("\n");
+    const timer = setInterval(()=>{
+        const frame = FRAMES[frameIndex % FRAMES.length];
+        frameIndex += 1;
+        process.stdout.write(`\r  ${yellow(frame)} ${label}`);
+    }, INTERVAL_MS);
+    const startedAt = Date.now();
+    try {
+        const result = await fn();
+        const elapsed = Date.now() - startedAt;
+        if (elapsed < minVisibleMs) await sleep(minVisibleMs - elapsed);
+        return result;
+    } finally{
+        clearInterval(timer);
+        clearSpinnerLine();
+        process.stdout.write("\n");
+    }
+}
+const STYLE_ENGINES = [
+    {
+        title: "None",
+        value: "none"
+    },
+    {
+        title: "Tailwind CSS",
+        value: "tailwindcss"
+    },
+    {
+        title: "UnoCSS",
+        value: "unocss"
+    },
+    {
+        title: "Less",
+        value: "less"
+    },
+    {
+        title: "Sass (SCSS)",
+        value: "sass"
+    }
+];
+const FRAMEWORKS = [
+    {
+        title: "Vanilla",
+        value: "vanilla"
+    },
+    {
+        title: "Vue",
+        value: "vue"
+    },
+    {
+        title: "React",
+        value: "react"
+    },
+    {
+        title: "Preact",
+        value: "preact"
+    },
+    {
+        title: "Svelte",
+        value: "svelte"
+    },
+    {
+        title: "Solid",
+        value: "solid"
+    }
+];
+function getTemplateName(framework, language) {
+    return `template-${framework}-${language}`;
+}
+const PACKAGE_MANAGER_CHOICES = [
+    {
+        title: "pnpm",
+        value: "pnpm"
+    },
+    {
+        title: "npm",
+        value: "npm"
+    },
+    {
+        title: "yarn",
+        value: "yarn"
+    },
+    {
+        title: "bun",
+        value: "bun"
+    }
+];
+const ENTRY_NAMES = [
+    "popup",
+    "options",
+    "background",
+    "content",
+    "devtools",
+    "sidepanel",
+    "sandbox",
+    "newtab",
+    "bookmarks",
+    "history",
+    "offscreen"
+];
+const ENTRY_APP_DIRS = ENTRY_NAMES;
+const ENTRY_CHOICES = ENTRY_NAMES.map((name)=>({
+        title: name,
+        value: name
+    }));
+const APP_DIR = "app";
+function filterAppEntries(destDir, selectedEntries) {
+    const useAll = selectedEntries.includes("__all__");
+    if (useAll) return;
+    const keepSet = new Set(selectedEntries);
+    const appPath = join(destDir, APP_DIR);
+    if (!existsSync(appPath)) return;
+    const dirs = readdirSync(appPath, {
+        withFileTypes: true
+    }).filter((d)=>d.isDirectory()).map((d)=>d.name);
+    for (const dir of dirs){
+        const isEntryDir = ENTRY_APP_DIRS.includes(dir);
+        if (isEntryDir && !keepSet.has(dir)) rmSync(join(appPath, dir), {
+            recursive: true
+        });
+    }
+}
+function getExistingAppEntryDirs(destDir) {
+    const appPath = join(destDir, APP_DIR);
+    if (!existsSync(appPath)) return [];
+    return readdirSync(appPath, {
+        withFileTypes: true
+    }).filter((d)=>d.isDirectory()).map((d)=>d.name).filter((name)=>ENTRY_APP_DIRS.includes(name));
+}
+function getFrameworkPluginImport(framework) {
+    switch(framework){
+        case "react":
+            return 'import { pluginReact } from "@rsbuild/plugin-react";';
+        case "preact":
+            return 'import { pluginPreact } from "@rsbuild/plugin-preact";';
+        case "vue":
+            return 'import { pluginVue } from "@rsbuild/plugin-vue";';
+        case "svelte":
+            return 'import { pluginSvelte } from "@rsbuild/plugin-svelte";';
+        case "solid":
+            return 'import { pluginSolid } from "@rsbuild/plugin-solid";';
+        default:
+            return "";
+    }
+}
+function getFrameworkPluginCall(framework) {
+    switch(framework){
+        case "react":
+            return "pluginReact()";
+        case "preact":
+            return "pluginPreact()";
+        case "vue":
+            return "pluginVue()";
+        case "svelte":
+            return "pluginSvelte()";
+        case "solid":
+            return "pluginSolid()";
+        default:
+            return null;
+    }
+}
+function getStylePlugin(engine) {
+    if ("none" === engine || void 0 === engine) return null;
+    if ("less" === engine) return {
+        importLine: 'import { pluginLess } from "@rsbuild/plugin-less";',
+        call: "pluginLess()"
+    };
+    if ("sass" === engine) return {
+        importLine: 'import { pluginSass } from "@rsbuild/plugin-sass";',
+        call: "pluginSass()"
+    };
+    return null;
+}
+const MINIMAL_MANIFEST = '  name: "My Extension",\n  version: "1.0.0",\n  manifest_version: 3,\n  description: "Browser extension built with addfox",\n  permissions: ["storage", "activeTab"],';
+function generateAddfoxConfig(framework, _language, styleEngine) {
+    const importLines = [];
+    const fwImport = getFrameworkPluginImport(framework);
+    if (fwImport) importLines.push(fwImport);
+    const st = getStylePlugin(styleEngine);
+    if (st) importLines.push(st.importLine);
+    const pluginCalls = [];
+    const fwCall = getFrameworkPluginCall(framework);
+    if (fwCall) pluginCalls.push(fwCall);
+    if (st) pluginCalls.push(st.call);
+    const pluginsLine = pluginCalls.length > 0 ? `  plugins: [${pluginCalls.join(", ")}],` : "";
+    const parts = [
+        "import { defineConfig } from \"addfox\";",
+        importLines.length ? `\n${importLines.join("\n")}\n` : "",
+        "const manifest = {",
+        MINIMAL_MANIFEST,
+        "};",
+        "",
+        "export default defineConfig({",
+        "  manifest: { chromium: manifest, firefox: { ...manifest } },",
+        ...pluginsLine ? [
+            pluginsLine
+        ] : [],
+        "});"
+    ];
+    return parts.filter(Boolean).join("\n");
+}
+const UTF8_BOM = "\uFEFF";
+function stripUtf8Bom(text) {
+    return text.startsWith(UTF8_BOM) ? text.slice(UTF8_BOM.length) : text;
+}
+function readJsonFile(path) {
+    const raw = readFileSync(path, "utf8");
+    return JSON.parse(stripUtf8Bom(raw));
+}
+function writeJsonFile(path, data) {
+    writeFileSync(path, JSON.stringify(data, null, 2), "utf8");
+}
+const RSTEST_CORE = "^0.9.4";
+const RSTEST_COVERAGE = "^0.3.0";
+const RSTEST_BROWSER = "^0.9.4";
+const PLAYWRIGHT = "^1.58.2";
+const RSDOCTOR_RSPACK = "^1.5.5";
+function getTestExt(language) {
+    return "ts" === language ? "ts" : "js";
+}
+function getTestGlob(language) {
+    return "ts" === language ? "__tests__/**/*.test.ts" : "__tests__/**/*.test.js";
+}
+function getE2eGlob(language) {
+    return "ts" === language ? "__tests__/e2e/**/*.test.ts" : "__tests__/e2e/**/*.test.js";
+}
+function generateRstestConfig(language, testKinds) {
+    const hasUnit = testKinds.includes("unit");
+    const hasE2e = testKinds.includes("e2e");
+    getTestExt(language);
+    if (!hasUnit && !hasE2e) return "";
+    const header = `import { defineConfig } from "@rstest/core";\n\n`;
+    if (hasUnit && !hasE2e) {
+        const glob = getTestGlob(language);
+        return `${header}export default defineConfig({
+  testEnvironment: "node",
+  include: ["${glob}"],
+  exclude: { patterns: ["**/node_modules/**", "**/dist/**"] },
+  root: process.cwd(),
+});
+`;
+    }
+    if (!hasUnit && hasE2e) {
+        const inc = getE2eGlob(language);
+        return `${header}export default defineConfig({
+  root: process.cwd(),
+  projects: [
+    {
+      name: "browser",
+      include: ["${inc}"],
+      browser: {
+        enabled: true,
+        provider: "playwright",
+        browser: "chromium",
+      },
+    },
+  ],
+});
+`;
+    }
+    const unitGlob = getTestGlob(language);
+    const e2eInc = getE2eGlob(language);
+    return `${header}export default defineConfig({
+  root: process.cwd(),
+  projects: [
+    {
+      name: "node",
+      testEnvironment: "node",
+      include: ["${unitGlob}"],
+      exclude: { patterns: ["**/node_modules/**", "**/dist/**", "__tests__/e2e/**"] },
+    },
+    {
+      name: "browser",
+      include: ["${e2eInc}"],
+      browser: {
+        enabled: true,
+        provider: "playwright",
+        browser: "chromium",
+      },
+    },
+  ],
+});
+`;
+}
+function writeUnitSample(root, language) {
+    const ext = getTestExt(language);
+    mkdirSync(external_node_path_resolve(root, "__tests__"), {
+        recursive: true
+    });
+    const path = external_node_path_resolve(root, "__tests__", `example.test.${ext}`);
+    const body = "ts" === language ? `import { describe, expect, it } from "@rstest/core";
+
+describe("example unit tests", () => {
+  it("adds numbers", () => {
+    expect(1 + 2).toBe(3);
+  });
+});
+` : `import { describe, expect, it } from "@rstest/core";
+
+describe("example unit tests", () => {
+  it("adds numbers", () => {
+    expect(1 + 2).toBe(3);
+  });
+});
+`;
+    writeFileSync(path, body, "utf-8");
+}
+function writeE2eSample(root, language) {
+    const ext = getTestExt(language);
+    const dir = external_node_path_resolve(root, "__tests__", "e2e");
+    mkdirSync(dir, {
+        recursive: true
+    });
+    const path = external_node_path_resolve(dir, `example.browser.test.${ext}`);
+    const body = `import { describe, expect, it } from "@rstest/core";
+import { page } from "@rstest/browser";
+
+describe("E2E browser tests", () => {
+  it("asserts element in document", async () => {
+    document.body.innerHTML = \`<button id="btn">Click me</button>\`;
+    await expect
+      .element(page.getByRole("button", { name: "Click me" }))
+      .toBeVisible();
+  });
+});
+`;
+    writeFileSync(path, body, "utf-8");
+}
+function mergeDevDeps(pkg, testKinds, installRsdoctor) {
+    const dev = pkg.devDependencies ?? {};
+    pkg.devDependencies = dev;
+    if (testKinds.length > 0) dev["@rstest/core"] = RSTEST_CORE;
+    if (testKinds.includes("unit")) dev["@rstest/coverage-istanbul"] = RSTEST_COVERAGE;
+    if (testKinds.includes("e2e")) {
+        dev["@rstest/browser"] = RSTEST_BROWSER;
+        dev.playwright = PLAYWRIGHT;
+    }
+    if (installRsdoctor) dev["@rsdoctor/rspack-plugin"] = RSDOCTOR_RSPACK;
+}
+function mergeScripts(pkg, testKinds) {
+    const scripts = pkg.scripts ?? {};
+    pkg.scripts = scripts;
+    if (0 === testKinds.length) return;
+    scripts.test = "addfox test";
+    if (testKinds.includes("unit")) scripts["test:coverage"] = "addfox test --coverage";
+    if (testKinds.includes("e2e")) scripts.pretest = "addfox build";
+}
+function applyTestAndReportSetup(root, language, selection) {
+    const { testKinds, installRsdoctor } = selection;
+    if (0 === testKinds.length && !installRsdoctor) return;
+    const pkgPath = external_node_path_resolve(root, "package.json");
+    const pkg = readJsonFile(pkgPath);
+    mergeDevDeps(pkg, testKinds, installRsdoctor);
+    mergeScripts(pkg, testKinds);
+    writeJsonFile(pkgPath, pkg);
+    if (testKinds.length > 0) {
+        const configName = "ts" === language ? "rstest.config.ts" : "rstest.config.js";
+        const content = generateRstestConfig(language, testKinds);
+        writeFileSync(external_node_path_resolve(root, configName), content, "utf-8");
+        if (testKinds.includes("unit")) writeUnitSample(root, language);
+        if (testKinds.includes("e2e")) writeE2eSample(root, language);
+    }
+}
+const RESET = "\x1b[0m";
+const ORANGE = [
+    255,
+    118,
+    38
+];
+const PINK = [
+    255,
+    92,
+    186
+];
+const LOGO_LINES = [
+    " █████╗ ██████╗ ██████╗ ███████╗ ██████╗ ██╗  ██╗",
+    "██╔══██╗██╔══██╗██╔══██╗██╔════╝██╔═══██╗╚██╗██╔╝",
+    "███████║██║  ██║██║  ██║█████╗  ██║   ██║ ╚███╔╝ ",
+    "██╔══██║██║  ██║██║  ██║██╔══╝  ██║   ██║ ██╔██╗ ",
+    "██║  ██║██████╔╝██████╔╝██║     ╚██████╔╝██╔╝ ██╗",
+    "╚═╝  ╚═╝╚═════╝ ╚═════╝ ╚═╝      ╚═════╝ ╚═╝  ╚═╝"
+];
+function lerpChannel(a, b, t) {
+    return Math.round(a + (b - a) * t);
+}
+function rgbFg(r, g, b) {
+    return `\x1b[38;2;${r};${g};${b}m`;
+}
+function colorizeLine(line) {
+    const len = line.length;
+    if (0 === len) return "";
+    let out = "";
+    for(let i = 0; i < len; i++){
+        const ch = line[i] ?? "";
+        if (" " === ch) {
+            out += ch;
+            continue;
+        }
+        const t = len <= 1 ? 0 : i / (len - 1);
+        const r = lerpChannel(ORANGE[0], PINK[0], t);
+        const g = lerpChannel(ORANGE[1], PINK[1], t);
+        const b = lerpChannel(ORANGE[2], PINK[2], t);
+        out += rgbFg(r, g, b) + ch;
+    }
+    return out + RESET;
+}
+function printAddfoxLogo() {
+    console.log("");
+    for (const line of LOGO_LINES)console.log(colorizeLine(line));
+    console.log("");
+}
+const SKIP_STYLE_ENTRIES = new Set([
+    "background",
+    "content"
+]);
+const DEPS = {
+    tailwindcss: {
+        tailwindcss: "^4.1.18",
+        "@tailwindcss/postcss": "^4.1.18",
+        postcss: "^8.4.32",
+        autoprefixer: "^10.4.20"
+    },
+    unocss: {
+        unocss: "^0.62.4",
+        "@unocss/postcss": "^0.62.4",
+        postcss: "^8.4.32"
+    },
+    less: {
+        "@rsbuild/plugin-less": "^1.6.2",
+        less: "^4.2.0"
+    },
+    sass: {
+        "@rsbuild/plugin-sass": "^1.5.1",
+        sass: "^1.77.0"
+    }
+};
+function styleFileName(engine) {
+    if ("tailwindcss" === engine) return "global.css";
+    if ("unocss" === engine) return "uno.css";
+    if ("less" === engine) return "global.less";
+    return "global.scss";
+}
+function listUiEntryScripts(root, language) {
+    const appDir = join(root, "app");
+    if (!existsSync(appDir)) return [];
+    const extOrder = "ts" === language ? [
+        ".tsx",
+        ".ts",
+        ".vue",
+        ".svelte"
+    ] : [
+        ".jsx",
+        ".js",
+        ".vue",
+        ".svelte"
+    ];
+    const out = [];
+    for (const name of readdirSync(appDir)){
+        if (SKIP_STYLE_ENTRIES.has(name)) continue;
+        const sub = join(appDir, name);
+        if (statSync(sub).isDirectory()) for (const ext of extOrder){
+            const p = join(sub, `index${ext}`);
+            if (existsSync(p)) {
+                out.push(p);
+                break;
+            }
+        }
+    }
+    return out;
+}
+function buildStyleImportLine(entryFile, engine) {
+    const entryDir = join(entryFile, "..");
+    const stylePath = join(entryDir, "..", "styles", styleFileName(engine));
+    const rel = relative(entryDir, stylePath).replace(/\\/g, "/");
+    return `import "${rel}";`;
+}
+function prependImportIfMissing(filePath, line) {
+    const raw = readFileSync(filePath, "utf8");
+    if (raw.includes("/styles/global.") || raw.includes("/styles/uno.css")) return;
+    writeFileSync(filePath, `${line}\n${raw}`, "utf8");
+}
+function writeTailwindFiles(root) {
+    const dir = join(root, "app", "styles");
+    mkdirSync(dir, {
+        recursive: true
+    });
+    writeFileSync(join(dir, "global.css"), '@import "tailwindcss";\n', "utf8");
+    writeFileSync(join(root, "postcss.config.mjs"), `export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+    autoprefixer: {},
+  },
+};
+`, "utf8");
+}
+function writeUnoFiles(root) {
+    const dir = join(root, "app", "styles");
+    mkdirSync(dir, {
+        recursive: true
+    });
+    writeFileSync(join(dir, "uno.css"), `@unocss preflights;
+@unocss default;
+`, "utf8");
+    writeFileSync(join(root, "postcss.config.mjs"), `import UnoCSS from "@unocss/postcss";
+
+export default {
+  plugins: [UnoCSS()],
+};
+`, "utf8");
+    writeFileSync(join(root, "uno.config.ts"), `import { defineConfig, presetUno } from "unocss";
+
+export default defineConfig({
+  content: {
+    filesystem: ["./app/**/*.{html,js,ts,jsx,tsx,vue,svelte}"],
+  },
+  presets: [presetUno()],
+});
+`, "utf8");
+}
+function writeLessSassFiles(root, engine) {
+    const dir = join(root, "app", "styles");
+    mkdirSync(dir, {
+        recursive: true
+    });
+    "less" === engine ? writeFileSync(join(dir, "global.less"), "body {\n  margin: 0;\n}\n", "utf8") : writeFileSync(join(dir, "global.scss"), "body {\n  margin: 0;\n}\n", "utf8");
+}
+function mergeDevDependencies(pkg, engine) {
+    const dev = pkg.devDependencies ?? {};
+    pkg.devDependencies = dev;
+    Object.assign(dev, DEPS[engine]);
+}
+function writeEngineFiles(root, engine) {
+    if ("tailwindcss" === engine) return void writeTailwindFiles(root);
+    if ("unocss" === engine) return void writeUnoFiles(root);
+    writeLessSassFiles(root, engine);
+}
+function applyStyleEngine(root, _framework, language, engine) {
+    if ("none" === engine) return;
+    const pkgPath = join(root, "package.json");
+    const pkg = readJsonFile(pkgPath);
+    mergeDevDependencies(pkg, engine);
+    writeJsonFile(pkgPath, pkg);
+    writeEngineFiles(root, engine);
+    const entries = listUiEntryScripts(root, language);
+    for (const file of entries)prependImportIfMissing(file, buildStyleImportLine(file, engine));
+}
+const cli_require = createRequire(import.meta.url);
+try {
+    const figures = cli_require("prompts/lib/util/figures");
+    figures.radioOn = "\u25CF";
+    figures.radioOff = "\u25CB";
+} catch  {}
+const SKILLS_REPO = "addfox/skills";
+const PROMPT_SELECT_HINT = "- Use arrow-keys. Enter to confirm";
+function multiselectInstructions(showToggleAll) {
+    return "\nInstructions:\n    ↑/↓: Highlight option\n    ←/→/[space]: Toggle selection\n" + (showToggleAll ? "    a: Toggle all\n" : "") + "    Enter to confirm";
+}
+const orange = trueColor(230, 138, 46);
+function getFrameworkChoicesColored() {
+    const colors = {
+        vanilla: gray,
+        vue: green,
+        react: cyan,
+        preact: yellow,
+        svelte: red,
+        solid: lightBlue
+    };
+    return FRAMEWORKS.map((f)=>({
+            ...f,
+            title: colors[f.value](f.title)
+        }));
+}
+function getLanguageChoicesColored() {
+    return [
+        {
+            title: cyan("TypeScript"),
+            value: "ts"
+        },
+        {
+            title: yellow("JavaScript"),
+            value: "js"
+        }
+    ];
+}
+function getPackageManagerChoicesColored() {
+    const colors = {
+        pnpm: orange,
+        npm: red,
+        yarn: blue,
+        bun: green
+    };
+    return PACKAGE_MANAGER_CHOICES.map((c)=>({
+            ...c,
+            title: colors[c.value](c.title)
+        }));
+}
+function getStyleEngineChoicesColored() {
+    const colors = {
+        none: dim,
+        tailwindcss: cyan,
+        unocss: green,
+        less: yellow,
+        sass: magenta
+    };
+    return STYLE_ENGINES.map((c)=>({
+            ...c,
+            title: colors[c.value](c.title)
+        }));
+}
+function getVersion() {
+    try {
+        const pkgPath = external_node_path_resolve(dirname(fileURLToPath(import.meta.url)), "..", "package.json");
+        const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
+        return pkg.version ?? "0.0.0";
+    } catch  {
+        return "0.0.0";
+    }
+}
+function printHelp() {
+    const version = getVersion();
+    console.log(`
+  create-addfox-app v${version}
+
+  Create a new addfox extension project
+
+  Usage:
+    create-addfox-app [project-name] [options]
+
+  Options:
+    --framework <name>   Skip prompt: vanilla | vue | react | preact | svelte | solid
+    --language  <lang>   Skip prompt: js | ts
+    --help               Show this help message
+    --version            Show version number
+
+  Steps: 1) framework  2) style engine  3) language  4) package manager  5) entries
+          6) test setup (optional unit / e2e)  7) Rsdoctor (optional)
+          8) install skills
+
+  Options (non-interactive / skip prompts when used with --framework + --language):
+    --style <name>       none | tailwindcss | unocss | less | sass (default: tailwindcss)
+    --unit               Add rstest unit setup (with --framework and --language)
+    --e2e                Add rstest E2E (Playwright browser) setup
+    --rsdoctor           Add @rsdoctor/rspack-plugin (use addfox dev/build --report)
+`);
+}
+const VALID_STYLE_ENGINES = new Set([
+    "none",
+    "tailwindcss",
+    "unocss",
+    "less",
+    "sass"
+]);
+function parseStyleEngineArg(raw) {
+    const s = "string" == typeof raw ? raw.toLowerCase() : "";
+    if (VALID_STYLE_ENGINES.has(s)) return s;
+    return "tailwindcss";
+}
+async function confirmOverwrite(dir) {
+    const { action } = await prompts({
+        type: "select",
+        name: "action",
+        message: `Directory "${dir}" already exists. What would you like to do?`,
+        choices: [
+            {
+                title: "Cancel",
+                value: "cancel"
+            },
+            {
+                title: "Overwrite (replace contents)",
+                value: "overwrite"
+            }
+        ],
+        initial: 0,
+        hint: PROMPT_SELECT_HINT
+    });
+    if (void 0 === action) return false;
+    return "overwrite" === action;
+}
+async function promptOptions() {
+    const res = await prompts([
+        {
+            type: "select",
+            name: "framework",
+            message: "Select a framework",
+            choices: getFrameworkChoicesColored(),
+            hint: PROMPT_SELECT_HINT
+        },
+        {
+            type: "select",
+            name: "styleEngine",
+            message: "Select a style engine",
+            choices: getStyleEngineChoicesColored(),
+            hint: PROMPT_SELECT_HINT
+        },
+        {
+            type: "select",
+            name: "language",
+            message: "Select a language",
+            choices: getLanguageChoicesColored(),
+            hint: PROMPT_SELECT_HINT
+        },
+        {
+            type: "select",
+            name: "packageManager",
+            message: "Select package manager",
+            choices: getPackageManagerChoicesColored(),
+            hint: PROMPT_SELECT_HINT
+        },
+        {
+            type: "multiselect",
+            name: "entries",
+            message: "Select extension entries",
+            choices: ENTRY_CHOICES,
+            min: 1,
+            hint: "Space to toggle (○ unselected, ● selected)",
+            instructions: multiselectInstructions(true)
+        }
+    ]);
+    if (!res.framework || !res.styleEngine || !res.language || !res.packageManager || !res.entries?.length) return null;
+    return {
+        framework: res.framework,
+        styleEngine: res.styleEngine,
+        language: res.language,
+        packageManager: res.packageManager,
+        entries: res.entries
+    };
+}
+const TEST_KIND_CHOICES = [
+    {
+        title: "Unit — rstest (Node)",
+        value: "unit"
+    },
+    {
+        title: "E2E — rstest + Playwright (browser)",
+        value: "e2e"
+    }
+];
+async function promptTestAndReport() {
+    const testRes = await prompts({
+        type: "multiselect",
+        name: "testKinds",
+        message: "Initialize test config? (optional)",
+        choices: TEST_KIND_CHOICES,
+        min: 0,
+        hint: "Space toggles — leave empty to skip",
+        instructions: multiselectInstructions(true)
+    });
+    if (void 0 === testRes.testKinds) return null;
+    const docRes = await prompts({
+        type: "select",
+        name: "installRsdoctor",
+        message: "Install Rsdoctor (@rsdoctor/rspack-plugin) for bundle analysis? After install, use addfox dev or addfox build with --report.",
+        choices: [
+            {
+                title: "Yes",
+                value: true
+            },
+            {
+                title: "No",
+                value: false
+            }
+        ],
+        initial: 0,
+        hint: PROMPT_SELECT_HINT
+    });
+    if (void 0 === docRes.installRsdoctor) return null;
+    return {
+        testKinds: testRes.testKinds ?? [],
+        installRsdoctor: Boolean(docRes.installRsdoctor)
+    };
+}
+function resolveTestSelectionFromArgv(argv) {
+    const kinds = [];
+    if (argv.unit) kinds.push("unit");
+    if (argv.e2e) kinds.push("e2e");
+    return {
+        testKinds: kinds,
+        installRsdoctor: Boolean(argv.rsdoctor)
+    };
+}
+function updatePackageName(destDir, projectName) {
+    const pkgPath = external_node_path_resolve(destDir, "package.json");
+    if (!existsSync(pkgPath)) return;
+    const pkg = readJsonFile(pkgPath);
+    pkg.name = projectName.replace(/\s+/g, "-").toLowerCase();
+    writeJsonFile(pkgPath, pkg);
+}
+async function main() {
+    const argv = minimist(process.argv.slice(2));
+    if (argv.help || argv.h) return void printHelp();
+    if (argv.version || argv.v) return void console.log(getVersion());
+    const targetDir = argv._[0] ?? "my-extension";
+    const cliFramework = argv.framework;
+    const cliLanguage = argv.language;
+    printAddfoxLogo();
+    console.log(blue("\n  Create Addfox App\n"));
+    const root = external_node_path_resolve(process.cwd(), targetDir);
+    if (existsSync(root)) {
+        const confirmed = await confirmOverwrite(targetDir);
+        if (!confirmed) process.exit(0);
+        rmSync(root, {
+            recursive: true,
+            force: true
+        });
+    }
+    const options = cliFramework && cliLanguage ? {
+        framework: cliFramework,
+        styleEngine: parseStyleEngineArg(argv.style),
+        language: cliLanguage,
+        packageManager: detectPackageManager(),
+        entries: [
+            "__all__"
+        ]
+    } : await promptOptions();
+    if (!options) process.exit(0);
+    const testSelection = cliFramework && cliLanguage ? resolveTestSelectionFromArgv(argv) : await promptTestAndReport();
+    if (!testSelection) process.exit(0);
+    const pm = options.packageManager;
+    const templateName = getTemplateName(options.framework, options.language);
+    const useLocalTemplate = hasLocalTemplate(templateName);
+    const templateLabel = useLocalTemplate ? "Copying local template..." : "Downloading template...";
+    const LOCAL_TEMPLATE_SPINNER_MIN_MS = 800;
+    try {
+        await runWithTemplateSpinner(templateLabel, async ()=>{
+            await new Promise((resolve)=>{
+                setImmediate(resolve);
+            });
+            if (await tryLocalTemplates(templateName, root)) return;
+            await downloadTemplate(templateName, root);
+        }, useLocalTemplate ? {
+            minVisibleMs: LOCAL_TEMPLATE_SPINNER_MIN_MS
+        } : void 0);
+    } catch (err) {
+        console.error(red(`\n  Failed to download template: ${err.message}\n`));
+        process.exit(1);
+    }
+    const useAllEntries = options.entries.includes("__all__");
+    const existingDirs = getExistingAppEntryDirs(root);
+    const effectiveEntries = useAllEntries ? [
+        "__all__"
+    ] : options.entries.filter((e)=>"__all__" !== e && existingDirs.includes(e));
+    if (!useAllEntries && effectiveEntries.length > 0) filterAppEntries(root, effectiveEntries);
+    const configExt = "ts" === options.language ? "ts" : "js";
+    const configPath = external_node_path_resolve(root, `addfox.config.${configExt}`);
+    const configContent = generateAddfoxConfig(options.framework, options.language, options.styleEngine);
+    writeFileSync(configPath, configContent, "utf-8");
+    updatePackageName(root, targetDir);
+    applyStyleEngine(root, options.framework, options.language, options.styleEngine);
+    applyTestAndReportSetup(root, options.language, testSelection);
+    const installCmd = getInstallCommand(pm);
+    const devCmd = getRunCommand(pm, "dev");
+    const { installSkills } = await prompts({
+        type: "select",
+        name: "installSkills",
+        message: "Install addfox skills?",
+        choices: [
+            {
+                title: "Yes",
+                value: true
+            },
+            {
+                title: "No",
+                value: false
+            }
+        ],
+        initial: 0,
+        hint: PROMPT_SELECT_HINT
+    });
+    if (true === installSkills) {
+        const execCmd = getExecCommand(pm);
+        const fullCmd = `${execCmd} skills add ${SKILLS_REPO}`;
+        console.log(yellow("\n  Running: " + fullCmd + "\n"));
+        try {
+            execSync(fullCmd, {
+                cwd: root,
+                stdio: "inherit"
+            });
+        } catch  {
+            console.log(dim("  (Skills install skipped or failed; you can run it later.)\n"));
+        }
+    }
+    console.log(green("\n  ✓ Project created successfully\n"));
+    console.log(dim("  Next steps:\n"));
+    console.log(`  cd ${targetDir}`);
+    console.log(`  ${installCmd}`);
+    console.log(`  ${devCmd}\n`);
+}
+main().catch((e)=>{
+    console.error(e);
+    process.exit(1);
+});

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "create-addfox-app",
+  "version": "0.1.1-beta.10",
+  "description": "Interactive scaffolder for addfox extension projects",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "create-addfox-app": "./dist/cli.js"
+  },
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "prompts": "^2.4.2",
+    "kolorist": "^1.8.0",
+    "minimist": "^1.2.8",
+    "@addfox/pkg-manager": "0.1.1-beta.7"
+  },
+  "devDependencies": {
+    "@rslib/core": "^0.20.0",
+    "@rstest/core": "^0.9.4",
+    "@rstest/coverage-istanbul": "^0.3.0",
+    "@types/node": "^20.0.0",
+    "typescript": "^5.0.0"
+  },
+  "scripts": {
+    "build": "rslib build",
+    "start": "node dist/cli.js",
+    "test": "rstest run",
+    "test:coverage": "rstest run --coverage"
+  }
+}