@spicemod/creator 0.0.22 → 0.0.24

package/dist/bin.mjs

@@ -2,7 +2,7 @@
 import { Command, Option } from "commander";
 import * as v from "valibot";
 import path, { basename, dirname, extname, join, relative, resolve } from "node:path";
-import { context, transform } from "esbuild";
+import { build, context, transform } from "esbuild";
 import { createReadStream, existsSync, lstatSync, mkdirSync, readFileSync, readdirSync, rmSync, statSync, writeFileSync } from "node:fs";
 import { watchConfig } from "c12";
 import { globSync } from "tinyglobby";
@@ -10,9 +10,11 @@ import { URL as URL$1, fileURLToPath } from "node:url";
 import { execSync, spawn, spawnSync } from "node:child_process";
 import readline, { createInterface } from "node:readline";
 import * as p from "@clack/prompts";
-import { cancel, log } from "@clack/prompts";
+import { cancel, log, spinner } from "@clack/prompts";
 import pc from "picocolors";
 import "dotenv/config";
+import { readFile, writeFile } from "node:fs/promises";
+import { parse } from "ini";
 import { gzipSync } from "node:zlib";
 import postcssMinify from "@csstools/postcss-minify";
 import autoprefixer from "autoprefixer";
@@ -20,10 +22,11 @@ import { postcssModules, sassPlugin } from "esbuild-sass-plugin";
 import postcss from "postcss";
 import postcssImport from "postcss-import";
 import postcssPresetEnv from "postcss-preset-env";
-import { readFile, writeFile } from "node:fs/promises";
-import { parse } from "ini";
+import { createHash } from "node:crypto";
 import { chdir } from "node:process";
 import { lookup } from "node:dns/promises";
+import { mkdir, writeFile as writeFile$1 } from "fs/promises";
+import { dirname as dirname$1, join as join$1 } from "path";
 import { createServer } from "node:http";
 import { WebSocket, WebSocketServer } from "ws";
 
@@ -57,7 +60,11 @@ const toOptions = (metadata) => metadata.map((m) => ({
 	label: m.title,
 	hint: m.description
 }));
-const templateTypes = ["extension", "theme"];
+const templateTypes = [
+	"extension",
+	"theme",
+	"custom-app"
+];
 const templates = templateTypes.map((dir) => {
 	const meta_file = dist(`templates/${dir}/meta.json`, import.meta.url);
 	const { title, description } = JSON.parse(readFileSync(meta_file, "utf8"));
@@ -130,12 +137,13 @@ const frameworks = frameworkTypes.map((name) => ({
 }));
 const frameworkOptions = toOptions(frameworks);
 const liveReloadFilePath = dist(`templates/liveReload.js`, import.meta.url);
-const templateFilePath = dist("templates/wrapper.js", import.meta.url);
+const templateWrapperFilePath = dist("templates/wrapper.js", import.meta.url);
+const customAppEntryFilePath = dist("templates/customAppEntry.js", import.meta.url);
 
 //#endregion
 //#region package.json
 var name = "@spicemod/creator";
-var version = "0.0.22";
+var version = "0.0.24";
 
 //#endregion
 //#region src/utils/common.ts
@@ -229,57 +237,6 @@ async function installPackages(packageManager, isOnline) {
 	});
 }
 
-//#endregion
-//#region src/config/schema.ts
-const ServerConfigSchema = v.object({
-	port: v.optional(v.number()),
-	serveDir: v.string(),
-	hmrPath: v.optional(v.string())
-});
-const EntryFileSchema = v.string();
-const ThemeEntrySchema = v.object({
-	js: EntryFileSchema,
-	css: EntryFileSchema
-});
-const TemplateSpecificOptionalSchema = v.variant("template", [v.partial(v.object({
-	template: v.literal("extension"),
-	entry: EntryFileSchema
-})), v.partial(v.object({
-	template: v.literal("theme"),
-	entry: ThemeEntrySchema
-}))]);
-const TemplateSpecificSchema = v.variant("template", [v.object({
-	template: v.literal("extension"),
-	entry: EntryFileSchema
-}), v.object({
-	template: v.literal("theme"),
-	entry: ThemeEntrySchema
-})]);
-const CommonSchema = v.object({
-	name: v.string(),
-	outDir: v.string(),
-	linter: v.picklist(linterTypes),
-	framework: v.picklist(frameworkTypes),
-	packageManager: v.picklist(packageManagers),
-	esbuildOptions: v.record(v.string(), v.any()),
-	devModeVarName: v.optional(v.string()),
-	serverConfig: v.partial(ServerConfigSchema),
-	version: v.string()
-});
-const FileOptionsSchema = v.intersect([v.partial(CommonSchema), TemplateSpecificOptionalSchema]);
-const OptionsSchema$1 = v.pipe(v.intersect([v.required(CommonSchema), TemplateSpecificSchema]), v.check((input) => !!input.name, "Name is required"));
-
-//#endregion
-//#region src/env.ts
-const isInternal = process.env.SPICE_INTERNAL === "true";
-const isDev = process.env.IS_DEV === "true";
-const spicetifyBin = process.env.SPICETIFY_BIN || process.env.SPICE_BIN || "spicetify";
-const env = {
-	isInternal,
-	isDev,
-	spicetifyBin
-};
-
 //#endregion
 //#region src/constants.ts
 const GITHUB_LINK = "https://github.com/sanoojes/spicetify-creator";
@@ -313,6 +270,150 @@ const VALID_PROJECT_FILES = new Set([
 	"yarnrc.yml",
 	".yarn"
 ]);
+const CUSTOM_APP_NAME_LOCALES = [
+	"ms",
+	"gu",
+	"ko",
+	"pa-IN",
+	"az",
+	"ru",
+	"uk",
+	"nb",
+	"sv",
+	"sw",
+	"ur",
+	"bho",
+	"pa-PK",
+	"te",
+	"ro",
+	"vi",
+	"am",
+	"bn",
+	"en",
+	"id",
+	"bg",
+	"da",
+	"es-419",
+	"mr",
+	"ml",
+	"th",
+	"tr",
+	"is",
+	"fa",
+	"or",
+	"he",
+	"hi",
+	"zh-TW",
+	"sr",
+	"pt-BR",
+	"zu",
+	"nl",
+	"es",
+	"lt",
+	"ja",
+	"st",
+	"it",
+	"el",
+	"pt-PT",
+	"kn",
+	"de",
+	"fr",
+	"ne",
+	"ar",
+	"af",
+	"et",
+	"pl",
+	"ta",
+	"sl",
+	"pk",
+	"hr",
+	"sk",
+	"fi",
+	"lv",
+	"fil",
+	"fr-CA",
+	"cs",
+	"zh-CN",
+	"hu"
+];
+
+//#endregion
+//#region src/config/schema.ts
+const ServerConfigSchema = v.object({
+	port: v.optional(v.number()),
+	serveDir: v.string(),
+	hmrPath: v.optional(v.string())
+});
+const EntryFileSchema = v.string();
+const AssetEntrySchema = v.object({
+	js: EntryFileSchema,
+	css: EntryFileSchema
+});
+const CustomAppEntrySchema = v.object({
+	extension: EntryFileSchema,
+	app: EntryFileSchema
+});
+const LocaleNameSchema = v.intersect([v.object({ en: v.string() }), v.record(v.picklist(CUSTOM_APP_NAME_LOCALES), v.string())]);
+const ExtensionTemplateSchema = v.object({
+	name: v.string(),
+	template: v.literal("extension"),
+	entry: EntryFileSchema
+});
+const ThemeTemplateSchema = v.object({
+	name: v.string(),
+	template: v.literal("theme"),
+	entry: AssetEntrySchema
+});
+const CustomAppTemplateSchema = v.object({
+	name: v.union([v.string(), LocaleNameSchema], "Name must be a string or a translations object containing the required 'en' locale."),
+	icon: v.object({
+		default: v.string(),
+		active: v.optional(v.string())
+	}),
+	template: v.literal("custom-app"),
+	entry: CustomAppEntrySchema
+});
+const TemplateSpecificSchema = v.variant("template", [
+	ExtensionTemplateSchema,
+	ThemeTemplateSchema,
+	CustomAppTemplateSchema
+]);
+const TemplateSpecificOptionalSchema = v.variant("template", [
+	v.partial(ExtensionTemplateSchema),
+	v.partial(ThemeTemplateSchema),
+	v.partial(CustomAppTemplateSchema)
+]);
+const RequiredCommonSchema = v.object({
+	outDir: v.string(),
+	linter: v.picklist(linterTypes),
+	framework: v.picklist(frameworkTypes),
+	packageManager: v.picklist(packageManagers),
+	esbuildOptions: v.record(v.string(), v.any()),
+	serverConfig: v.partial(ServerConfigSchema),
+	version: v.string()
+});
+const OptionalCommonSchema = v.object({ devModeVarName: v.optional(v.string()) });
+const FileOptionsSchema = v.intersect([
+	v.partial(RequiredCommonSchema),
+	OptionalCommonSchema,
+	TemplateSpecificOptionalSchema
+]);
+const OptionsSchema$1 = v.intersect([
+	v.required(RequiredCommonSchema),
+	OptionalCommonSchema,
+	TemplateSpecificSchema
+]);
+
+//#endregion
+//#region src/env.ts
+const isDev = process.env.IS_DEV === "true";
+const spicetifyBin = process.env.SPICETIFY_BIN || process.env.SPICE_BIN || "spicetify";
+const skipSpicetify = process.env.SPICETIFY_SKIP === "true" || process.env.CI === "true";
+const env = {
+	isDev,
+	spicetifyBin,
+	skipSpicetify
+};
 
 //#endregion
 //#region src/utils/logger.ts
@@ -350,8 +451,15 @@ var Logger = class {
 		this.add(console.warn, args);
 	}
 	error(...errors) {
-		this.add(console.error, errors);
-		for (const err of errors) if (err instanceof Error && this.isDev && err.stack) console.error(pc.dim(err.stack.split("\n").slice(1).join("\n")));
+		const formatted = [];
+		for (const err of errors) if (err instanceof Error) {
+			formatted.push(pc.red(err.message));
+			if (this.isDev && err.stack) {
+				const stack = err.stack.split("\n").slice(1).join("\n");
+				formatted.push(pc.dim(stack));
+			}
+		} else formatted.push(err);
+		this.add(console.error, formatted);
 	}
 	log(...args) {
 		if (!this.isDev) return;
@@ -363,6 +471,10 @@ var Logger = class {
 	}
 	clear() {
 		if (!process.stdout.isTTY || process.env.CI) return;
+		if (this.isDev) {
+			this.log("clear skipped");
+			return;
+		}
 		readline.cursorTo(process.stdout, 0, 0);
 		readline.clearScreenDown(process.stdout);
 	}
@@ -371,34 +483,90 @@ const createLogger = (prefix = "", mode) => new Logger(prefix, mode);
 const logger$2 = createLogger("common");
 
 //#endregion
-//#region src/utils/schema.ts
-function safeParse(schema, data, type = "CLI") {
-	const result = v.safeParse(schema, data);
+//#region src/utils/spicetify/schema.ts
+const SpicetifyConfigSchema = v.object({
+	Setting: v.object({
+		spotify_path: v.string(),
+		prefs_path: v.string(),
+		inject_theme_js: v.string(),
+		inject_css: v.string(),
+		current_theme: v.string(),
+		color_scheme: v.string(),
+		always_enable_devtools: v.string()
+	}),
+	AdditionalOptions: v.object({
+		experimental_features: v.string(),
+		extensions: v.pipe(v.string(), v.transform((input) => input.split("|").filter(Boolean))),
+		custom_apps: v.string()
+	}),
+	Backup: v.object({
+		version: v.string(),
+		with: v.string()
+	})
+});
+
+//#endregion
+//#region src/utils/spicetify/index.ts
+function runSpice(args) {
+	validateSpicetify(env.spicetifyBin);
+	return spawnSync(env.spicetifyBin, args, { encoding: "utf-8" });
+}
+const getCustomAppsDir = () => join(getSpiceDataPath(), "CustomApps");
+const getExtensionDir = () => join(getSpiceDataPath(), "Extensions");
+const getThemesDir = () => join(getSpiceDataPath(), "Themes");
+async function getSpicetifyConfig() {
+	const { stdout, stderr, error } = runSpice(["path", "-c"]);
+	if (error || stderr) throw new Error(`Failed to locate Spicetify config: ${stderr || error?.message}`);
+	const rawConfig = parse(await readFile(stdout.trim(), "utf-8"));
+	const result = v.safeParse(SpicetifyConfigSchema, rawConfig);
 	if (result.success) return result.output;
-	logger$2.error(`\n${pc.bgRed(pc.black(" ERROR "))} ${pc.red(`Invalid ${type} options:`)}`);
-	result.issues.forEach((issue) => {
-		const path = issue.path?.map((p) => p.key).join(".") || "input";
-		logger$2.error(`${pc.dim(" └─")} ${pc.yellow(path)}: ${pc.white(issue.message)}`);
-	});
-	logger$2.error(`\n${pc.dim("Check your command flags and try again.")}\n`);
-	process.exit(1);
+	else throw new Error("Spicetify Config Validation Failed:", v.flatten(result.issues).nested);
 }
+function getSpiceDataPath() {
+	const { stdout, stderr, error } = runSpice(["path", "userdata"]);
+	if (error || stderr) throw new Error(`Failed to locate Spicetify config: ${stderr || error?.message}`);
+	return stdout.trim();
+}
+function validateSpicetify(bin) {
+	const result = spawnSync(bin, ["--version"], { encoding: "utf-8" });
+	if (result.error) throw result.error;
+	if (result.status !== 0) throw new Error(`Invalid spicetify binary "${bin}": ${result.stderr || "unknown error"}`);
+}
+
+//#endregion
+//#region src/config/globs.ts
+const JS_EXTENSIONS = "{ts,tsx,js,jsx,mts,mjs,cts,cjs}";
+const CSS_EXTENSIONS = "{css,scss,sass,less,styl,stylus,pcss,postcss}";
+const withSrc = (dirs) => dirs.flatMap((dir) => [dir, `src/${dir}`]);
+const createGlobs = (names, dirs, ext) => names.flatMap((name) => dirs.map((dir) => `${dir}${name}.${ext}`));
+const JS_ENTRY_GLOBS = createGlobs(["app", "index"], withSrc([""]), JS_EXTENSIONS);
+const JS_EXTENSION_ENTRY_GLOBS = createGlobs(["app", "index"], withSrc(["extension/"]), JS_EXTENSIONS);
+const CSS_ENTRY_GLOBS = createGlobs(["app"], withSrc([
+	"",
+	"styles/",
+	"css/"
+]), CSS_EXTENSIONS);
+const ICON_GLOBS = createGlobs(["icon", "logo"], withSrc([
+	"",
+	"icons/",
+	"assets/"
+]), "svg");
+const ICON_ACTIVE_GLOBS = createGlobs(["icon-active", "logo-active"], withSrc([
+	"",
+	"icons/",
+	"assets/"
+]), "svg");
+const ENTRY_MAP = {
+	js: [...JS_ENTRY_GLOBS, ...JS_EXTENSION_ENTRY_GLOBS],
+	css: CSS_ENTRY_GLOBS,
+	"js-app-only": JS_ENTRY_GLOBS,
+	"js-extension-only": JS_EXTENSION_ENTRY_GLOBS
+};
 
 //#endregion
 //#region src/config/index.ts
 const logger$1 = createLogger("config");
-const JS_ENTRY_GLOBS = [
-	"app.{ts,tsx,js,jsx,mts,mjs,cts,cjs}",
-	"extension/app.{ts,tsx,js,jsx,mts,mjs,cts,cjs}",
-	"src/app.{ts,tsx,js,jsx,mts,mjs,cts,cjs}",
-	"src/extension/app.{ts,tsx,js,jsx,mts,mjs,cts,cjs}"
-];
-const CSS_ENTRY_GLOBS = [
-	"app.{css,scss,sass,less,styl,stylus,pcss,postcss}",
-	"styles/app.{css,scss,sass,less,styl,stylus,pcss,postcss}",
-	"src/app.{css,scss,sass,less,styl,stylus,pcss,postcss}",
-	"src/styles/app.{css,scss,sass,less,styl,stylus,pcss,postcss}"
-];
+let previousConfig;
 const CONFIG_DEFAULTS = {
 	outDir: "./dist",
 	linter: "biome",
@@ -409,71 +577,133 @@ const CONFIG_DEFAULTS = {
 async function loadConfig(cb) {
 	let cleanup;
 	const runCb = async (config, isUpdate) => {
+		if (isUpdate && previousConfig) await cleanupSpicetifyConfig();
 		if (typeof cleanup === "function") await cleanup();
 		cleanup = await cb(config, isUpdate);
+		previousConfig = config;
 	};
 	const watcher = await watchConfig({
 		name: "spice",
 		defaults: CONFIG_DEFAULTS,
-		configFileRequired: false,
+		configFileRequired: true,
 		packageJson: true,
 		async onUpdate({ newConfig }) {
-			await runCb(await getResolvedConfig(newConfig.config), true);
+			try {
+				await runCb(await getResolvedConfig(newConfig.config, { exitOnError: false }), true);
+			} catch {
+				logger$1.error(pc.red("Config validation failed, keeping previous configuration"));
+			}
 		}
 	});
 	await runCb(await getResolvedConfig(watcher.config), false);
 	return watcher;
 }
-async function getResolvedConfig(config) {
-	try {
-		return safeParse(OptionsSchema$1, await resolveContext(config), "Config");
-	} catch (e) {
-		const message = e instanceof Error ? e.message : String(e);
-		logger$1.error(pc.red(`Failed to load configuration: ${message}`));
-		process.exit(1);
-	}
+async function getResolvedConfig(config, { exitOnError = true } = {}) {
+	const resolvedContext = await resolveContext(config);
+	const result = v.safeParse(OptionsSchema$1, resolvedContext);
+	if (result.success) return result.output;
+	logger$1.error(pc.red("Failed to load configuration:"));
+	result.issues.forEach((issue) => {
+		const path = issue.path?.map((p) => p.key).join(".") || "input";
+		logger$1.error(`${pc.dim(" └─")} ${pc.yellow(path)}: ${pc.white(issue.message)}`);
+	});
+	if (exitOnError) process.exit(1);
+	throw new Error("Invalid configuration");
 }
 async function resolveContext(config) {
 	const cwd = process.cwd();
-	const getPkg = () => {
-		try {
-			return JSON.parse(readFileSync(resolve(cwd, "package.json"), "utf-8"));
-		} catch {
-			return {};
-		}
-	};
-	const pkg = config.name && config.version ? {} : getPkg();
-	if (!config.name) config.name = pkg.name || basename(cwd);
-	const DEFAULT_VERSION = "0.0.1";
-	if (!config.version) config.version = pkg.version ?? DEFAULT_VERSION;
-	if (!config.entry) if (config.template === "theme") {
-		config.entry = {
-			js: resolveDefaultEntries(cwd, "js"),
-			css: resolveDefaultEntries(cwd, "css")
-		};
-		if (!config.entry.js || config.entry.js.length === 0) config.entry.js = resolveDefaultEntries(cwd, "js");
-		if (!config.entry.css || config.entry.css.length === 0) config.entry.css = resolveDefaultEntries(cwd, "css");
-	} else config.entry = resolveDefaultEntries(cwd, "js");
-	if (!config.devModeVarName) config.devModeVarName = DEV_MODE_VAR_NAME;
+	const pkg = config.name && config.version ? {} : getPackageMeta(cwd);
+	config.name ||= pkg.name || basename(cwd);
+	config.version ||= pkg.version || "0.0.1";
+	config.entry ||= resolveConfigEntries(config.template, cwd);
 	config.outDir = resolve(cwd, config.outDir || "./dist");
 	config.esbuildOptions ??= {};
 	config.serverConfig ??= {};
+	if (config.template === "custom-app") config.icon ??= {
+		default: resolveDefaultIcon(cwd),
+		active: resolveActiveIcon(cwd)
+	};
 	return config;
 }
-function resolveDefaultEntries(cwd, type) {
-	const resolveFile = (globs) => {
-		for (const glob of globs) {
-			const matches = globSync(glob, {
-				cwd,
-				absolute: true
-			});
-			if (matches.length > 0) return matches;
-		}
-		return [];
+function getPackageMeta(cwd) {
+	try {
+		return JSON.parse(readFileSync(resolve(cwd, "package.json"), "utf-8"));
+	} catch {
+		return {};
+	}
+}
+function resolveConfigEntries(template, cwd) {
+	if (template === "theme") return {
+		js: resolveDefaultEntry(cwd, "js"),
+		css: resolveDefaultEntry(cwd, "css")
+	};
+	if (template === "custom-app") return {
+		app: resolveDefaultEntry(cwd, "js-app-only"),
+		extension: resolveDefaultEntry(cwd, "js-extension-only")
 	};
-	const firstEntry = resolveFile(type === "js" ? JS_ENTRY_GLOBS : CSS_ENTRY_GLOBS)[0];
-	if (!firstEntry) throw new Error(type === "js" ? "No JavaScript entry found (src/app or src/index)." : "No CSS entry found (src/app, src/index, or src/styles).");
-	return firstEntry;
+	return resolveDefaultEntry(cwd, "js");
+}
+function resolveDefaultEntry(cwd, type) {
+	const globs = ENTRY_MAP[type];
+	for (const glob of globs) {
+		const matches = globSync(glob, {
+			cwd,
+			absolute: true
+		});
+		if (matches.length > 0 && matches[0]) return matches[0];
+	}
+	const displayType = {
+		js: "JavaScript/TypeScript",
+		css: "CSS/Stylesheet",
+		"js-app-only": "JavaScript/TypeScript (Custom App)",
+		"js-extension-only": "JavaScript/TypeScript (Extension)"
+	}[type];
+	const expectedFiles = globs.map((g) => `  - ${g}`).join("\n");
+	throw new Error(`No ${displayType} entry file found in your project.\nPlease create one of the following files:\n${expectedFiles}`);
+}
+function resolveDefaultIcon(cwd) {
+	for (const glob of ICON_GLOBS) {
+		const matches = globSync(glob, {
+			cwd,
+			absolute: true
+		});
+		if (matches.length > 0 && matches[0]) return readFileSync(matches[0]).toString();
+	}
+	const expectedFiles = ICON_GLOBS.map((g) => `  - ${g}`).join("\n");
+	throw new Error(`No icon file found in your project.\nPlease create one of the following files:\n${expectedFiles}`);
+}
+function resolveActiveIcon(cwd) {
+	for (const glob of ICON_ACTIVE_GLOBS) {
+		const matches = globSync(glob, {
+			cwd,
+			absolute: true
+		});
+		if (matches.length > 0 && matches[0]) return readFileSync(matches[0]).toString();
+	}
+	return "";
+}
+const getEnName = (configName) => typeof configName === "string" ? configName : configName.en;
+function getSpiceIdentifier(config) {
+	if (config.template === "extension") return `${urlSlugify(config.name)}.js`;
+	if (config.template === "custom-app") return urlSlugify(getEnName(config.name));
+	return urlSlugify(getEnName(config.name));
+}
+function getSpiceVarName(template) {
+	if (template === "extension") return "extensions";
+	if (template === "custom-app") return "custom_apps";
+	return "current_theme";
+}
+async function cleanupSpicetifyConfig() {
+	if (!previousConfig) return;
+	const prevIdentifier = getSpiceIdentifier(previousConfig);
+	const varName = getSpiceVarName(previousConfig.template);
+	logger$1.debug(`Cleaning up previous spicetify config: ${varName} ${prevIdentifier}-`);
+	runSpice([
+		"config",
+		varName,
+		`${prevIdentifier}-`
+	]);
+	runSpice(["apply"]);
 }
 
 //#endregion
@@ -577,14 +807,14 @@ function css({ minify = false, inline = false, logger = createLogger("plugin:css
 		type,
 		transform: postcssModules({
 			getJSON: () => {},
-			generateScopedName: "[name]__[local]___[hash:base64:5]",
-			localsConvention: "camelCaseOnly"
+			generateScopedName: "[name]__[local]___[hash:base64:5]"
 		}, postCssPlugins)
 	}), sassPlugin({
 		filter: /\.(s[ac]ss|css)$/,
 		type,
 		async transform(css, _resolveDir, filePath) {
 			const start = performance.now();
+			logger.log("processing:", filePath, "type:", type);
 			const result = await postcss(postCssPlugins).process(css, { from: filePath });
 			logger.debug("Global CSS processed", {
 				filePath,
@@ -615,68 +845,18 @@ const externalGlobal = (externals, namespace = "spicetify-global") => {
 	};
 };
 
-//#endregion
-//#region src/utils/spicetify/schema.ts
-const SpicetifyConfigSchema = v.object({
-	Setting: v.object({
-		spotify_path: v.string(),
-		prefs_path: v.string(),
-		inject_theme_js: v.string(),
-		inject_css: v.string(),
-		current_theme: v.string(),
-		color_scheme: v.string(),
-		always_enable_devtools: v.string()
-	}),
-	AdditionalOptions: v.object({
-		experimental_features: v.string(),
-		extensions: v.pipe(v.string(), v.transform((input) => input.split("|").filter(Boolean))),
-		custom_apps: v.string()
-	}),
-	Backup: v.object({
-		version: v.string(),
-		with: v.string()
-	})
-});
-
-//#endregion
-//#region src/utils/spicetify/index.ts
-function runSpice(args) {
-	validateSpicetify(env.spicetifyBin);
-	return spawnSync(env.spicetifyBin, args, { encoding: "utf-8" });
-}
-const getExtensionDir = () => join(getSpiceDataPath(), "Extensions");
-const getThemesDir = () => join(getSpiceDataPath(), "Themes");
-async function getSpicetifyConfig() {
-	const { stdout, stderr, error } = runSpice(["path", "-c"]);
-	if (error || stderr) throw new Error(`Failed to locate Spicetify config: ${stderr || error?.message}`);
-	const rawConfig = parse(await readFile(stdout.trim(), "utf-8"));
-	const result = v.safeParse(SpicetifyConfigSchema, rawConfig);
-	if (result.success) return result.output;
-	else throw new Error("Spicetify Config Validation Failed:", v.flatten(result.issues).nested);
-}
-function getSpiceDataPath() {
-	const { stdout, stderr, error } = runSpice(["path", "userdata"]);
-	if (error || stderr) throw new Error(`Failed to locate Spicetify config: ${stderr || error?.message}`);
-	return stdout.trim();
-}
-function validateSpicetify(bin) {
-	const result = spawnSync(bin, ["--version"], { encoding: "utf-8" });
-	if (result.error) throw result.error;
-	if (result.status !== 0) throw new Error(`Invalid spicetify binary "${bin}": ${result.stderr || "unknown error"}`);
-}
-
 //#endregion
 //#region src/esbuild/plugins/spicetifyHandlers.ts
-const skipSpicetify = process.env.SPICETIFY_SKIP === "true" || process.env.CI === "true";
-const spicetifyHandler = ({ config, options, cache, logger = createLogger("plugin:spicetifyHandler") }) => ({
+const spicetifyHandler = ({ config, options, cache, logger = createLogger("plugin:spicetify-handler") }) => ({
 	name: "spice_internal__spicetify-build-handler",
 	async setup(build) {
 		const { apply = true, copy = true, applyOnce = true, remove, outDir = "./dist" } = options;
 		let hasAppliedOnce = false;
 		const isExtension = config.template === "extension";
-		const identifier = isExtension ? `${urlSlugify(config.name)}.js` : urlSlugify(config.name);
-		if (skipSpicetify) {
-			logger.info(pc.yellow("SPICETIFY_SKIP=true, skipping spicetify operations"));
+		const isCustomApp = config.template === "custom-app";
+		const identifier = isExtension ? `${urlSlugify(config.name)}.js` : urlSlugify(getEnName(config.name));
+		if (env.skipSpicetify) {
+			logger.info(pc.yellow("skipping spicetify operations"));
 			build.onEnd(async (result) => {
 				if (result.errors.length > 0) return;
 				if (!cache.hasChanges || cache.changed.size === 0) return;
@@ -702,38 +882,36 @@ const spicetifyHandler = ({ config, options, cache, logger = createLogger("plugi
 		const spiceConfig = await getSpicetifyConfig();
 		logger.debug(pc.green("Spicetify Config: "), spiceConfig);
 		if (apply) {
-			const defaultTheme = spiceConfig.Setting.current_theme;
-			build.onStart(() => {
-				const spiceIdentifier = remove ? `${identifier}-` : identifier;
-				if (isExtension) runSpice([
-					"config",
-					"extensions",
-					spiceIdentifier
-				]);
-				else runSpice([
-					"config",
-					"current_theme",
-					spiceIdentifier
-				]);
-			});
+			const defaultTheme = spiceConfig?.Setting?.current_theme || "SpicetifyDefault";
+			const spiceIdentifier = remove ? `${identifier}-` : identifier;
+			runSpice([
+				"config",
+				isExtension ? "extensions" : isCustomApp ? "custom_apps" : "current_theme",
+				spiceIdentifier
+			]);
 			if (!isExtension && !remove) {
-				const resetTheme = () => {
-					runSpice([
+				const cleanup = () => {
+					if (isCustomApp) runSpice([
+						"config",
+						"custom_apps",
+						`${identifier}-`
+					]);
+					else runSpice([
 						"config",
 						"current_theme",
 						defaultTheme
 					]);
 					process.exit();
 				};
-				process.once("SIGINT", resetTheme);
-				process.once("SIGTERM", resetTheme);
+				process.once("SIGINT", cleanup);
+				process.once("SIGTERM", cleanup);
 			}
 		}
 		build.onEnd(async (result) => {
 			if (result.errors.length > 0) return;
 			if (!cache.hasChanges || cache.changed.size === 0) return;
 			const destDirs = [resolve(outDir)];
-			if (copy) destDirs.push(isExtension ? getExtensionDir() : resolve(getThemesDir(), identifier));
+			if (copy) destDirs.push(isExtension ? getExtensionDir() : isCustomApp ? resolve(getCustomAppsDir(), identifier) : resolve(getThemesDir(), identifier));
 			const tasks = [];
 			for (const filePath of cache.changed) {
 				const fileData = cache.files.get(filePath);
@@ -754,8 +932,8 @@ const spicetifyHandler = ({ config, options, cache, logger = createLogger("plugi
 				return;
 			}
 			if (apply && cache.hasChanges && (!applyOnce || !hasAppliedOnce)) {
-				const { stderr, status } = runSpice(["apply"]);
-				if (status !== 0) logger.error(pc.red(`${CROSS} Spicetify apply failed: ${stderr}`));
+				const { stdout, stderr, status } = runSpice(["apply"]);
+				if (status !== 0) logger.error(pc.red(`${CROSS} Spicetify apply failed:`), stdout, stderr);
 				else hasAppliedOnce = true;
 			}
 		});
@@ -764,70 +942,161 @@ const spicetifyHandler = ({ config, options, cache, logger = createLogger("plugi
 
 //#endregion
 //#region src/esbuild/plugins/wrapWithLoader.ts
-function wrapWithLoader({ name, type, version, cache, outFiles, server, dev = false, logger = createLogger("plugin:wrapWithLoader") }) {
+function wrapWithLoader({ config, cache, outFiles, server, dev = false, logger = createLogger("plugin:wrapper") }) {
 	const namespace = "spice_internal__wrap-with-loader";
+	const name = typeof config.name === "string" ? config.name : config.name.en;
+	const { template: type, version } = config;
+	let previousManifestHash;
 	return {
 		name: namespace,
-		setup(build) {
-			if (build.initialOptions.write !== false) throw new Error(`[${namespace}] This plugin requires "write: false" in build options.`);
-			build.onEnd(async (res) => {
+		setup(build$3) {
+			if (build$3.initialOptions.write !== false) throw new Error(`[${namespace}] This plugin requires "write: false" in build options.`);
+			build$3.onEnd(async (res) => {
 				try {
 					if (res.errors.length > 0 || !res.outputFiles) return;
 					cache.changed.clear();
 					cache.hasChanges = false;
 					const filesChanged = [];
-					let bundledCss = "";
-					if (!dev && type === "extension") bundledCss = res.outputFiles.filter((f) => f.path.endsWith(".css")).map((f) => f.text).join("");
+					const outdir = resolve(build$3.initialOptions.outdir || "./dist");
+					const bundledCss = getBundledCss(res.outputFiles, outdir, type, dev);
+					const minify = build$3.initialOptions.minify;
+					const slug = varSlugify(`${name}_${version}`);
 					const transformPromises = res.outputFiles.map(async (file) => {
 						const isJs = file.path.endsWith(".js");
 						const isCss = file.path.endsWith(".css");
 						if (!dev && isCss && type === "extension") return;
-						const targetName = isJs ? outFiles.js : isCss ? outFiles.css ?? basename(file.path) : basename(file.path);
-						const renamedPath = join(build.initialOptions.outdir || "./dist/", targetName);
+						const relPath = file.path.slice(outdir.length);
+						const isCustomAppExtension = type === "custom-app" && isExtensionDir(relPath);
+						let targetName;
+						if (isJs) targetName = isCustomAppExtension ? outFiles.jsExtension ?? "extension.js" : outFiles.js;
+						else if (isCss && !isCustomAppExtension) targetName = outFiles.css;
+						if (!targetName) {
+							logger.debug("Skipped file: ", file.path);
+							return;
+						}
+						const renamedPath = join(build$3.initialOptions.outdir || "./dist/", targetName);
+						if (type === "custom-app" && targetName === outFiles.js && isJs) {
+							const globalName = varSlugify(getEnName(config.name));
+							const final = (await build({
+								bundle: true,
+								write: false,
+								minify,
+								platform: "browser",
+								format: "iife",
+								globalName,
+								stdin: {
+									contents: readFileSync(customAppEntryFilePath),
+									loader: "tsx",
+									sourcefile: "entry.tsx"
+								},
+								plugins: [plugins.externalGlobal({ react: "Spicetify.React" }), {
+									name: "virtual-modules",
+									setup(vBuild) {
+										vBuild.onResolve({ filter: /^virtual:app$/ }, () => ({
+											path: "app",
+											namespace: "virtual"
+										}));
+										vBuild.onLoad({
+											filter: /.*/,
+											namespace: "virtual"
+										}, () => ({
+											contents: file.text,
+											loader: "js"
+										}));
+									}
+								}]
+							})).outputFiles?.[0];
+							if (!final) return;
+							let combinedCode = `${final.text}${dev ? `export default () => ${globalName}.default();` : `var render = () => ${globalName}.default();`}\n`;
+							const nextBuffer = Buffer.from(combinedCode);
+							const existingFile = cache.files.get(renamedPath);
+							const nextHash = final.hash;
+							if (!existingFile || existingFile.hash !== nextHash || config.template === "custom-app") {
+								cache.files.set(renamedPath, {
+									contents: nextBuffer,
+									name: targetName,
+									hash: final.hash
+								});
+								cache.changed.add(renamedPath);
+								cache.hasChanges = true;
+								filesChanged.push(renamedPath);
+							}
+							return;
+						}
 						if (!isJs) {
-							cache.files.set(renamedPath, {
-								name: targetName,
-								contents: file.contents
-							});
-							cache.changed.add(renamedPath);
-							cache.hasChanges = true;
-							filesChanged.push(renamedPath);
+							const nextBuffer = Buffer.from(file.contents);
+							const existingFile = cache.files.get(renamedPath);
+							const nextHash = file.hash;
+							if (!existingFile || existingFile.hash !== nextHash || config.template === "custom-app") {
+								cache.files.set(renamedPath, {
+									name: targetName,
+									contents: nextBuffer,
+									hash: file.hash
+								});
+								cache.changed.add(renamedPath);
+								cache.hasChanges = true;
+								filesChanged.push(renamedPath);
+							}
 							return;
 						}
-						const slug = varSlugify(`${name}_${version}`);
-						const templateRaw = readFileSync(templateFilePath, "utf-8");
-						const minify = build.initialOptions.minify;
-						const { code: transformedTemp } = await transform(templateRaw, {
+						const { code: transformedTemp } = await transform(readFileSync(templateWrapperFilePath, "utf-8"), {
 							minify,
-							target: build.initialOptions.target || "es2020",
+							target: build$3.initialOptions.target || "es2020",
 							loader: "jsx",
 							define: {
-								__ESBUILD__HAS_CSS: JSON.stringify(type === "extension"),
+								__ESBUILD__HAS_CSS: JSON.stringify(type !== "theme"),
+								__ESBUILD__INJECTED_CSS: JSON.stringify(bundledCss),
 								__ESBUILD__APP_SLUG: JSON.stringify(slug),
 								__ESBUILD__APP_TYPE: JSON.stringify(type),
 								__ESBUILD__APP_ID: JSON.stringify(varSlugify(name)),
-								__ESBUILD__APP_VERSION: JSON.stringify(version),
-								__ESBUILD__APP_HASH: JSON.stringify("")
+								__ESBUILD__APP_VERSION: JSON.stringify(version)
 							}
 						});
 						const template = replace(transformedTemp, {
 							"\"{{INJECT_START_COMMENT}}\"": minify ? "" : "/* --- START --- */",
 							"\"{{INJECT_END_COMMENT}}\"": minify ? "" : "/* --- END --- */",
-							"{{INJECTED_CSS_HERE}}": bundledCss,
 							"\"{{INJECTED_JS_HERE}}\"": file.text
 						});
 						const nextBuffer = Buffer.from(template);
-						const previous = cache.files.get(renamedPath);
-						if (previous?.contents && Buffer.compare(previous.contents, nextBuffer) === 0) return;
-						cache.files.set(renamedPath, {
-							name: targetName,
-							contents: nextBuffer
-						});
-						cache.changed.add(renamedPath);
-						cache.hasChanges = true;
-						filesChanged.push(renamedPath);
+						const existingFile = cache.files.get(renamedPath);
+						const nextHash = file.hash;
+						if (!existingFile || existingFile.hash !== nextHash || config.template === "custom-app") {
+							cache.files.set(renamedPath, {
+								name: targetName,
+								contents: nextBuffer,
+								hash: file.hash
+							});
+							cache.changed.add(renamedPath);
+							cache.hasChanges = true;
+							filesChanged.push(renamedPath);
+						}
 					});
 					await Promise.all(transformPromises);
+					if (type === "custom-app") {
+						const icon = config.icon;
+						const manifestPath = join(outdir, "manifest.json");
+						const manifest = {
+							name: config.name,
+							subfiles: [],
+							subfiles_extension: ["extension.js"],
+							icon: icon.default,
+							"active-icon": icon.active ?? ""
+						};
+						const manifestString = JSON.stringify(manifest, null, 2);
+						const currentHash = createHash("md5").update(manifestString).digest("hex");
+						if (currentHash !== previousManifestHash) {
+							previousManifestHash = currentHash;
+							const manifestBuffer = Buffer.from(manifestString);
+							cache.files.set(manifestPath, {
+								contents: manifestBuffer,
+								name: "manifest.json",
+								hash: currentHash
+							});
+							cache.changed.add(manifestPath);
+							cache.hasChanges = true;
+							filesChanged.push(manifestPath);
+						}
+					}
 					if (filesChanged.length > 0) server?.broadcast(filesChanged);
 				} catch (e) {
 					logger.error(`Error: ${e instanceof Error ? e.message : String(e)}`);
@@ -836,6 +1105,15 @@ function wrapWithLoader({ name, type, version, cache, outFiles, server, dev = fa
 		}
 	};
 }
+function isExtensionDir(relPath) {
+	return relPath.startsWith("/extension/") || relPath.startsWith("\\extension\\");
+}
+function getBundledCss(files, outdir, type, dev) {
+	const cssFiles = files.filter((f) => f.path.endsWith(".css"));
+	if (!dev && type === "extension") return cssFiles.map((f) => f.text).join("");
+	if (type === "custom-app") return cssFiles.filter((f) => isExtensionDir(f.path.slice(outdir.length))).map((f) => f.text).join("");
+	return "";
+}
 
 //#endregion
 //#region src/esbuild/plugins/index.ts
@@ -861,11 +1139,12 @@ const defaultBuildOptions = {
 	target: ["es2022", "chrome120"]
 };
 const getCommonPlugins = (opts) => {
-	const { template, minify, cache, name, version, buildOptions, outFiles, server, dev } = opts;
+	const { template, minify, cache, buildOptions, outFiles, server, dev } = opts;
+	const inline = !dev && template === "extension";
 	return [
 		...plugins.css({
 			minify,
-			inline: !dev && template === "extension"
+			inline
 		}),
 		plugins.externalGlobal({
 			react: "Spicetify.React",
@@ -875,9 +1154,7 @@ const getCommonPlugins = (opts) => {
 			"react/jsx-runtime": "Spicetify.ReactJSX"
 		}),
 		plugins.wrapWithLoader({
-			name,
-			version,
-			type: template,
+			config: opts,
 			cache,
 			outFiles,
 			server,
@@ -891,11 +1168,35 @@ const getCommonPlugins = (opts) => {
 		plugins.buildLogger({ cache })
 	];
 };
+function getEntryPoints(config) {
+	if (config.template === "theme") return [config.entry.js, config.entry.css];
+	if (config.template === "custom-app") return [config.entry.app, config.entry.extension];
+	return [config.entry];
+}
+function getOutFiles(config, isDev = false) {
+	switch (config.template) {
+		case "custom-app": return {
+			js: "index.js",
+			css: "style.css",
+			jsExtension: "extension.js",
+			manifest: "manifest.json"
+		};
+		case "extension": return {
+			js: `${urlSlugify(getEnName(config.name))}.js`,
+			css: isDev ? "app.css" : void 0
+		};
+		case "theme": return {
+			js: "theme.js",
+			css: "user.css"
+		};
+		default: throw new Error("Unknown template");
+	}
+}
 
 //#endregion
 //#region src/build/index.ts
 const logger = createLogger("build");
-async function build$1(options) {
+async function build$2(options) {
 	logger.clear();
 	logger.greeting(pc.green("Building for production..."));
 	let ctx;
@@ -922,10 +1223,7 @@ async function build$1(options) {
 	});
 }
 function getJSBuildOptions(config, options) {
-	const entryPoints = (() => {
-		if (config.template === "theme") return [config.entry.js, config.entry.css];
-		return [config.entry];
-	})();
+	const entryPoints = getEntryPoints(config);
 	const minify = options.watch ? false : options.minify;
 	const outDir = resolve(config.outDir);
 	const cache = {
@@ -933,14 +1231,13 @@ function getJSBuildOptions(config, options) {
 		changed: /* @__PURE__ */ new Set(),
 		hasChanges: true
 	};
-	const outFiles = {
-		js: config.template === "extension" ? `${urlSlugify(config.name)}.js` : "theme.js",
-		css: config.template === "theme" ? "user.css" : null
-	};
+	const outFiles = getOutFiles(config);
 	const overrides = {
 		...defaultBuildOptions,
 		outdir: outDir,
+		format: "esm",
 		minify,
+		globalName: varSlugify(getEnName(config.name)),
 		sourcemap: false,
 		external: [
 			...config.esbuildOptions?.external ? config.esbuildOptions.external : [],
@@ -949,7 +1246,7 @@ function getJSBuildOptions(config, options) {
 		],
 		define: {
 			[DEV_MODE_VAR_NAME]: "false",
-			[config.devModeVarName]: "false",
+			...config.devModeVarName ? { [config.devModeVarName]: "false" } : {},
 			...config.esbuildOptions.define
 		},
 		plugins: [...config.esbuildOptions?.plugins ? config.esbuildOptions.plugins : [], ...getCommonPlugins({
@@ -973,6 +1270,20 @@ function getJSBuildOptions(config, options) {
 	};
 }
 
+//#endregion
+//#region src/utils/schema.ts
+function safeParse(schema, data, type = "CLI") {
+	const result = v.safeParse(schema, data);
+	if (result.success) return result.output;
+	logger$2.error(`\n${pc.bgRed(pc.black(" ERROR "))} ${pc.red(`Invalid ${type} options:`)}`);
+	result.issues.forEach((issue) => {
+		const path = issue.path?.map((p) => p.key).join(".") || "input";
+		logger$2.error(`${pc.dim(" └─")} ${pc.yellow(path)}: ${pc.white(issue.message)}`);
+	});
+	logger$2.error(`\n${pc.dim("Check your command flags and try again.")}\n`);
+	process.exit(1);
+}
+
 //#endregion
 //#region src/commands/build.ts
 const CLIOptionsSchema$1 = v.strictObject({
@@ -981,8 +1292,8 @@ const CLIOptionsSchema$1 = v.strictObject({
 	apply: v.boolean(),
 	copy: v.boolean()
 });
-const build = new Command("build").description("Build your spicetify project").option("-a, --apply", "Apply to spicetify", false).option("-w, --watch", "Watch mode", false).option("--no-copy", "Do not copy files to spicetify").option("--no-minify", "Disable code minification").action(async (opts) => {
-	await build$1(safeParse(CLIOptionsSchema$1, opts));
+const build$1 = new Command("build").description("Build your spicetify project").option("-a, --apply", "Apply to spicetify", false).option("-w, --watch", "Watch mode", false).option("--no-copy", "Do not copy files to spicetify").option("--no-minify", "Disable code minification").action(async (opts) => {
+	await build$2(safeParse(CLIOptionsSchema$1, opts));
 });
 
 //#endregion
@@ -1040,10 +1351,11 @@ function createPackageJSON(options) {
 		scripts: {
 			sc: "spicetify-creator",
 			dev: "spicetify-creator dev",
-			build: "spicetify-creator build"
+			build: "spicetify-creator build",
+			"update-types": "spicetify-creator update-types"
 		},
 		dependencies: {},
-		devDependencies: { "@spicetify/creator": env.isInternal ? "link:@spicetify/creator" : "latest" }
+		devDependencies: { "@spicetify/creator": "latest" }
 	};
 	if (options.language === "ts") result.peerDependencies = {
 		...result.peerDependencies,
@@ -1085,9 +1397,10 @@ function validateProjectName(name) {
 
 //#endregion
 //#region src/create/template.ts
-const ext = (lang) => lang === "ts" ? "ts" : "js";
+const ext = (lang, jsx = false) => lang === "ts" ? `ts${jsx ? "x" : ""}` : `js${jsx ? "x" : ""}`;
 const kv = ({ name, language, framework, linter, packageManager, template }) => ({
 	"{{project-name}}": name,
+	"{{project-url}}": `/${urlSlugify(name)}`,
 	"{{framework}}": framework,
 	"{{linter}}": linter,
 	"{{package-manager}}": packageManager,
@@ -1104,36 +1417,60 @@ const kv = ({ name, language, framework, linter, packageManager, template }) =>
 const action = { modify(c, opts) {
 	return replace(c, kv(opts));
 } };
-const COMMON_FILES = (opts) => [
-	{
-		from: "README.template.md",
-		to: "README.md",
-		action,
-		isShared: true
-	},
-	{
-		from: ".gitignore",
-		to: ".gitignore",
-		isShared: true
-	},
-	{
-		from: `spice.config.${ext(opts.language)}`,
-		to: `spice.config.${ext(opts.language)}`,
-		action,
-		isShared: true
-	},
-	{
+const SHARED_FILES = (opts) => {
+	const isShared = true;
+	const files = [
+		{
+			from: "README.template.md",
+			to: "README.md",
+			action,
+			isShared
+		},
+		{
+			from: "DOT-gitignore",
+			to: ".gitignore",
+			isShared: true
+		},
+		{
+			from: `spice.config.${ext(opts.language)}`,
+			to: `spice.config.${ext(opts.language)}`,
+			action,
+			isShared
+		}
+	];
+	if (opts.template === "custom-app") {
+		files.push({
+			from: `css/app.module.scss`,
+			to: `src/css/app.module.scss`,
+			action,
+			isShared
+		});
+		files.push({
+			from: `icon.svg`,
+			to: `src/icon.svg`,
+			action,
+			isShared
+		});
+		files.push({
+			from: `icon-active.svg`,
+			to: `src/icon-active.svg`,
+			action,
+			isShared
+		});
+		files.push({
+			from: "app.css",
+			to: "src/extension/app.css",
+			action,
+			isShared
+		});
+	} else files.push({
 		from: "app.css",
 		to: "src/app.css",
 		action,
-		isShared: true
-	},
-	...opts.language === "ts" ? [{
-		from: "css.d.ts",
-		to: "src/types/css.d.ts",
-		isShared: true
-	}] : []
-];
+		isShared
+	});
+	return files;
+};
 const LANGUAGE_FILES = {
 	js: [{
 		from: "jsconfig.json",
@@ -1147,24 +1484,36 @@ const LANGUAGE_FILES = {
 	}]
 };
 const FRAMEWORKS = {
-	react: ({ language }) => [{
-		from: `src/app.${ext(language)}x`,
-		to: `src/app.${ext(language)}x`,
-		action
-	}, {
-		from: `src/components/Onboarding.${ext(language)}x`,
-		to: `src/components/Onboarding.${ext(language)}x`,
-		action
-	}],
-	vanilla: ({ language }) => [{
-		from: `src/app.${ext(language)}`,
-		to: `src/app.${ext(language)}`,
-		action
-	}, {
-		from: `src/components/Onboarding.${ext(language)}`,
-		to: `src/components/Onboarding.${ext(language)}`,
-		action
-	}]
+	react: ({ language, template }) => {
+		const react = [{
+			from: `src/app.${ext(language, true)}`,
+			to: `src/app.${ext(language, true)}`,
+			action
+		}, {
+			from: `src/components/Onboarding.${ext(language, true)}`,
+			to: `src/components/Onboarding.${ext(language, true)}`,
+			action
+		}];
+		if (template === "custom-app") react.push({
+			from: `src/extension/index.${ext(language, true)}`,
+			to: `src/extension/index.${ext(language, true)}`,
+			action
+		});
+		return react;
+	},
+	vanilla: ({ language, template }) => {
+		const vanilla = [{
+			from: `src/app.${ext(language)}`,
+			to: `src/app.${ext(language)}`,
+			action
+		}, {
+			from: `src/components/Onboarding.${ext(language)}`,
+			to: `src/components/Onboarding.${ext(language)}`,
+			action
+		}];
+		if (template === "custom-app") throw new Error("vanilla doesn't exist for custom-app");
+		return vanilla;
+	}
 };
 const LINTERS = {
 	biome: [{
@@ -1177,23 +1526,25 @@ const LINTERS = {
 		to: `eslint.config.${ext(language)}`
 	}],
 	oxlint: [{
-		from: ".oxlintrc.json",
+		from: "DOT-oxlintrc.json",
 		to: ".oxlintrc.json",
 		isShared: true
 	}]
 };
+const getFiles = (options) => {
+	const resolve = (slice) => typeof slice === "function" ? slice(options) : slice ?? [];
+	return [
+		...resolve(SHARED_FILES),
+		...resolve(LANGUAGE_FILES[options.language]),
+		...resolve(FRAMEWORKS[options.framework]),
+		...resolve(LINTERS[options.linter])
+	];
+};
 function setupTemplateFiles(options, targetDir) {
-	const { template, language, framework, linter } = options;
+	const { template, language, framework } = options;
 	const templateRoot = dist(`templates/${template}`, import.meta.url);
 	const fromDir = join(templateRoot, language, framework);
-	const resolve = (slice) => typeof slice === "function" ? slice(options) : slice ?? [];
-	const files = [
-		...resolve(COMMON_FILES),
-		...resolve(LANGUAGE_FILES[language]),
-		...resolve(FRAMEWORKS[framework]),
-		...resolve(LINTERS[linter])
-	];
-	for (const file of files) {
+	for (const file of getFiles(options)) {
 		const src = (() => {
 			if (file.isGlobal) return join(templateRoot, file.from);
 			if (file.isShared) return join(templateRoot, "shared", file.from);
@@ -1291,6 +1642,36 @@ function tryGitInit(root) {
 	}
 }
 
+//#endregion
+//#region src/utils/update-types.ts
+const downloads = { spicetify: {
+	from: "https://raw.githubusercontent.com/spicetify/cli/main/globals.d.ts",
+	to: "./src/types/spicetify.d.ts",
+	action: (content) => content.replace("const React: any;", "const React: typeof import(\"react\");").replace("const ReactDOM: any;", "const ReactDOM: typeof import(\"react-dom/client\");").replace("const ReactDOMServer: any;", "const ReactDOMServer: typeof import(\"react-dom/server\");")
+} };
+async function updateTypes(isUpdating = true, cwd = process.cwd()) {
+	const s = spinner();
+	s.start(`${isUpdating ? "Updating" : "Creating"} Types...`);
+	await Promise.all(Object.entries(downloads).map(([name, download]) => downloadFile(name, download, isUpdating, cwd)));
+	s.stop(`${isUpdating ? "Updated" : "Created"} Types!`);
+}
+async function downloadFile(name, { from, to, action }, isUpdating, cwd) {
+	try {
+		const res = await fetch(from);
+		if (!res.ok) throw new Error(`HTTP Error: ${res.status} ${res.statusText}`);
+		let text = await res.text();
+		if (action) text = await action(text);
+		const fullPath = join$1(cwd, to);
+		await mkdir(dirname$1(fullPath), { recursive: true });
+		await writeFile$1(fullPath, text, "utf8");
+		const actionLog = isUpdating ? "updated" : "created";
+		logger$2.log(`${name}.d.ts ${actionLog} (${from} -> ${fullPath})`);
+	} catch (e) {
+		log.error(`${name} failed`);
+		console.error(e);
+	}
+}
+
 //#endregion
 //#region src/create/index.ts
 const isOnline = await getOnline();
@@ -1337,7 +1718,8 @@ async function createProject(cwd, options) {
 				options: templateOptions
 			});
 		},
-		framework: async () => {
+		framework: async ({ results: { template } }) => {
+			if (template === "custom-app") return "react";
 			if (options.framework) return options.framework;
 			return await p.select({
 				message: "Select which framework you want to chose",
@@ -1407,6 +1789,7 @@ async function create$1(cwd, options) {
 	try {
 		mkdirp(cwd);
 		setupTemplateFiles(options, cwd);
+		await updateTypes(false, cwd);
 		const pkgJSON = createPackageJSON(options);
 		writePackageJSON(pkgJSON, cwd);
 		chdir(cwd);
@@ -1587,7 +1970,12 @@ async function createHmrServer(config, logger = createLogger("hmrServer")) {
 				resolve();
 			});
 		}),
-		stop: () => new Promise((resolve, reject) => {
+		stop: async () => new Promise((resolve, reject) => {
+			if (!isRunning) return resolve();
+			for (const client of clients) client.terminate();
+			clients.clear();
+			wss.close();
+			if ("closeAllConnections" in httpServer) httpServer.closeAllConnections();
 			httpServer.close((err) => {
 				if (err) return reject(err);
 				isRunning = false;
@@ -1617,7 +2005,7 @@ const injectHMRExtension = async (rootLink, wsLink, outFiles) => {
 	const extName = `sc-live-reload-helper.js`;
 	const spiceConfig = await getSpicetifyConfig();
 	const cleanup = () => {
-		if (env.isDev) logger$2.log(`[Spicetify] Removing Live reload extension...`);
+		logger$2.info(`Removing Live reload extension...`);
 		try {
 			runSpice([
 				"config",
@@ -1625,18 +2013,16 @@ const injectHMRExtension = async (rootLink, wsLink, outFiles) => {
 				`${extName}-`
 			]);
 			runSpice(["apply"]);
-			logger$2.debug(pc.green(`${CHECK} Cleanup successful.`));
+			logger$2.info(pc.green(`${CHECK} Cleanup successful.`));
 		} catch (e) {
-			if (env.isDev) logger$2.error(pc.red(`${CROSS} Cleanup failed: `), e);
+			logger$2.error(pc.red(`${CROSS} Cleanup failed: `), e);
 		}
 		process.exit();
 	};
-	if (env.isDev) {
-		process.on("SIGINT", cleanup);
-		process.on("SIGTERM", cleanup);
-	}
+	process.on("SIGINT", cleanup);
+	process.on("SIGTERM", cleanup);
 	try {
-		logger$2.debug(`[Spicetify] Preparing Live reload extension...`);
+		logger$2.debug(`Preparing Live reload extension...`);
 		const destDir = getExtensionDir();
 		mkdirp(destDir);
 		const outDir = resolve(destDir, extName);
@@ -1663,6 +2049,114 @@ const injectHMRExtension = async (rootLink, wsLink, outFiles) => {
 		logger$2.error(pc.red(`${CROSS} Failed to inject HMR helper: ${err instanceof Error ? err.message : String(err)}`));
 	}
 };
+const injectHMRCustomApp = async (rootLink, wsLink, outFiles, config) => {
+	if (config.template !== "custom-app") throw new Error("only supports custom-app templates");
+	const identifier = getEnName(config.name);
+	const spiceConfig = await getSpicetifyConfig();
+	const customAppId = urlSlugify(identifier);
+	runSpice([
+		"config",
+		"extensions",
+		"sc-live-reload-helper.js-"
+	]);
+	const cleanup = () => {
+		logger$2.info(`Removing Live reload custom-app...`);
+		try {
+			runSpice([
+				"config",
+				"custom_apps",
+				`${customAppId}-`
+			]);
+			runSpice(["apply"]);
+			logger$2.info(pc.green(`${CHECK} Cleanup successful.`));
+		} catch (e) {
+			logger$2.error(pc.red(`${CROSS} Cleanup failed: `), e);
+		}
+		process.exit();
+	};
+	process.on("SIGINT", cleanup);
+	process.on("SIGTERM", cleanup);
+	try {
+		logger$2.debug(`Preparing Live reload custom-app...`);
+		const destDir = resolve(getCustomAppsDir(), customAppId);
+		mkdirp(destDir);
+		const indexJsPath = resolve(destDir, "index.js");
+		const extensionJsPath = resolve(destDir, outFiles.jsExtension ?? "extension.js");
+		writeFileSync(indexJsPath, `const React = Spicetify.React;
+const waitForImport = () => {
+  return import("${rootLink}/files/${outFiles.js}")
+    .then((mod) => mod.default || mod.render)
+    .catch((err) => {
+      console.error("Failed to import app:", err);
+      return null;
+    });
+};
+
+const AppWrapper = ({ appPromise }) => {
+  const [App, setApp] = React.useState(null);
+
+  React.useEffect(() => {
+    let mounted = true;
+
+    appPromise.then((app) => {
+      if (mounted && app) {
+        setApp(() => app);
+      }
+    });
+
+    return () => {
+      mounted = false;
+    };
+  }, [appPromise]);
+
+  if (!App) {
+    return React.createElement(
+      "div",
+      { className: "loading" },
+      "Loading app..."
+    );
+  }
+
+  return React.createElement(App);
+};
+
+const render = () => {
+  const appPromise = waitForImport();
+  return React.createElement(AppWrapper, { appPromise });
+};
+`);
+		const { code: extensionCode } = await transform(readFileSync(liveReloadFilePath, "utf8"), {
+			loader: "js",
+			define: {
+				_SERVER_URL: JSON.stringify(rootLink),
+				_HOT_RELOAD_LINK: JSON.stringify(wsLink),
+				_JS_PATH: JSON.stringify(`/files/${outFiles.jsExtension ?? "extension.js"}`),
+				_CSS_PATH: JSON.stringify(outFiles.css ? `/files/${outFiles.css}` : `/files/app.css`)
+			}
+		});
+		writeFileSync(extensionJsPath, extensionCode);
+		const manifestPath = resolve(destDir, "manifest.json");
+		const manifest = {
+			name: config.name,
+			subfiles: [],
+			subfiles_extension: [outFiles.jsExtension ?? "extension.js"],
+			icon: config.icon.default,
+			"active-icon": config.icon.active ?? config.icon.default
+		};
+		writeFileSync(manifestPath, JSON.stringify(manifest, null, 2));
+		if (spiceConfig) {
+			runSpice([
+				"config",
+				"custom_apps",
+				customAppId
+			]);
+			runSpice(["apply"]);
+		}
+		logger$2.debug(pc.green(`${CHECK} Live reload custom-app injected successfully.`));
+	} catch (err) {
+		logger$2.error(pc.red(`${CROSS} Failed to inject HMR custom-app: ${err instanceof Error ? err.message : String(err)}`));
+	}
+};
 
 //#endregion
 //#region src/dev/index.ts
@@ -1673,7 +2167,7 @@ async function dev$1(options) {
 	logger$2.greeting(pc.green("Starting development environment"));
 	let ctx;
 	let server = void 0;
-	loadConfig(async (config, isNewUpdate) => {
+	await loadConfig(async (config, isNewUpdate) => {
 		if (isNewUpdate) {
 			logger$2.clear();
 			logger$2.info(pc.green("Config updated, reloading..."));
@@ -1685,11 +2179,9 @@ async function dev$1(options) {
 				port: options.port ?? config.serverConfig.port
 			});
 			await server.start();
-			const outFiles = {
-				js: config.template === "extension" ? `${urlSlugify(config.name)}.js` : "theme.js",
-				css: config.template === "theme" ? "user.css" : null
-			};
-			await injectHMRExtension(server.link, server.wsLink, outFiles);
+			const outFiles = getOutFiles(config, true);
+			if (config.template === "custom-app") await injectHMRCustomApp(server.link, server.wsLink, outFiles, config);
+			else await injectHMRExtension(server.link, server.wsLink, outFiles);
 			ctx = await context(getJSDevOptions(config, {
 				...options,
 				outFiles,
@@ -1701,21 +2193,14 @@ async function dev$1(options) {
 			logger$2.error("Failed to start dev server: ", err);
 		}
 		return async () => {
-			try {
-				await ctx?.dispose();
-				ctx = void 0;
-				await server?.stop();
-			} finally {
-				process.exit();
-			}
+			await ctx?.dispose();
+			ctx = void 0;
+			await server?.stop();
 		};
 	});
 }
 function getJSDevOptions(config, options) {
-	const entryPoints = (() => {
-		if (config.template === "theme") return [config.entry.js, config.entry.css];
-		return [config.entry];
-	})();
+	const entryPoints = getEntryPoints(config);
 	const minify = false;
 	const cache = {
 		files: /* @__PURE__ */ new Map(),
@@ -1734,7 +2219,7 @@ function getJSDevOptions(config, options) {
 		],
 		define: {
 			[DEV_MODE_VAR_NAME]: "true",
-			[config.devModeVarName]: "true",
+			...config.devModeVarName ? { [config.devModeVarName]: "true" } : {},
 			...config.esbuildOptions.define
 		},
 		plugins: [...config.esbuildOptions?.plugins ? config.esbuildOptions.plugins : [], ...getCommonPlugins({
@@ -1743,7 +2228,9 @@ function getJSDevOptions(config, options) {
 			cache,
 			buildOptions: {
 				copy: true,
-				remove: true,
+				apply: false,
+				applyOnce: false,
+				remove: config.template !== "custom-app",
 				outDir
 			},
 			dev: true,
@@ -1765,12 +2252,17 @@ const dev = new Command("dev").description("Develop your spicetify project").opt
 	await dev$1(safeParse(CLIOptionsSchema, opts));
 });
 
+//#endregion
+//#region src/commands/update-types.ts
+const update_types = new Command("update-types").description("Update Spicetify Types").action(async () => {
+	await updateTypes();
+});
+
 //#endregion
 //#region src/bin.ts
 logger$2.debug(`Env: ${JSON.stringify(env, null, 2)}\n`);
 const command = new Command();
-create.alias("init");
-command.addCommand(create).addCommand(build).addCommand(dev);
+command.version(version).addCommand(create.alias("init")).addCommand(build$1).addCommand(dev).addCommand(update_types);
 command.parse();
 
 //#endregion