withframe 0.0.1

package/dist/index.mjs

@@ -0,0 +1,1756 @@
+#!/usr/bin/env node
+import chalk from "chalk";
+import { Command } from "commander";
+import { InjectionMode, asClass, asFunction, asValue, createContainer } from "awilix";
+import open from "open";
+import { access, chmod, mkdir, readFile, stat, unlink, writeFile } from "node:fs/promises";
+import path from "node:path";
+import { spawn } from "node:child_process";
+import { input, select } from "@inquirer/prompts";
+import ora from "ora";
+import { readFileSync } from "node:fs";
+import os from "node:os";
+import figlet from "figlet";
+//#region src/constants/index.ts
+const CLI_NAME = "withframe";
+const CLI_VERSION = "1.0.0";
+const REGISTRY_URL = "https://withfra.me";
+const WITHFRAME_DIR = ".withframe";
+const AUTH_FILE_NAME = "auth.json";
+const CONFIG_FILE_NAME = "withframe.config.json";
+const SEPARATOR = "  ───────────────────────────────────────";
+const COLORS = {
+	PRIMARY_50: "#edf8ff",
+	PRIMARY_100: "#d7edff",
+	PRIMARY_200: "#b9e0ff",
+	PRIMARY_300: "#88cfff",
+	PRIMARY_400: "#50b3ff",
+	PRIMARY_500: "#2890ff",
+	PRIMARY_600: "#0469ff",
+	PRIMARY_700: "#0a59eb",
+	PRIMARY_800: "#0f48be",
+	PRIMARY_900: "#134195",
+	PRIMARY_950: "#11295a"
+};
+//#endregion
+//#region src/utils/delay.ts
+const delay = (ms) => new Promise((resolve) => {
+	setTimeout(resolve, ms);
+});
+//#endregion
+//#region src/api/auth-service.ts
+var AuthService = class {
+	constructor(registryClient) {
+		this.registryClient = registryClient;
+	}
+	async login({ openBrowser = true }) {
+		const session = await this.registryClient.startDeviceFlow();
+		if (openBrowser) await open(session.verificationUriComplete).catch(() => {});
+		const deadline = Date.now() + session.expiresIn * 1e3;
+		let intervalSeconds = Math.max(1, session.interval);
+		while (Date.now() < deadline) {
+			await delay(intervalSeconds * 1e3);
+			const poll = await this.registryClient.pollDeviceFlow({ deviceCode: session.deviceCode });
+			if (poll.status === "pending") {
+				intervalSeconds = Math.max(1, poll.interval ?? intervalSeconds);
+				continue;
+			}
+			if (poll.status === "authorized") return {
+				userCode: session.userCode,
+				verificationUri: session.verificationUri,
+				accessToken: poll.accessToken
+			};
+			throw new Error(poll.message);
+		}
+		throw new Error("Device login timed out. Please run `withframe login` again.");
+	}
+};
+//#endregion
+//#region src/lib/normalize.ts
+const normalizeText = (value) => {
+	if (typeof value !== "string") return;
+	return value.trim() || void 0;
+};
+const normalizeProjectTarget = (value) => {
+	const normalized = normalizeText(value);
+	if (!normalized) return;
+	if (normalized === "react_native" || normalized === "expo") return normalized;
+	throw new Error("Invalid target value. Use 'react_native' or 'expo'.");
+};
+const normalizeOptions = (opts) => {
+	return {
+		cwd: normalizeText(opts.cwd),
+		target: normalizeProjectTarget(opts.target),
+		variant: normalizeText(opts.variant) ?? "default",
+		yes: Boolean(opts.yes)
+	};
+};
+//#endregion
+//#region src/lib/type-guards.ts
+const isString = (value) => {
+	return typeof value === "string";
+};
+const isFunction = (value) => {
+	return typeof value === "function";
+};
+//#endregion
+//#region src/lib/project.ts
+const PACKAGE_NAME_ALIASES = { "@react-native-async-storage": "@react-native-async-storage/async-storage" };
+const hasFile = async (filePath) => {
+	try {
+		await access(filePath);
+		return true;
+	} catch {
+		return false;
+	}
+};
+const hasDirectory = async (directoryPath) => {
+	try {
+		return (await stat(directoryPath)).isDirectory();
+	} catch {
+		return false;
+	}
+};
+const readPackageJson = async (projectRoot) => {
+	const packageJsonPath = path.join(projectRoot, "package.json");
+	const raw = await readFile(packageJsonPath, "utf8").catch(() => null);
+	if (!raw) throw new Error(`Could not find package.json in ${projectRoot}`);
+	let data;
+	try {
+		data = JSON.parse(raw);
+	} catch (error) {
+		throw new Error(`Failed to parse package.json: ${error instanceof Error ? error.message : "Invalid JSON"}`);
+	}
+	return {
+		path: packageJsonPath,
+		data
+	};
+};
+const normalizeDependencyVersion = (version) => {
+	const normalized = version.trim();
+	if (!normalized || normalized === "*") return "";
+	return normalized;
+};
+const normalizePackageName = (name) => {
+	const normalized = PACKAGE_NAME_ALIASES[name.trim()] ?? name.trim();
+	if (!/^(?:@[a-z0-9][a-z0-9._-]*\/)?[a-z0-9][a-z0-9._-]*$/.test(normalized)) throw new Error(`Invalid package name in manifest: ${name}`);
+	return normalized;
+};
+const toDependencySpecifier = (name, version) => {
+	const normalizedVersion = normalizeDependencyVersion(version);
+	return normalizedVersion ? `${name}@${normalizedVersion}` : name;
+};
+const collectProjectDependencies = (data) => ({
+	...data.dependencies ?? {},
+	...data.devDependencies ?? {},
+	...data.peerDependencies ?? {}
+});
+const detectTargetFromDependencies = (data) => {
+	const dependencies = collectProjectDependencies(data);
+	if (isString(dependencies.expo)) return "expo";
+	if (isString(dependencies["react-native"])) return "react_native";
+	return null;
+};
+const resolveProjectRoot = (cwdOption) => {
+	return !cwdOption ? process.cwd() : path.resolve(cwdOption);
+};
+const detectProjectTarget = async ({ projectRoot, optionTarget, config }) => {
+	if (optionTarget) return optionTarget;
+	if (config.target === "react_native" || config.target === "expo") return config.target;
+	const { data } = await readPackageJson(projectRoot);
+	const detectedTarget = detectTargetFromDependencies(data);
+	if (!detectedTarget) throw new Error("Could not detect project target. Install 'expo' or 'react-native', or set target in withframe.config.json.");
+	return detectedTarget;
+};
+const shouldInstallManifestDependencies = async (projectRoot) => {
+	if (!await hasFile(path.join(projectRoot, "package.json"))) return false;
+	const { data } = await readPackageJson(projectRoot);
+	return Boolean(detectTargetFromDependencies(data));
+};
+const resolveOutputDirectory = async ({ projectRoot, config }) => {
+	if (config.outputDir) return config.outputDir;
+	if (await hasDirectory(path.join(projectRoot, "app", "components"))) return path.join("app", "components", "withframe");
+	return path.join("src", "components", "withframe");
+};
+const detectPackageManager = async (projectRoot) => {
+	if (await hasFile(path.join(projectRoot, "pnpm-lock.yaml"))) return "pnpm";
+	if (await hasFile(path.join(projectRoot, "yarn.lock"))) return "yarn";
+	if (await hasFile(path.join(projectRoot, "bun.lockb")) || await hasFile(path.join(projectRoot, "bun.lock"))) return "bun";
+	return "npm";
+};
+const isPathInsideRoot = (projectRoot, targetPath) => {
+	const resolvedRoot = path.resolve(projectRoot);
+	const resolvedTarget = path.resolve(targetPath);
+	return resolvedTarget === resolvedRoot || resolvedTarget.startsWith(`${resolvedRoot}${path.sep}`);
+};
+const writeManifestFiles = async ({ projectRoot, outputDir, files, yes, confirmOverwrite }) => {
+	const created = [];
+	const overwritten = [];
+	const skipped = [];
+	for (const file of files) {
+		const relativeFilePath = file.path.replace(/^\/+/, "");
+		const destination = path.resolve(projectRoot, outputDir, relativeFilePath);
+		if (!isPathInsideRoot(projectRoot, destination)) throw new Error(`Refusing to write outside project root: ${file.path}`);
+		const exists = await hasFile(destination);
+		if (exists) {
+			let shouldOverwrite = yes;
+			if (!shouldOverwrite) shouldOverwrite = await confirmOverwrite(destination);
+			if (!shouldOverwrite) {
+				skipped.push(destination);
+				continue;
+			}
+		}
+		await mkdir(path.dirname(destination), { recursive: true });
+		await writeFile(destination, file.content, "utf8");
+		if (exists) overwritten.push(destination);
+		else created.push(destination);
+	}
+	return {
+		created,
+		overwritten,
+		skipped
+	};
+};
+const mergeManifestDependencies = async ({ projectRoot, manifest }) => {
+	const content = (await readPackageJson(projectRoot)).data;
+	content.dependencies = content.dependencies ?? {};
+	content.devDependencies = content.devDependencies ?? {};
+	content.peerDependencies = content.peerDependencies ?? {};
+	const hasAnyDependency = (name) => Boolean(content.dependencies?.[name] ?? content.devDependencies?.[name] ?? content.peerDependencies?.[name]);
+	const runtimeToInstall = [];
+	const devToInstall = [];
+	for (const [rawName, version] of Object.entries(manifest.dependencies ?? {})) {
+		const name = normalizePackageName(rawName);
+		if (hasAnyDependency(name)) continue;
+		runtimeToInstall.push(toDependencySpecifier(name, version));
+	}
+	for (const [rawName, version] of Object.entries(manifest.peerDependencies ?? {})) {
+		const name = normalizePackageName(rawName);
+		if (hasAnyDependency(name)) continue;
+		runtimeToInstall.push(toDependencySpecifier(name, version));
+	}
+	for (const [rawName, version] of Object.entries(manifest.devDependencies ?? {})) {
+		const name = normalizePackageName(rawName);
+		if (hasAnyDependency(name)) continue;
+		devToInstall.push(toDependencySpecifier(name, version));
+	}
+	return {
+		runtimeToInstall,
+		devToInstall
+	};
+};
+const runPackageCommand = async ({ projectRoot, command, args }) => {
+	await new Promise((resolve, reject) => {
+		const child = spawn(command, args, {
+			cwd: projectRoot,
+			stdio: "inherit"
+		});
+		child.on("error", (error) => {
+			reject(error);
+		});
+		child.on("close", (code) => {
+			if (code === 0) {
+				resolve();
+				return;
+			}
+			reject(/* @__PURE__ */ new Error(`${command} ${args.join(" ")} failed with exit code ${code}`));
+		});
+	});
+};
+const installDependencies = async ({ projectRoot, runtimeDependencies, devDependencies }) => {
+	if (!runtimeDependencies.length && !devDependencies.length) return [];
+	const manager = await detectPackageManager(projectRoot);
+	if (runtimeDependencies.length) {
+		if (manager === "npm") await runPackageCommand({
+			projectRoot,
+			command: "npm",
+			args: [
+				"install",
+				"--no-progress",
+				...runtimeDependencies
+			]
+		});
+		if (manager === "pnpm") await runPackageCommand({
+			projectRoot,
+			command: "pnpm",
+			args: ["add", ...runtimeDependencies]
+		});
+		if (manager === "yarn") await runPackageCommand({
+			projectRoot,
+			command: "yarn",
+			args: ["add", ...runtimeDependencies]
+		});
+		if (manager === "bun") await runPackageCommand({
+			projectRoot,
+			command: "bun",
+			args: ["add", ...runtimeDependencies]
+		});
+	}
+	if (devDependencies.length) {
+		if (manager === "npm") await runPackageCommand({
+			projectRoot,
+			command: "npm",
+			args: [
+				"install",
+				"--no-progress",
+				"--save-dev",
+				...devDependencies
+			]
+		});
+		if (manager === "pnpm") await runPackageCommand({
+			projectRoot,
+			command: "pnpm",
+			args: [
+				"add",
+				"--save-dev",
+				...devDependencies
+			]
+		});
+		if (manager === "yarn") await runPackageCommand({
+			projectRoot,
+			command: "yarn",
+			args: [
+				"add",
+				"--dev",
+				...devDependencies
+			]
+		});
+		if (manager === "bun") await runPackageCommand({
+			projectRoot,
+			command: "bun",
+			args: [
+				"add",
+				"--dev",
+				...devDependencies
+			]
+		});
+	}
+	return [...runtimeDependencies, ...devDependencies];
+};
+//#endregion
+//#region src/lib/config.ts
+const getConfigFilePath = (cwd) => path.join(cwd, CONFIG_FILE_NAME);
+const loadWithFrameConfig = async (cwd) => {
+	const configPath = getConfigFilePath(cwd);
+	try {
+		await access(configPath);
+	} catch {
+		return {};
+	}
+	let parsed;
+	try {
+		const raw = await readFile(configPath, "utf8");
+		parsed = JSON.parse(raw);
+	} catch (error) {
+		throw new Error(`Failed to parse ${CONFIG_FILE_NAME}: ${error instanceof Error ? error.message : "Invalid JSON"}`);
+	}
+	if (!parsed || typeof parsed !== "object") throw new Error(`${CONFIG_FILE_NAME} must be a JSON object.`);
+	const safe = parsed;
+	return {
+		outputDir: normalizeText(safe.outputDir),
+		target: normalizeProjectTarget(safe.target)
+	};
+};
+//#endregion
+//#region src/lib/prompt.ts
+const confirm = async (question) => {
+	if (!process.stdin.isTTY || !process.stdout.isTTY) return false;
+	return new Promise((resolve) => {
+		process.stdout.write(question);
+		const handleData = (data) => {
+			const char = data.toString().toLowerCase();
+			if (char === "") process.exit();
+			if (char === "y") {
+				cleanup();
+				resolve(true);
+			} else if (char === "n") {
+				cleanup();
+				resolve(false);
+			}
+		};
+		const cleanup = () => {
+			process.stdin.setRawMode(false);
+			process.stdin.pause();
+			process.stdin.removeListener("data", handleData);
+			process.stdout.write("\n");
+		};
+		process.stdin.setRawMode(true);
+		process.stdin.resume();
+		process.stdin.on("data", handleData);
+	});
+};
+//#endregion
+//#region src/api/component-service.ts
+var ComponentService = class {
+	constructor(tokenStore, registryClient) {
+		this.tokenStore = tokenStore;
+		this.registryClient = registryClient;
+	}
+	async addComponent(componentSlug, opts, hooks = {}) {
+		const slug = normalizeText(componentSlug);
+		if (!slug) throw new Error("Component slug is required.");
+		const options = normalizeOptions(opts);
+		const context = await this.resolveContext(options);
+		const tokenResult = await this.tokenStore.resolveAccessToken();
+		const response = await this.registryClient.fetchComponent({
+			slug,
+			target: context.target,
+			variant: options.variant || "default",
+			token: tokenResult.token
+		});
+		const overwriteDecisions = await this.collectOverwriteDecisions({
+			projectRoot: context.projectRoot,
+			outputDir: context.outputDir,
+			files: response.manifest.files,
+			yes: Boolean(options.yes),
+			hooks
+		});
+		hooks.onApplyStart?.();
+		const installation = await this.applyManifest({
+			context,
+			manifest: response.manifest,
+			yes: Boolean(options.yes),
+			hooks,
+			overwriteDecisions
+		});
+		return {
+			component: response.component,
+			target: context.target,
+			outputDir: context.outputDir,
+			...installation
+		};
+	}
+	async resolveContext(options) {
+		const projectRoot = resolveProjectRoot(options.cwd);
+		const config = await loadWithFrameConfig(projectRoot);
+		return {
+			projectRoot,
+			target: await detectProjectTarget({
+				projectRoot,
+				optionTarget: options.target,
+				config
+			}),
+			outputDir: await resolveOutputDirectory({
+				projectRoot,
+				config
+			})
+		};
+	}
+	async collectOverwriteDecisions({ projectRoot, outputDir, files, yes, hooks }) {
+		const overwriteDecisions = /* @__PURE__ */ new Map();
+		if (yes) return overwriteDecisions;
+		for (const file of files) {
+			const relativeFilePath = file.path.replace(/^\/+/, "");
+			const destination = path.resolve(projectRoot, outputDir, relativeFilePath);
+			if (!await hasFile(destination)) continue;
+			overwriteDecisions.set(destination, await this.confirmOverwrite({
+				projectRoot,
+				absolutePath: destination,
+				hooks
+			}));
+		}
+		return overwriteDecisions;
+	}
+	async applyManifest({ context, manifest, yes, hooks, overwriteDecisions }) {
+		const fileResult = await writeManifestFiles({
+			projectRoot: context.projectRoot,
+			outputDir: context.outputDir,
+			files: manifest.files,
+			yes,
+			confirmOverwrite: async (absolutePath) => {
+				const existingDecision = overwriteDecisions.get(absolutePath);
+				if (typeof existingDecision === "boolean") return existingDecision;
+				return this.confirmOverwrite({
+					projectRoot: context.projectRoot,
+					absolutePath,
+					hooks
+				});
+			}
+		});
+		let installedDependencies = [];
+		if (await shouldInstallManifestDependencies(context.projectRoot)) {
+			const dependencies = await mergeManifestDependencies({
+				projectRoot: context.projectRoot,
+				manifest
+			});
+			installedDependencies = await installDependencies({
+				projectRoot: context.projectRoot,
+				runtimeDependencies: dependencies.runtimeToInstall,
+				devDependencies: dependencies.devToInstall
+			});
+		}
+		return {
+			createdFiles: fileResult.created,
+			overwrittenFiles: fileResult.overwritten,
+			skippedFiles: fileResult.skipped,
+			installedDependencies
+		};
+	}
+	async confirmOverwrite({ projectRoot, absolutePath, hooks }) {
+		const relativePath = path.relative(projectRoot, absolutePath);
+		if (hooks.confirmOverwrite) return hooks.confirmOverwrite(relativePath);
+		return confirm(`File ${relativePath} exists. Overwrite? [y/N] `);
+	}
+};
+//#endregion
+//#region src/api/init-service.ts
+const detectTargetIfPossible = async (projectRoot, preferredTarget) => {
+	if (preferredTarget) return preferredTarget;
+	try {
+		return await detectProjectTarget({
+			projectRoot,
+			optionTarget: void 0,
+			config: {}
+		});
+	} catch {
+		return;
+	}
+};
+var InitService = class {
+	async createConfig(options, hooks = {}) {
+		const projectRoot = resolveProjectRoot(options.cwd);
+		const configPath = getConfigFilePath(projectRoot);
+		const alreadyExists = await hasFile(configPath);
+		if (alreadyExists && !options.force) throw new Error(`${CONFIG_FILE_NAME} already exists at ${configPath}. Use --force to overwrite.`);
+		const target = await detectTargetIfPossible(projectRoot, await this.resolveTarget(options.target));
+		const config = {
+			outputDir: options.outputDir ?? await resolveOutputDirectory({
+				projectRoot,
+				config: {}
+			}),
+			...target ? { target } : {}
+		};
+		hooks.onInitializeStart?.();
+		await writeFile(configPath, `${JSON.stringify(config, null, 2)}\n`, "utf8");
+		return {
+			configPath,
+			config,
+			overwritten: alreadyExists
+		};
+	}
+	async resolveTarget(optionTarget) {
+		const normalizedOption = normalizeProjectTarget(optionTarget);
+		if (normalizedOption) return normalizedOption;
+		if (!process.stdin.isTTY || !process.stdout.isTTY) throw new Error("Interactive target selection requires a TTY. Pass --target react_native|expo.");
+		return select({
+			message: "Pick your project target:",
+			default: "expo",
+			choices: [{
+				name: "Expo",
+				value: "expo",
+				description: "Use for Expo-based React Native apps"
+			}, {
+				name: "React Native",
+				value: "react_native",
+				description: "Use for plain React Native projects"
+			}]
+		});
+	}
+};
+//#endregion
+//#region src/lib/env.ts
+const ENV = { WITHFRAME_TOKEN: "WITHFRAME_TOKEN" };
+const PROJECT_ENV_FILES = [
+	".env.local",
+	".env",
+	".env.development"
+];
+const getEnvVariableName = (key) => ENV[key];
+const formatEnvString = (value) => {
+	if (typeof value !== "string") return;
+	return value.trim() || void 0;
+};
+const unquote = (value) => {
+	if (value.startsWith("\"") && value.endsWith("\"") || value.startsWith("'") && value.endsWith("'")) return value.slice(1, -1);
+	return value;
+};
+const getValueFromProjectEnvFiles = (envName) => {
+	const cwd = process.cwd();
+	for (const fileName of PROJECT_ENV_FILES) {
+		const filePath = path.join(cwd, fileName);
+		let content;
+		try {
+			content = readFileSync(filePath, "utf8");
+		} catch {
+			continue;
+		}
+		for (const rawLine of content.split(/\r?\n/g)) {
+			const line = rawLine.trim();
+			if (!line || line.startsWith("#")) continue;
+			const withoutExport = line.startsWith("export ") ? line.slice(7).trim() : line;
+			const separatorIndex = withoutExport.indexOf("=");
+			if (separatorIndex <= 0) continue;
+			if (withoutExport.slice(0, separatorIndex).trim() !== envName) continue;
+			const value = formatEnvString(unquote(withoutExport.slice(separatorIndex + 1).trim()));
+			if (value) return value;
+		}
+	}
+};
+const getEnvValue = (key) => {
+	const envName = getEnvVariableName(key);
+	const direct = formatEnvString(process.env[envName]);
+	if (direct) return direct;
+	return getValueFromProjectEnvFiles(envName);
+};
+const getRequiredEnvValue = (key) => {
+	const value = getEnvValue(key);
+	if (value) return value;
+	const envName = getEnvVariableName(key);
+	throw new Error(`Missing required environment variable: ${envName}.`);
+};
+//#endregion
+//#region src/core/base-command.ts
+var BaseCommand = class {
+	requiredEnvVariables() {
+		return [];
+	}
+	configure(command) {
+		return command;
+	}
+	async runTask(task, options) {
+		const spinner = ora(options.spinner);
+		let started = false;
+		const start = () => {
+			if (!started) {
+				spinner.start();
+				started = true;
+			}
+			return spinner;
+		};
+		if (options.startMode !== "manual") start();
+		try {
+			const result = await task({
+				spinner,
+				start,
+				isStarted: () => started
+			});
+			const successText = isFunction(options.successText) ? options.successText(result) : options.successText;
+			if (started) spinner.succeed(successText);
+			else console.log(successText);
+			return result;
+		} catch (error) {
+			if (started) spinner.fail(options.failureText);
+			throw error;
+		}
+	}
+	register(program) {
+		this.configure(program.command(this.name).description(this.description)).action(async (...args) => {
+			try {
+				this.requiredEnvVariables().forEach((key) => getRequiredEnvValue(key));
+				await this.execute(...args);
+			} catch (error) {
+				const message = error instanceof Error ? error.message : "Unknown error";
+				console.error(chalk.red(`\n${message}\n`));
+				process.exitCode = 1;
+			}
+		});
+	}
+};
+//#endregion
+//#region src/utils/output.ts
+const printList = ({ title, items, titleColor, prefix }) => {
+	if (!items.length) return;
+	console.log(titleColor(`\n  ${title}:`));
+	items.forEach((item) => {
+		console.log(chalk.white(`  ${prefix} ${item}`));
+	});
+};
+const printQuickStart = () => {
+	console.log(chalk.dim(SEPARATOR));
+	console.log(chalk.cyan("\n  🎯 Quick Start:\n"));
+	console.log(chalk.white("  $ withframe init       ") + chalk.gray("→ Create local config"));
+	console.log(chalk.white("  $ withframe login      ") + chalk.gray("→ Authenticate"));
+	console.log(chalk.white("  $ withframe add button ") + chalk.gray("→ Add component code\n"));
+	console.log(chalk.white("  $ withframe logout     ") + chalk.gray("→ Clear local token\n"));
+};
+const printAddResult = (result) => {
+	console.log("");
+	console.log(chalk.gray(`  Target: ${result.target}`));
+	console.log(chalk.gray(`  Output dir: ${result.outputDir}`));
+	printList({
+		title: "Created files",
+		items: result.createdFiles,
+		titleColor: chalk.cyan,
+		prefix: "+"
+	});
+	printList({
+		title: "Overwritten files",
+		items: result.overwrittenFiles,
+		titleColor: chalk.yellow,
+		prefix: "~"
+	});
+	printList({
+		title: "Skipped files",
+		items: result.skippedFiles,
+		titleColor: chalk.yellow,
+		prefix: "-"
+	});
+	printList({
+		title: "Installed dependencies",
+		items: result.installedDependencies,
+		titleColor: chalk.cyan,
+		prefix: "•"
+	});
+	console.log("");
+};
+//#endregion
+//#region src/commands/add.ts
+var AddCommand = class extends BaseCommand {
+	constructor(componentService) {
+		super();
+		this.componentService = componentService;
+		this.name = "add <component>";
+		this.description = chalk.magenta("Add a component from WithFrame registry");
+	}
+	requiredEnvVariables() {
+		return ["WITHFRAME_TOKEN"];
+	}
+	configure(command) {
+		return command.alias("install").option("-v, --variant <variant>", "Install specific variant id", "default").option("-t, --target <target>", "Project target: react_native or expo").option("--cwd <path>", "Project root directory").option("-y, --yes", "Overwrite files without confirmation");
+	}
+	async execute(comp, opts) {
+		const displayComponent = comp.trim() || "component";
+		printAddResult(await this.runTask(async ({ start }) => {
+			return this.componentService.addComponent(comp, opts, {
+				onApplyStart: () => {
+					start();
+				},
+				confirmOverwrite: async (relativePath) => {
+					return confirm(`File ${relativePath} exists. Overwrite? [y/N] `);
+				}
+			});
+		}, {
+			spinner: {
+				text: `📦 Adding ${chalk.bold(displayComponent)}...`,
+				spinner: "dots",
+				color: "cyan"
+			},
+			successText: (value) => chalk.green.bold(`${value.component.slug} added successfully`),
+			failureText: chalk.red.bold("Failed to add component"),
+			startMode: "manual"
+		}));
+	}
+};
+//#endregion
+//#region src/commands/init.ts
+var InitCommand = class extends BaseCommand {
+	constructor(initService) {
+		super();
+		this.initService = initService;
+		this.name = "init";
+		this.description = chalk.blue("Create withframe.config.json in your project");
+	}
+	configure(command) {
+		return command.option("--cwd <path>", "Project root directory").option("-o, --output-dir <path>", "Set output directory in config").option("-t, --target <target>", "Set target: react_native or expo").option("-f, --force", "Overwrite existing withframe.config.json");
+	}
+	async execute(options) {
+		const cwd = normalizeText(options.cwd);
+		const outputDir = normalizeText(options.outputDir);
+		const result = await this.runTask(async ({ start }) => {
+			return this.initService.createConfig({
+				cwd,
+				outputDir,
+				target: options.target,
+				force: Boolean(options.force)
+			}, { onInitializeStart: () => {
+				start();
+			} });
+		}, {
+			spinner: {
+				text: chalk.cyan("Initializing withframe.config.json..."),
+				spinner: "dots",
+				color: "cyan"
+			},
+			successText: (value) => value.overwritten ? chalk.green.bold("withframe.config.json updated") : chalk.green.bold("withframe.config.json created"),
+			failureText: chalk.red.bold("Failed to initialize config"),
+			startMode: "manual"
+		});
+		console.log("");
+		console.log(chalk.gray(`  Path: ${result.configPath}`));
+		console.log(chalk.gray(`  Output dir: ${result.config.outputDir ?? "not set"}`));
+		console.log(chalk.gray(`  Target: ${result.config.target ?? "auto-detect on add"}`));
+		console.log("");
+	}
+};
+//#endregion
+//#region src/commands/login.ts
+var LoginCommand = class extends BaseCommand {
+	constructor(authService) {
+		super();
+		this.authService = authService;
+		this.name = "login";
+		this.description = chalk.green("Authenticate and output WITHFRAME_TOKEN export command");
+	}
+	configure(command) {
+		return command.option("--no-open", "Do not open browser automatically").option("--cwd <path>", "Resolve config from directory");
+	}
+	async execute(options) {
+		await loadWithFrameConfig(options.cwd?.trim() || process.cwd());
+		const authResult = await this.runTask(async ({ spinner }) => {
+			spinner.text = chalk.cyan("Waiting for browser approval...");
+			return this.authService.login({ openBrowser: options.open });
+		}, {
+			spinner: {
+				text: chalk.cyan("🔐 Starting device login..."),
+				spinner: "dots",
+				color: "cyan"
+			},
+			successText: chalk.green.bold("Logged in successfully"),
+			failureText: chalk.red.bold("Login failed")
+		});
+		console.log("");
+		console.log(chalk.cyan("  Use this token in one of two ways:"));
+		console.log(chalk.cyan("  export in your shell"));
+		console.log(chalk.white(`  export WITHFRAME_TOKEN="${authResult.accessToken}"`));
+		console.log(chalk.gray("  ─────────────── OR ───────────────"));
+		console.log(chalk.cyan("  save in your project .env or .env.local"));
+		console.log(chalk.white(`  WITHFRAME_TOKEN="${authResult.accessToken}"`));
+		console.log("");
+	}
+};
+//#endregion
+//#region src/commands/logout.ts
+var LogoutCommand = class extends BaseCommand {
+	constructor(tokenStore) {
+		super();
+		this.tokenStore = tokenStore;
+		this.name = "logout";
+		this.description = chalk.red("Clear local WithFrame auth token");
+	}
+	async execute() {
+		const authFilePath = await this.runTask(async () => {
+			await this.tokenStore.clearToken();
+			return this.tokenStore.getAuthFilePath();
+		}, {
+			spinner: {
+				text: chalk.cyan("Clearing local session..."),
+				spinner: "dots",
+				color: "yellow"
+			},
+			successText: chalk.yellow.bold("Logged out successfully"),
+			failureText: chalk.red.bold("Failed to clear local session")
+		});
+		console.log(chalk.dim(`\n  Token cache cleared: ${authFilePath}\n`));
+	}
+};
+//#endregion
+//#region src/commands/shot.ts
+var ShotCommand = class extends BaseCommand {
+	constructor(shotService) {
+		super();
+		this.shotService = shotService;
+		this.name = "shot";
+		this.description = chalk.cyan("Upload a screenshot and attach it to a collection");
+	}
+	requiredEnvVariables() {
+		return ["WITHFRAME_TOKEN"];
+	}
+	configure(command) {
+		return command.requiredOption("--file <path>", "Screenshot file path").option("--device <id>", "Preferred device id when dimensions match multiple models");
+	}
+	async execute(opts) {
+		const result = await this.runTask(async ({ start }) => {
+			return this.shotService.uploadShot(opts, { onUploadStart: () => {
+				start();
+			} });
+		}, {
+			spinner: {
+				text: "Uploading screenshot ...",
+				spinner: "dots",
+				color: "cyan"
+			},
+			successText: () => chalk.green.bold("Screenshot uploaded successfully"),
+			failureText: chalk.red.bold("Failed to upload screenshot"),
+			startMode: "manual"
+		});
+		console.log(result.url);
+	}
+};
+//#endregion
+//#region src/commands/upload.ts
+var UploadCommand = class extends BaseCommand {
+	constructor(uploadService) {
+		super();
+		this.uploadService = uploadService;
+		this.name = "upload";
+		this.description = chalk.yellow("Upload a component to WithFrame registry");
+	}
+	requiredEnvVariables() {
+		return ["WITHFRAME_TOKEN"];
+	}
+	configure(command) {
+		return command.option("--path <path>", "Component entry file path").option("--no-open", "Do not open browser automatically");
+	}
+	async execute(opts) {
+		const result = await this.runTask(async () => {
+			return this.uploadService.upload(opts);
+		}, {
+			spinner: {
+				text: `📦 Uploading ...`,
+				spinner: "dots",
+				color: "cyan"
+			},
+			successText: () => chalk.green.bold(`Component uploaded successfully`),
+			failureText: chalk.red.bold("Failed to upload component"),
+			startMode: "manual"
+		});
+		if (opts.open !== false) await open(result.editUrl).catch(() => {});
+		console.log("");
+		console.log(chalk.gray(`  Draft: ${result.componentId}`));
+		console.log(chalk.gray(`  Target: ${result.target}`));
+		console.log(chalk.gray(`  Edit URL: ${result.editUrl}`));
+		console.log("");
+	}
+};
+//#endregion
+//#region src/core/cli-app.ts
+var CliApp = class {
+	constructor(program, commandRegistry) {
+		this.program = program;
+		this.commandRegistry = commandRegistry;
+	}
+	run(argv) {
+		this.commandRegistry.registerAll(this.program);
+		this.program.parse(argv);
+		if (!argv.slice(2).length) {
+			this.program.outputHelp();
+			printQuickStart();
+		}
+	}
+};
+//#endregion
+//#region src/core/command-registry.ts
+var CommandRegistry = class {
+	constructor(commands) {
+		this.commands = commands;
+	}
+	registerAll(program) {
+		this.commands.forEach((command) => {
+			command.register(program);
+		});
+	}
+};
+//#endregion
+//#region src/lib/token-store.ts
+var TokenStore = class {
+	constructor() {
+		this.authDirectoryPath = path.join(os.homedir(), WITHFRAME_DIR);
+		this.authFilePath = path.join(this.authDirectoryPath, AUTH_FILE_NAME);
+	}
+	getAuthFilePath() {
+		return this.authFilePath;
+	}
+	async resolveAccessToken() {
+		return {
+			token: getEnvValue("WITHFRAME_TOKEN"),
+			source: "env"
+		};
+	}
+	async saveToken(accessToken, expiresInSeconds) {
+		const now = /* @__PURE__ */ new Date();
+		const expiresAt = new Date(now.getTime() + Math.max(0, expiresInSeconds) * 1e3);
+		const payload = {
+			accessToken,
+			createdAt: now.toISOString(),
+			expiresAt: expiresAt.toISOString()
+		};
+		await mkdir(this.authDirectoryPath, {
+			recursive: true,
+			mode: 448
+		});
+		await writeFile(this.authFilePath, `${JSON.stringify(payload, null, 2)}\n`, {
+			mode: 384,
+			encoding: "utf8"
+		});
+		await chmod(this.authFilePath, 384).catch(() => void 0);
+	}
+	async clearToken() {
+		await unlink(this.authFilePath).catch(() => void 0);
+	}
+};
+//#endregion
+//#region src/lib/errors.ts
+var CliHttpError = class extends Error {
+	constructor(message, statusCode, payload) {
+		super(message);
+		this.statusCode = statusCode;
+		this.payload = payload;
+		this.name = "CliHttpError";
+	}
+};
+//#endregion
+//#region src/lib/http.ts
+const parseResponsePayload = async (response) => {
+	const text = await response.text();
+	if (!text) return {};
+	try {
+		return JSON.parse(text);
+	} catch {
+		return text;
+	}
+};
+const resolveErrorMessage = (payload, fallback) => {
+	if (!payload || typeof payload !== "object") return fallback;
+	const message = payload.message;
+	return isString(message) && message.trim() ? message : fallback;
+};
+const requestJson = async (url, init) => {
+	const response = await fetch(url, {
+		...init,
+		headers: {
+			Accept: "application/json",
+			...init?.headers ?? {}
+		}
+	});
+	const payload = await parseResponsePayload(response);
+	if (!response.ok) throw new CliHttpError(resolveErrorMessage(payload, `Request failed with status ${response.status}`), response.status, payload);
+	return payload;
+};
+//#endregion
+//#region src/api/registry-client.ts
+const sanitizeBaseUrl = (baseUrl) => baseUrl.replace(/\/+$/, "");
+const CALLBACK_URL_TYPE = {
+	DEV: "DEV",
+	STAGE: "STAGE",
+	PROD: "PROD"
+};
+const isLocalHost = (hostname) => {
+	return hostname === "localhost" || hostname === "127.0.0.1" || hostname === "0.0.0.0";
+};
+const parseUrl = (value) => {
+	try {
+		return new URL(value);
+	} catch {
+		try {
+			return new URL(`http://${value}`);
+		} catch {
+			return null;
+		}
+	}
+};
+const formatCallback = (url) => {
+	const parsed = parseUrl(url.trim());
+	if (!parsed) return CALLBACK_URL_TYPE.PROD;
+	const hostname = parsed.hostname.toLowerCase();
+	if (hostname === "stage.withfra.me") return CALLBACK_URL_TYPE.STAGE;
+	if (hostname === "withfra.me") return CALLBACK_URL_TYPE.PROD;
+	if (isLocalHost(hostname)) return CALLBACK_URL_TYPE.DEV;
+	return CALLBACK_URL_TYPE.PROD;
+};
+var RegistryClient = class {
+	getRegistryBaseUrl() {
+		return REGISTRY_URL;
+	}
+	getCallbackUrlType() {
+		return formatCallback(this.getRegistryBaseUrl());
+	}
+	toUrl(endpoint) {
+		return `${sanitizeBaseUrl(this.getRegistryBaseUrl())}${endpoint}`;
+	}
+	startDeviceFlow({ clientName = "withframe-cli" } = {}) {
+		return requestJson(this.toUrl("/api/cli/device/start"), {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ clientName })
+		});
+	}
+	pollDeviceFlow({ deviceCode }) {
+		return requestJson(this.toUrl("/api/cli/device/poll"), {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ deviceCode })
+		});
+	}
+	fetchComponent({ slug, target, variant, token }) {
+		const params = new URLSearchParams({
+			target,
+			variant
+		});
+		return requestJson(this.toUrl(`/api/cli/registry/components/${encodeURIComponent(slug)}?${params.toString()}`), {
+			method: "GET",
+			headers: { Authorization: `Bearer ${token}` }
+		});
+	}
+	uploadComponent({ content, fileName, token }) {
+		const callback = this.getCallbackUrlType();
+		return requestJson(this.toUrl("/api/cli/registry/components/upload"), {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+				Authorization: `Bearer ${token}`
+			},
+			body: JSON.stringify({
+				content,
+				fileName,
+				callback
+			})
+		});
+	}
+	fetchShotCollections({ token, offset = 0, limit = 40 }) {
+		const params = new URLSearchParams({
+			offset: String(offset),
+			limit: String(limit)
+		});
+		return requestJson(this.toUrl(`/api/cli/shots/collections?${params.toString()}`), {
+			method: "GET",
+			headers: { Authorization: `Bearer ${token}` }
+		});
+	}
+	uploadShot({ token, fileName, mimeType, content, collectionId, collectionTitle, createNewCollection, color }) {
+		const callback = this.getCallbackUrlType();
+		const formData = new FormData();
+		const fileContent = Uint8Array.from(content);
+		formData.append("file", new Blob([fileContent], { type: mimeType }), fileName);
+		formData.append("callback", callback);
+		if (collectionId) formData.append("collectionId", collectionId);
+		if (collectionTitle) formData.append("collectionTitle", collectionTitle);
+		if (createNewCollection) formData.append("createNewCollection", "true");
+		if (color) formData.append("color", color);
+		return requestJson(this.toUrl("/api/cli/shots/upload"), {
+			method: "POST",
+			headers: { Authorization: `Bearer ${token}` },
+			body: formData
+		});
+	}
+};
+//#endregion
+//#region src/api/upload-service.ts
+var UploadService = class {
+	constructor(tokenStore, registryClient) {
+		this.tokenStore = tokenStore;
+		this.registryClient = registryClient;
+	}
+	async upload(opts) {
+		const compPath = await this.resolveComponentPath(opts.path);
+		const tokenResult = await this.tokenStore.resolveAccessToken();
+		try {
+			await access(compPath);
+			const content = await readFile(compPath, "utf-8");
+			const fileName = path.basename(compPath);
+			return this.registryClient.uploadComponent({
+				content,
+				fileName,
+				token: tokenResult.token
+			});
+		} catch {
+			throw new Error("File read error. Please check the file path and permissions.");
+		}
+	}
+	async resolveComponentPath(compPath) {
+		const cleanedPath = normalizeText(compPath);
+		if (!cleanedPath) throw new Error("Component path is required.");
+		const absolutePath = path.resolve(process.cwd(), cleanedPath);
+		if (!await hasFile(absolutePath)) throw new Error(`File not found at path: ${absolutePath}`);
+		return absolutePath;
+	}
+};
+//#endregion
+//#region src/lib/shot-devices.ts
+const supportedDevices = [
+	{
+		id: "iphone.8",
+		name: "iPhone 8",
+		physical: {
+			width: 750,
+			height: 1334
+		},
+		colors: [
+			{
+				id: "silver",
+				name: "Silver",
+				hex: "#E4E4E2",
+				fileSize: 346
+			},
+			{
+				id: "space_gray",
+				name: "Space Gray",
+				hex: "#25282A",
+				fileSize: 335
+			},
+			{
+				id: "gold",
+				name: "Gold",
+				hex: "#F5DDC5",
+				fileSize: 430
+			}
+		]
+	},
+	{
+		id: "iphone.8.plus",
+		name: "iPhone 8 Plus",
+		physical: {
+			width: 1080,
+			height: 1920
+		},
+		colors: [
+			{
+				id: "silver",
+				name: "Silver",
+				hex: "#E4E4E2",
+				fileSize: 466
+			},
+			{
+				id: "space_gray",
+				name: "Space Gray",
+				hex: "#25282A",
+				fileSize: 397
+			},
+			{
+				id: "gold",
+				name: "Gold",
+				hex: "#F5DDC5",
+				fileSize: 458
+			}
+		]
+	},
+	{
+		id: "iphone.13",
+		name: "iPhone 13",
+		physical: {
+			width: 1170,
+			height: 2532
+		},
+		colors: [
+			{
+				id: "red",
+				name: "Red",
+				hex: "#A50011",
+				fileSize: 81
+			},
+			{
+				id: "starlight",
+				name: "Starlight",
+				hex: "#F9F3EE",
+				fileSize: 80
+			},
+			{
+				id: "midnight",
+				name: "Midnight",
+				hex: "#171E27",
+				fileSize: 69
+			},
+			{
+				id: "blue",
+				name: "Blue",
+				hex: "#215E7C",
+				fileSize: 84
+			},
+			{
+				id: "pink",
+				name: "Pink",
+				hex: "#FAE0D8",
+				fileSize: 80
+			},
+			{
+				id: "green",
+				name: "Green",
+				hex: "#364935",
+				unavailable: true,
+				fileSize: 0
+			}
+		]
+	},
+	{
+		id: "iphone.13.mini",
+		name: "iPhone 13 Mini",
+		physical: {
+			width: 1080,
+			height: 2340
+		},
+		colors: [
+			{
+				id: "red",
+				name: "Red",
+				hex: "#A50011",
+				fileSize: 197
+			},
+			{
+				id: "starlight",
+				name: "Starlight",
+				hex: "#F9F3EE",
+				fileSize: 194
+			},
+			{
+				id: "midnight",
+				name: "Midnight",
+				hex: "#171E27",
+				fileSize: 173
+			},
+			{
+				id: "blue",
+				name: "Blue",
+				hex: "#215E7C",
+				fileSize: 203
+			},
+			{
+				id: "pink",
+				name: "Pink",
+				hex: "#FAE0D8",
+				fileSize: 194
+			},
+			{
+				id: "green",
+				name: "Green",
+				hex: "#364935",
+				unavailable: true,
+				fileSize: 0
+			}
+		]
+	},
+	{
+		id: "iphone.13.pro.max",
+		name: "iPhone 13 Pro Max",
+		physical: {
+			width: 1284,
+			height: 2778
+		},
+		colors: [
+			{
+				id: "sierra_blue",
+				name: "Sierra Blue",
+				hex: "#9BB5CE",
+				fileSize: 423
+			},
+			{
+				id: "graphite",
+				name: "Graphite",
+				hex: "#5C5B57",
+				fileSize: 321
+			},
+			{
+				id: "gold",
+				name: "Gold",
+				hex: "#F9E5C9",
+				fileSize: 435
+			},
+			{
+				id: "silver",
+				name: "Silver",
+				hex: "#F5F5F0",
+				fileSize: 435
+			},
+			{
+				id: "alpine_green",
+				name: "Alpine Green",
+				hex: "#505F4E",
+				unavailable: true,
+				fileSize: 0
+			}
+		]
+	},
+	{
+		id: "iphone.14.pro",
+		name: "iPhone 14 Pro",
+		physical: {
+			width: 1179,
+			height: 2556
+		},
+		colors: [
+			{
+				id: "space_black",
+				name: "Space Black",
+				hex: "#4b4845",
+				fileSize: 177
+			},
+			{
+				id: "silver",
+				name: "Silver",
+				hex: "#e2e4e1",
+				fileSize: 177
+			},
+			{
+				id: "gold",
+				name: "Gold",
+				hex: "#d4c9b1",
+				fileSize: 177
+			},
+			{
+				id: "deep_purple",
+				name: "Deep Purple",
+				hex: "#5e5566",
+				fileSize: 202
+			}
+		]
+	},
+	{
+		id: "iphone.14.pro.max",
+		name: "iPhone 14 Pro Max",
+		physical: {
+			width: 1290,
+			height: 2796
+		},
+		colors: [
+			{
+				id: "space_black",
+				name: "Space Black",
+				hex: "#4b4845",
+				fileSize: 177
+			},
+			{
+				id: "silver",
+				name: "Silver",
+				hex: "#e2e4e1",
+				fileSize: 177
+			},
+			{
+				id: "gold",
+				name: "Gold",
+				hex: "#d4c9b1",
+				fileSize: 177
+			},
+			{
+				id: "deep_purple",
+				name: "Deep Purple",
+				hex: "#5e5566",
+				fileSize: 202
+			}
+		]
+	},
+	{
+		id: "iphone.15.pro",
+		name: "iPhone 15 Pro",
+		physical: {
+			width: 1179,
+			height: 2556
+		},
+		colors: [
+			{
+				id: "black",
+				name: "Black Titanium",
+				hex: "#1b1b1b",
+				fileSize: 177
+			},
+			{
+				id: "white",
+				name: "White Titanium",
+				hex: "#dddddd",
+				fileSize: 177
+			},
+			{
+				id: "natural",
+				name: "Natural Titanium",
+				hex: "#837F7D",
+				fileSize: 177
+			},
+			{
+				id: "blue",
+				name: "Blue Titanium",
+				hex: "#2F4452",
+				fileSize: 202
+			}
+		]
+	},
+	{
+		id: "iphone.15.pro.max",
+		name: "iPhone 15 Pro Max",
+		physical: {
+			width: 1290,
+			height: 2796
+		},
+		colors: [
+			{
+				id: "black",
+				name: "Black Titanium",
+				hex: "#1b1b1b",
+				fileSize: 177
+			},
+			{
+				id: "white",
+				name: "White Titanium",
+				hex: "#dddddd",
+				fileSize: 177
+			},
+			{
+				id: "natural",
+				name: "Natural Titanium",
+				hex: "#837F7D",
+				fileSize: 177
+			},
+			{
+				id: "blue",
+				name: "Blue Titanium",
+				hex: "#2F4452",
+				fileSize: 202
+			}
+		]
+	},
+	{
+		id: "iphone.16.pro",
+		name: "iPhone 16 Pro",
+		physical: {
+			width: 1206,
+			height: 2622
+		},
+		colors: [
+			{
+				id: "black",
+				name: "Black Titanium",
+				hex: "#3C3C3D",
+				fileSize: 177
+			},
+			{
+				id: "white",
+				name: "White Titanium",
+				hex: "#F2F1ED",
+				fileSize: 177
+			},
+			{
+				id: "natural",
+				name: "Natural Titanium",
+				hex: "#C2BCB2",
+				fileSize: 177
+			},
+			{
+				id: "desert",
+				name: "Desert Titanium",
+				hex: "#BFA48F",
+				fileSize: 202
+			}
+		]
+	},
+	{
+		id: "iphone.16.plus",
+		name: "iPhone 16 Plus",
+		physical: {
+			width: 1290,
+			height: 2796
+		},
+		colors: [
+			{
+				id: "black",
+				name: "Black",
+				hex: "#3C4042",
+				fileSize: 177
+			},
+			{
+				id: "white",
+				name: "White",
+				hex: "#FAFAFA",
+				fileSize: 177
+			},
+			{
+				id: "teal",
+				name: "Teal",
+				hex: "#B0D4D2",
+				fileSize: 177
+			},
+			{
+				id: "ultramarine",
+				name: "Ultramarine",
+				hex: "#9AADF6",
+				fileSize: 202
+			},
+			{
+				id: "pink",
+				name: "Pink",
+				hex: "#F2ADDA",
+				fileSize: 202
+			}
+		]
+	},
+	{
+		id: "iphone.16.pro.max",
+		name: "iPhone 16 Pro Max",
+		physical: {
+			width: 1320,
+			height: 2868
+		},
+		colors: [
+			{
+				id: "black",
+				name: "Black Titanium",
+				hex: "#3C3C3D",
+				fileSize: 177
+			},
+			{
+				id: "white",
+				name: "White Titanium",
+				hex: "#F2F1ED",
+				fileSize: 177
+			},
+			{
+				id: "natural",
+				name: "Natural Titanium",
+				hex: "#C2BCB2",
+				fileSize: 177
+			},
+			{
+				id: "desert",
+				name: "Desert Titanium",
+				hex: "#BFA48F",
+				fileSize: 202
+			}
+		]
+	}
+];
+const detectDevice = (bounds, deviceId) => {
+	const found = supportedDevices.filter((device) => device.physical.width === bounds.width && device.physical.height === bounds.height);
+	if (found.length === 1) return found[0];
+	if (found.length > 1) return found.find((device) => device.id === deviceId) ?? found[0];
+	throw new Error(`We could not detect the device for your screenshot dimensions (${bounds.width}x${bounds.height}). Supported devices: ${supportedDevices.map((device) => `"${device.id}"`).join(", ")}.`);
+};
+//#endregion
+//#region src/api/shot-service.ts
+const CREATE_NEW_COLLECTION = "__create_new_collection__";
+const SUPPORTED_SHOT_MIME_TYPES = {
+	".png": "image/png",
+	".jpg": "image/jpg",
+	".jpeg": "image/jpeg"
+};
+var ShotService = class {
+	constructor(tokenStore, registryClient) {
+		this.tokenStore = tokenStore;
+		this.registryClient = registryClient;
+	}
+	async uploadShot(opts, hooks = {}) {
+		const filePath = await this.resolveFilePath(opts.file);
+		const mimeType = this.resolveMimeType(filePath);
+		const tokenResult = await this.tokenStore.resolveAccessToken();
+		const content = await this.readFileContent(filePath);
+		const { Jimp } = await import("jimp");
+		const device = detectDevice((await Jimp.read(content)).bitmap, opts.device);
+		const selectedColor = await this.selectDeviceColor(device);
+		const collections = await this.registryClient.fetchShotCollections({
+			token: tokenResult.token,
+			offset: 0,
+			limit: 40
+		});
+		const selectedCollection = await this.selectCollection(collections.items);
+		hooks.onUploadStart?.();
+		return this.registryClient.uploadShot({
+			token: tokenResult.token,
+			fileName: path.basename(filePath),
+			mimeType,
+			content,
+			collectionId: selectedCollection.collectionId || void 0,
+			collectionTitle: selectedCollection.collectionTitle || void 0,
+			createNewCollection: selectedCollection.createNewCollection,
+			color: selectedColor
+		});
+	}
+	async selectDeviceColor(device) {
+		if (!process.stdin.isTTY || !process.stdout.isTTY) throw new Error("Interactive color selection requires a TTY.");
+		const availableColors = device.colors.filter((color) => !color.unavailable);
+		const fallbackColors = device.colors;
+		const colorChoices = availableColors.length > 0 ? availableColors : fallbackColors;
+		if (!colorChoices.length) throw new Error(`No frame colors available for device "${device.id}".`);
+		if (colorChoices.length === 1) return colorChoices[0].id;
+		return select({
+			message: `Select device color for ${device.name}:`,
+			default: colorChoices[0].id,
+			choices: colorChoices.map((color) => ({
+				name: `${color.name} (${color.id})`,
+				value: color.id,
+				description: color.hex
+			}))
+		});
+	}
+	async resolveFilePath(filePath) {
+		const normalizedPath = normalizeText(filePath);
+		if (!normalizedPath) throw new Error("Screenshot file path is required.");
+		const absolutePath = path.resolve(process.cwd(), normalizedPath);
+		if (!await hasFile(absolutePath)) throw new Error(`File not found at path: ${absolutePath}`);
+		return absolutePath;
+	}
+	async readFileContent(filePath) {
+		try {
+			await access(filePath);
+			return await readFile(filePath);
+		} catch {
+			throw new Error("File read error. Please check the file path and permissions.");
+		}
+	}
+	resolveMimeType(filePath) {
+		const mimeType = SUPPORTED_SHOT_MIME_TYPES[path.extname(filePath).toLowerCase()];
+		if (!mimeType) throw new Error("Unsupported screenshot file type. Supported formats: .png, .jpg, .jpeg");
+		return mimeType;
+	}
+	async selectCollection(items) {
+		if (!process.stdin.isTTY || !process.stdout.isTTY) throw new Error("Interactive collection selection requires a TTY.");
+		const selected = await select({
+			message: "Select collection for screenshot upload:",
+			default: CREATE_NEW_COLLECTION,
+			choices: [{
+				name: "Create new collection",
+				value: CREATE_NEW_COLLECTION,
+				description: "Upload into a new screenshot collection"
+			}, ...items.map((item) => ({
+				name: `${item.title} (${item.collectionId.slice(0, 8)}...)`,
+				value: item.collectionId,
+				description: `${item.screenshotsCount} screenshot(s)`
+			}))]
+		});
+		if (selected !== CREATE_NEW_COLLECTION) return { collectionId: selected };
+		return {
+			collectionId: null,
+			createNewCollection: true,
+			collectionTitle: normalizeText(await input({
+				message: "Collection title (optional, leave empty for auto-name):",
+				default: ""
+			})) || void 0
+		};
+	}
+};
+//#endregion
+//#region src/container.ts
+const createAppContainer = (program) => {
+	const container = createContainer({ injectionMode: InjectionMode.CLASSIC });
+	container.register({
+		program: asValue(program),
+		tokenStore: asClass(TokenStore).singleton(),
+		registryClient: asClass(RegistryClient).singleton(),
+		authService: asClass(AuthService).singleton(),
+		initService: asClass(InitService).singleton(),
+		componentService: asClass(ComponentService).singleton(),
+		uploadService: asClass(UploadService).singleton(),
+		shotService: asClass(ShotService).singleton(),
+		initCommand: asClass(InitCommand).singleton(),
+		loginCommand: asClass(LoginCommand).singleton(),
+		logoutCommand: asClass(LogoutCommand).singleton(),
+		uploadCommand: asClass(UploadCommand).singleton(),
+		shotCommand: asClass(ShotCommand).singleton(),
+		addCommand: asClass(AddCommand).singleton(),
+		commandRegistry: asFunction((initCommand, loginCommand, logoutCommand, addCommand, uploadCommand, shotCommand) => new CommandRegistry([
+			initCommand,
+			loginCommand,
+			logoutCommand,
+			addCommand,
+			uploadCommand,
+			shotCommand
+		])).singleton(),
+		cliApp: asClass(CliApp).singleton()
+	});
+	return container;
+};
+//#endregion
+//#region src/setup.ts
+const createApp = () => {
+	const program = new Command();
+	program.version(CLI_VERSION).name(CLI_NAME).usage(chalk.yellow("<command> [options]")).description(chalk.hex(COLORS.PRIMARY_300)("🚀 Add unlocked WithFrame components into your project")).helpOption("-h, --help", chalk.gray("Display help information")).addHelpText("before", chalk.cyan("\n✨ WithFrame CLI - Your Component Assistant\n")).addHelpText("after", chalk.dim("\n📖 Example:\n  $ export WITHFRAME_TOKEN=\"<token>\"\n  $ withframe add button\n"));
+	const container = createAppContainer(program);
+	program.on("command:*", () => {
+		console.error(chalk.red("\n❌ Invalid command: %s\n"), chalk.bold(program.args.join(" ")));
+		console.log(chalk.yellow("See --help for a list of available commands.\n"));
+		process.exit(1);
+	});
+	return container.resolve("cliApp");
+};
+//#endregion
+//#region src/utils/banner.ts
+const showBanner = () => {
+	const banner = figlet.textSync("Withframe", {
+		font: "Standard",
+		horizontalLayout: "default",
+		verticalLayout: "default",
+		width: 80,
+		whitespaceBreak: true
+	});
+	const coloredBanner = chalk.hex(COLORS.PRIMARY_600)(banner);
+	console.log(coloredBanner);
+};
+//#endregion
+//#region src/index.ts
+if (process.argv.length === 2) showBanner();
+createApp().run(process.argv);
+//#endregion
+export {};