## Local Development Setup

- [x] Improve styles and UX of commands and help menus

import * as colors from "./utils/colors.js";

import yoctoSpinner from "./utils/spinner.js";

		console.error(colors.red(`✗ Failed to load ${CONFIG_FILE}:`), error);

	const spinner = yoctoSpinner({ text: `Saving ${CONFIG_FILE}` }).start();

		spinner.success(`Saved ${CONFIG_FILE}`);

		spinner.error(`Failed to save ${CONFIG_FILE}`);

		console.error(error);

	console.log(colors.yellow("∅ Initializing norns project..."));

		console.log(colors.blue(`▸ ${CONFIG_FILE} already exists`));

			console.log(colors.red("✗ Initialization cancelled"));

	console.log(colors.blue("\n▸ Setting up your components configuration...\n"));

		const dirSpinner = yoctoSpinner({

			text: `Creating ${componentsPath} directory`,

		}).start();

		dirSpinner.success(`Created ${componentsPath} directory`);

		colors.green(

			"\n✓ norns project initialized! You can now add components with:",

		),

	console.log(colors.cyan("  npx norns@latest add <component-name>"));

	console.log(

		colors.blue(`\n▸ Components will be installed to: ${componentsPath}`),

	);

		console.error(colors.red("✗ Please specify a component name"));

		console.log(colors.cyan("Usage: npx norns@latest add <component-name>"));

	console.log(colors.blue(`▸ Adding component: ${componentName}`));

		console.log(colors.blue("▸ No norns.json found."));

			console.log(colors.blue("▸ Using default configuration..."));

		console.error(colors.red("✗ Failed to initialize configuration"));

		const dirSpinner = yoctoSpinner({

			text: `Creating ${componentsDir} directory`,

		}).start();

		dirSpinner.success(`Created ${componentsDir} directory`);

			console.error(colors.red(`✗ Component '${componentName}' not found`));

			console.log(colors.blue("Available components:"));

			console.log(colors.cyan("  - connect-wallet"));

			console.log(colors.cyan("  - contract-call"));

		const installSpinner = yoctoSpinner({

			text: `Installing ${componentName} component`,

		}).start();

		installSpinner.success(`Added ${componentName} to ${componentPath}`);

		console.log(colors.blue(`▸ You can now use it in your HTML:`));

		console.log(

			colors.cyan(`   <script src="components/${componentName}.js"></script>`),

		);

		console.log(colors.cyan(`   <${componentName}></${componentName}>`));

		console.error(colors.red(`✗ Failed to add component: ${error}`));

	console.log(

		colors.yellow(`

                                 @

                                @@@@

                                  @@@@    @@@@@@@@@

                                    @@@@  @@@   @@@@@@

                                      @@@@         @@@@

                                    @@  @@@@        @@@@

                                  @@@@    @@@@       @@@

                   @@@@@@@      @@@@        @@@@    @@@

                 @@@@@@@@@@@  @@@@            @@@  @@@@

               @@@@         @@@@                 @@@@

              @@@         @@@@  @              @@@@  @

              @@@       @@@@   @@@@          @@@@   @@@@          @@@

              @@@     @@@@       @@@@      @@@@       @@@@      @@@@

               @@@  @@@@           @@@@  @@@@           @@@@  @@@@

                @@@@                 @@@@                 @@@@

                  @@@@                 @@@@                 @@@@

              @@@@  @@@@           @@@@  @@@@           @@@@  @@@

            @@@@      @@@@       @@@@      @@@@       @@@@     @@@

           @@@          @@@@   @@@@          @@@@   @@@@       @@@

                          @  @@@@              @  @@@@         @@@

                           @@@@                 @@@@         @@@@

                         @@@@  @@@            @@@@  @@@@@@@@@@@

                         @@@    @@@@        @@@@      @@@@@@

                        @@@       @@@@    @@@@

                        @@@@        @@@@  @@

                         @@@@         @@@@

                           @@@@@   @@@  @@@@

                             @@@@@@@@@    @@@@

                                            @@@@

                                              @

`),

	);

	console.log(

		colors.yellow(`\n∅ norns - web components for decentralized applications`),

		colors.cyan("\nhttps://github.com/stevedylandev/norns\n"),

	);

	console.log(colors.bold("Usage:"));

	console.log(

		colors.cyan(

			"  npx norns@latest init                    Initialize a new norns project with norns.json",

		),

	);

	console.log(

		colors.cyan(

			"  npx norns@latest add <component-name>    Add a component to your project",

		),

	);

	console.log(

		colors.cyan(

			"  npx norns@latest --help                  Show this help message\n",

		),

	);

	console.log(colors.bold("Examples:"));

	console.log(colors.green("  npx norns@latest init"));

	console.log(colors.green("  npx norns@latest add connect-wallet\n"));

	console.log(colors.bold("The init command will:"));

	console.log(colors.blue("  - Create a norns.json configuration file"));

	console.log(

		colors.blue("  - Set up your preferred component installation directory"),

	);

	console.log(colors.blue("  - Create necessary directories\n"));

	console.log(colors.bold("Available Components:"));

	console.log(

		colors.cyan("  - connect-wallet    A Web3 wallet connection component"),

	);

	console.log(

		colors.cyan(

			"  - contract-call     A Web3 contract interaction component\n",

		),

	);

	console.log(colors.bold("Configuration:"));

	console.log(

		colors.blue(

			"  The norns.json file controls where components are installed.",

		),

	);

	console.log(

		colors.blue(

			"  You can customize the installation directory during init or edit the file directly.",

		),

	);

				console.error(colors.red(`✗ Unknown command: ${command}`));

import tty from "node:tty";

// eslint-disable-next-line no-warning-comments

// TODO: Use a better method when it's added to Node.js (https://github.com/nodejs/node/pull/40240)

// Lots of optionals here to support Deno.

const hasColors = tty?.WriteStream?.prototype?.hasColors?.() ?? false;

const format = (open, close) => {

	if (!hasColors) {

		return (input) => input;

	}

	const openCode = `\u001B[${open}m`;

	const closeCode = `\u001B[${close}m`;

	return (input) => {

		const string = input + ""; // eslint-disable-line no-implicit-coercion -- This is faster.

		let index = string.indexOf(closeCode);

		if (index === -1) {

			// Note: Intentionally not using string interpolation for performance reasons.

			return openCode + string + closeCode;

		}

		// Handle nested colors.

		// We could have done this, but it's too slow (as of Node.js 22).

		// return openCode + string.replaceAll(closeCode, (close === 22 ? closeCode : '') + openCode) + closeCode;

		let result = openCode;

		let lastIndex = 0;

		// SGR 22 resets both bold (1) and dim (2). When we encounter a nested

		// close for styles that use 22, we need to re-open the outer style.

		const reopenOnNestedClose = close === 22;

		const replaceCode = (reopenOnNestedClose ? closeCode : "") + openCode;

		while (index !== -1) {

			result += string.slice(lastIndex, index) + replaceCode;

			lastIndex = index + closeCode.length;

			index = string.indexOf(closeCode, lastIndex);

		}

		result += string.slice(lastIndex) + closeCode;

		return result;

	};

};

export const reset = format(0, 0);

export const bold = format(1, 22);

export const dim = format(2, 22);

export const italic = format(3, 23);

export const underline = format(4, 24);

export const overline = format(53, 55);

export const inverse = format(7, 27);

export const hidden = format(8, 28);

export const strikethrough = format(9, 29);

export const black = format(30, 39);

export const red = format(31, 39);

export const green = format(32, 39);

export const yellow = format(33, 39);

export const blue = format(34, 39);

export const magenta = format(35, 39);

export const cyan = format(36, 39);

export const white = format(37, 39);

export const gray = format(90, 39);

export const bgBlack = format(40, 49);

export const bgRed = format(41, 49);

export const bgGreen = format(42, 49);

export const bgYellow = format(43, 49);

export const bgBlue = format(44, 49);

export const bgMagenta = format(45, 49);

export const bgCyan = format(46, 49);

export const bgWhite = format(47, 49);

export const bgGray = format(100, 49);

export const redBright = format(91, 39);

export const greenBright = format(92, 39);

export const yellowBright = format(93, 39);

export const blueBright = format(94, 39);

export const magentaBright = format(95, 39);

export const cyanBright = format(96, 39);

export const whiteBright = format(97, 39);

export const bgRedBright = format(101, 49);

export const bgGreenBright = format(102, 49);

export const bgYellowBright = format(103, 49);

export const bgBlueBright = format(104, 49);

export const bgMagentaBright = format(105, 49);

export const bgCyanBright = format(106, 49);

export const bgWhiteBright = format(107, 49);

// https://github.com/sindresorhus/yocto-spinner/blob/main/index.js

import process from "node:process";

import { stripVTControlCharacters } from "node:util";

import * as yoctocolors from "./colors";

const isUnicodeSupported =

	process.platform !== "win32" ||

	Boolean(process.env.WT_SESSION) || // Windows Terminal

	process.env.TERM_PROGRAM === "vscode";

const isInteractive = (stream) =>

	Boolean(

		stream.isTTY && process.env.TERM !== "dumb" && !("CI" in process.env),

	);

const infoSymbol = yoctocolors.blue(isUnicodeSupported ? "ℹ" : "i");

const successSymbol = yoctocolors.green(isUnicodeSupported ? "✔" : "√");

const warningSymbol = yoctocolors.yellow(isUnicodeSupported ? "⚠" : "‼");

const errorSymbol = yoctocolors.red(isUnicodeSupported ? "✖" : "×");

const defaultSpinner = {

	frames: isUnicodeSupported

		? ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]

		: ["-", "\\", "|", "/"],

	interval: 80,

};

class YoctoSpinner {

	#frames;

	#interval;

	#currentFrame = -1;

	#timer;

	#text;

	#stream;

	#color;

	#lines = 0;

	#exitHandlerBound;

	#isInteractive;

	#lastSpinnerFrameTime = 0;

	#isSpinning = false;

	constructor(options = {}) {

		const spinner = options.spinner ?? defaultSpinner;

		this.#frames = spinner.frames;

		this.#interval = spinner.interval;

		this.#text = options.text ?? "";

		this.#stream = options.stream ?? process.stderr;

		this.#color = options.color ?? "cyan";

		this.#isInteractive = isInteractive(this.#stream);

		this.#exitHandlerBound = this.#exitHandler.bind(this);

	}

	start(text) {

		if (text) {

			this.#text = text;

		}

		if (this.isSpinning) {

			return this;

		}

		this.#isSpinning = true;

		this.#hideCursor();

		this.#render();

		this.#subscribeToProcessEvents();

		// Only start the timer in interactive mode

		if (this.#isInteractive) {

			this.#timer = setInterval(() => {

				this.#render();

			}, this.#interval);

		}

		return this;

	}

	stop(finalText) {

		if (!this.isSpinning) {

			return this;

		}

		this.#isSpinning = false;

		if (this.#timer) {

			clearInterval(this.#timer);

			this.#timer = undefined;

		}

		this.#showCursor();

		this.clear();

		this.#unsubscribeFromProcessEvents();

		if (finalText) {

			this.#stream.write(`${finalText}\n`);

		}

		return this;

	}

	#symbolStop(symbol, text) {

		return this.stop(`${symbol} ${text ?? this.#text}`);

	}

	success(text) {

		return this.#symbolStop(successSymbol, text);

	}

	error(text) {

		return this.#symbolStop(errorSymbol, text);

	}

	warning(text) {

		return this.#symbolStop(warningSymbol, text);

	}

	info(text) {

		return this.#symbolStop(infoSymbol, text);

	}

	get isSpinning() {

		return this.#isSpinning;

	}

	get text() {

		return this.#text;

	}

	set text(value) {

		this.#text = value ?? "";

		this.#render();

	}

	get color() {

		return this.#color;

	}

	set color(value) {

		this.#color = value;

		this.#render();

	}

	clear() {

		if (!this.#isInteractive) {

			return this;

		}

		this.#stream.cursorTo(0);

		for (let index = 0; index < this.#lines; index++) {

			if (index > 0) {

				this.#stream.moveCursor(0, -1);

			}

			this.#stream.clearLine(1);

		}

		this.#lines = 0;

		return this;

	}

	#render() {

		// Ensure we only update the spinner frame at the wanted interval,

		// even if the frame method is called more often.

		const now = Date.now();

		if (

			this.#currentFrame === -1 ||

			now - this.#lastSpinnerFrameTime >= this.#interval

		) {

			this.#currentFrame = ++this.#currentFrame % this.#frames.length;

			this.#lastSpinnerFrameTime = now;

		}

		const applyColor = yoctocolors[this.#color] ?? yoctocolors.cyan;

		const frame = this.#frames[this.#currentFrame];

		let string = `${applyColor(frame)} ${this.#text}`;

		if (!this.#isInteractive) {

			string += "\n";

		}

		this.clear();

		this.#write(string);

		if (this.#isInteractive) {

			this.#lines = this.#lineCount(string);

		}

	}

	#write(text) {

		this.#stream.write(text);

	}

	#lineCount(text) {

		const width = this.#stream.columns ?? 80;

		const lines = stripVTControlCharacters(text).split("\n");

		let lineCount = 0;

		for (const line of lines) {

			lineCount += Math.max(1, Math.ceil(line.length / width));

		}

		return lineCount;

	}

	#hideCursor() {

		if (this.#isInteractive) {

			this.#write("\u001B[?25l");

		}

	}

	#showCursor() {

		if (this.#isInteractive) {

			this.#write("\u001B[?25h");

		}

	}

	#subscribeToProcessEvents() {

		process.once("SIGINT", this.#exitHandlerBound);

		process.once("SIGTERM", this.#exitHandlerBound);

	}

	#unsubscribeFromProcessEvents() {

		process.off("SIGINT", this.#exitHandlerBound);

		process.off("SIGTERM", this.#exitHandlerBound);

	}

	#exitHandler(signal) {

		if (this.isSpinning) {

			this.stop();

		}

		// SIGINT: 128 + 2

		// SIGTERM: 128 + 15

		const exitCode = signal === "SIGINT" ? 130 : signal === "SIGTERM" ? 143 : 1;

		process.exit(exitCode);

	}

}

export default function yoctoSpinner(options) {

	return new YoctoSpinner(options);

}