lapikit 0.6.7 → 0.6.9

package/bin/helpers.js

@@ -1,4 +1,5 @@
 import readline from 'node:readline/promises';
+import { emitKeypressEvents, moveCursor, cursorTo, clearLine } from 'node:readline';
 
 const color = {
 	red: (text) => `\x1b[31m${text}\x1b[0m`,
@@ -61,7 +62,16 @@ export const terminal = (type = 'info', msg) => {
 };
 
 export function createRL() {
-	return readline.createInterface({ input: process.stdin, output: process.stdout });
+	const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+
+	rl.on('SIGINT', () => {
+		if (process.stdin.isTTY) process.stdin.setRawMode(false);
+		console.log('\n');
+		terminal('warn', 'installation canceled.');
+		process.exit(0);
+	});
+
+	return rl;
 }
 
 export async function toggle(rl, message, initial = true) {
@@ -87,7 +97,7 @@ export async function text(rl, message, initial = '', validate) {
 	}
 }
 
-export async function select(rl, message, choices) {
+async function selectFallback(rl, message, choices) {
 	console.log(`\n${message}`);
 	choices.forEach((c, i) => console.log(`  ${i + 1}. ${c.title}`));
 
@@ -98,3 +108,144 @@ export async function select(rl, message, choices) {
 		terminal('warn', `Please enter a number between 1 and ${choices.length}`);
 	}
 }
+
+async function multiselectFallback(rl, message, choices) {
+	console.log(`\n${message}`);
+	choices.forEach((c, i) => console.log(`  ${i + 1}. ${c.title}`));
+	console.log(`  (enter numbers separated by commas, e.g. 1,2 - leave empty for none)`);
+
+	while (true) {
+		const answer = (await rl.question(`Choice: `)).trim();
+		if (answer === '') return [];
+
+		const indexes = answer.split(',').map((part) => parseInt(part.trim(), 10) - 1);
+		const valid = indexes.every((index) => index >= 0 && index < choices.length);
+		if (valid) return [...new Set(indexes)].map((index) => choices[index].value);
+
+		terminal('warn', `Please enter numbers between 1 and ${choices.length}, separated by commas`);
+	}
+}
+
+async function interactiveList(rl, message, hint, choices, renderLine, onKey) {
+	console.log(`\n${message}`);
+	console.log(ansi.color.cyan(`  (${hint})`));
+	choices.forEach((_, i) => console.log(renderLine(i)));
+
+	const { stdin } = process;
+	rl.pause();
+	const wasRaw = stdin.isRaw;
+	emitKeypressEvents(stdin, rl);
+	stdin.setRawMode(true);
+	stdin.resume();
+
+	return new Promise((resolve) => {
+		const redrawLine = (index) => {
+			const rowsUp = choices.length - index;
+			moveCursor(process.stdout, 0, -rowsUp);
+			cursorTo(process.stdout, 0);
+			clearLine(process.stdout, 1);
+			process.stdout.write(renderLine(index));
+			moveCursor(process.stdout, 0, rowsUp);
+			cursorTo(process.stdout, 0);
+		};
+
+		const cleanup = () => {
+			stdin.removeListener('keypress', onKeypress);
+			stdin.setRawMode(wasRaw);
+			rl.resume();
+		};
+
+		const onKeypress = (str, key) => {
+			if (key.ctrl && key.name === 'c') {
+				cleanup();
+				process.stdout.write('\n');
+				terminal('warn', 'installation canceled.');
+				process.exit(130);
+			}
+			onKey(key, redrawLine, (value) => {
+				cleanup();
+				console.log('');
+				resolve(value);
+			});
+		};
+
+		stdin.on('keypress', onKeypress);
+	});
+}
+
+export async function select(rl, message, choices) {
+	const { stdin } = process;
+	if (!stdin.isTTY || typeof stdin.setRawMode !== 'function') {
+		return selectFallback(rl, message, choices);
+	}
+
+	let cursor = 0;
+	const renderLine = (index) => {
+		const radio = index === cursor ? ansi.color.green('(●)') : '( )';
+		const pointer = index === cursor ? ansi.color.cyan('❯') : ' ';
+		return `${pointer} ${radio} ${choices[index].title}`;
+	};
+
+	return interactiveList(
+		rl,
+		message,
+		'↑/↓ move, enter to confirm',
+		choices,
+		renderLine,
+		(key, redrawLine, resolve) => {
+			const previousCursor = cursor;
+			if (key.name === 'up') {
+				cursor = (cursor - 1 + choices.length) % choices.length;
+				redrawLine(previousCursor);
+				redrawLine(cursor);
+			} else if (key.name === 'down') {
+				cursor = (cursor + 1) % choices.length;
+				redrawLine(previousCursor);
+				redrawLine(cursor);
+			} else if (key.name === 'return') {
+				resolve(choices[cursor].value);
+			}
+		}
+	);
+}
+
+export async function multiselect(rl, message, choices) {
+	const { stdin } = process;
+	if (!stdin.isTTY || typeof stdin.setRawMode !== 'function') {
+		return multiselectFallback(rl, message, choices);
+	}
+
+	const selected = new Set();
+	let cursor = 0;
+	const renderLine = (index) => {
+		const checked = selected.has(index) ? ansi.color.green('[x]') : '[ ]';
+		const pointer = index === cursor ? ansi.color.cyan('❯') : ' ';
+		return `${pointer} ${checked} ${choices[index].title}`;
+	};
+
+	return interactiveList(
+		rl,
+		message,
+		'↑/↓ move, space to select, enter to confirm',
+		choices,
+		renderLine,
+		(key, redrawLine, resolve) => {
+			const previousCursor = cursor;
+			if (key.name === 'up') {
+				cursor = (cursor - 1 + choices.length) % choices.length;
+				redrawLine(previousCursor);
+				redrawLine(cursor);
+			} else if (key.name === 'down') {
+				cursor = (cursor + 1) % choices.length;
+				redrawLine(previousCursor);
+				redrawLine(cursor);
+			} else if (key.name === 'space') {
+				if (selected.has(cursor)) selected.delete(cursor);
+				else selected.add(cursor);
+				redrawLine(cursor);
+			} else if (key.name === 'return') {
+				resolve([...selected].sort((a, b) => a - b).map((index) => choices[index].value));
+			}
+		}
+	);
+}

package/bin/hooks.js

@@ -1,10 +1,157 @@
 #!/usr/bin/env node
 import { promises as fs } from 'node:fs';
 import path from 'node:path';
+import { spawn } from 'node:child_process';
 import { terminal } from './helpers.js';
 
+const INSTALL_ARGS = {
+	npm: ['install', '--save-dev'],
+	yarn: ['add', '-D'],
+	pnpm: ['add', '--save-dev'],
+	bun: ['add', '-D']
+};
+
+export function installDependency(pkgManager, packageName, cwd) {
+	const args = INSTALL_ARGS[pkgManager];
+	if (!args) throw new Error(`Unsupported package manager: ${pkgManager}`);
+	return new Promise((resolve, reject) => {
+		const child = spawn(pkgManager, [...args, packageName], {
+			cwd,
+			stdio: 'inherit',
+			shell: process.platform === 'win32'
+		});
+		child.on('error', reject);
+		child.on('close', (code) =>
+			code === 0 ? resolve() : reject(new Error(`${pkgManager} exited with code ${code}`))
+		);
+	});
+}
+
+function findMatchingDelimiter(content, openIndex, openChar, closeChar) {
+	let depth = 0;
+	for (let i = openIndex; i < content.length; i++) {
+		const ch = content[i];
+		if (ch === '"' || ch === "'" || ch === '`') {
+			i = skipString(content, i);
+			continue;
+		}
+		if (ch === openChar) depth++;
+		else if (ch === closeChar) {
+			depth--;
+			if (depth === 0) return i;
+		}
+	}
+	return -1;
+}
+
+function skipString(source, start) {
+	const quote = source[start];
+	for (let i = start + 1; i < source.length; i++) {
+		if (source[i] === '\\') {
+			i++;
+			continue;
+		}
+		if (source[i] === quote) return i;
+	}
+	return source.length - 1;
+}
+
+function insertImportLine(content, importLine) {
+	const lines = content.split('\n');
+	let importInsertIndex = 0;
+	for (let i = 0; i < lines.length; i++) {
+		if (lines[i].trim().startsWith('import ')) importInsertIndex = i + 1;
+	}
+	lines.splice(importInsertIndex, 0, importLine);
+	return lines.join('\n');
+}
+
+function buildPreprocessCall(pluginKeys = []) {
+	if (!pluginKeys.length) return `lapikitPreprocess()`;
+	const plugins = pluginKeys.map((key) => `'${key}'`).join(', ');
+	return `lapikitPreprocess({ plugins: [${plugins}] })`;
+}
+
+function mergeExistingPreprocessCall(content, pluginKeys) {
+	if (!pluginKeys.length) return null;
+
+	const callMatch = content.match(/lapikitPreprocess\s*\(\s*(\{[\s\S]*?\})?\s*\)/);
+	if (!callMatch) return null;
+
+	const [fullMatch, optionsSource] = callMatch;
+	const pluginsMatch = optionsSource?.match(/plugins\s*:\s*\[([^\]]*)\]/);
+	const existingKeys = pluginsMatch
+		? [...pluginsMatch[1].matchAll(/'([^']+)'|"([^"]+)"/g)].map((m) => m[1] ?? m[2])
+		: [];
+
+	const merged = [...new Set([...existingKeys, ...pluginKeys])];
+	if (merged.length === existingKeys.length) return null;
+
+	const newCall = buildPreprocessCall(merged);
+	return (
+		content.slice(0, callMatch.index) + newCall + content.slice(callMatch.index + fullMatch.length)
+	);
+}
+
+function findValueEnd(source, start) {
+	let depth = 0;
+	for (let i = start; i < source.length; i++) {
+		const ch = source[i];
+		if (ch === '"' || ch === "'" || ch === '`') {
+			i = skipString(source, i);
+			continue;
+		}
+		if (ch === '(' || ch === '[' || ch === '{') depth++;
+		else if (ch === ')' || ch === ']' || ch === '}') {
+			if (depth === 0) return i;
+			depth--;
+		} else if (ch === ',' && depth === 0) return i;
+	}
+	return source.length;
+}
+
+function injectPreprocessEntry(objectSource, pluginKeys = []) {
+	const call = buildPreprocessCall(pluginKeys);
+
+	const keyMatch = objectSource.match(/preprocess\s*:\s*/);
+	if (!keyMatch) {
+		return objectSource.replace('{', `{\n\t\t\tpreprocess: [${call}],`);
+	}
+	const valueStart = keyMatch.index + keyMatch[0].length;
+
+	if (objectSource[valueStart] === '[') {
+		const openBracketIndex = valueStart;
+		const closeBracketIndex = findMatchingDelimiter(objectSource, openBracketIndex, '[', ']');
+		const inner = objectSource.slice(openBracketIndex + 1, closeBracketIndex);
+		const trimmed = inner.trim();
+
+		let newInner;
+		if (!trimmed) {
+			newInner = call;
+		} else if (inner.includes('\n')) {
+			const firstItemMatch = inner.match(/\n(\s*)\S/);
+			const indent = firstItemMatch ? firstItemMatch[1] : '\t\t';
+			const closingMatch = inner.match(/\n(\s*)$/);
+			const closingIndent = closingMatch ? closingMatch[1] : '\t';
+			const innerTrimmed = inner.trimEnd();
+			const sep = innerTrimmed.endsWith(',') ? '' : ',';
+			newInner = `${innerTrimmed}${sep}\n${indent}${call}\n${closingIndent}`;
+		} else {
+			const sep = trimmed.endsWith(',') ? ' ' : ', ';
+			newInner = `${trimmed}${sep}${call}`;
+		}
+		return (
+			objectSource.slice(0, openBracketIndex + 1) + newInner + objectSource.slice(closeBracketIndex)
+		);
+	}
+
+	const valueEnd = findValueEnd(objectSource, valueStart);
+	const expr = objectSource.slice(valueStart, valueEnd).trim();
+	return objectSource.slice(0, valueStart) + `[${expr}, ${call}]` + objectSource.slice(valueEnd);
+}
+
 export async function findSvelteConfigFile(projectPath) {
-	for (const ext of ['js', 'ts']) {
+	for (const ext of ['js', 'mjs', 'cjs', 'ts']) {
 		const file = path.join(projectPath, `svelte.config.${ext}`);
 		try {
 			await fs.access(file);
@@ -13,56 +160,159 @@ export async function findSvelteConfigFile(projectPath) {
 			// lapikit other step
 		}
 	}
-	throw new Error('No svelte.config.js or svelte.config.ts file found');
+	throw new Error('No svelte.config file found');
 }
 
-export async function addLiliPreprocess(svelteConfigFile) {
+export async function addLiliPreprocess(svelteConfigFile, pluginKeys = []) {
 	let content = await fs.readFile(svelteConfigFile, 'utf-8');
-	const lapikitImport = `import { lapikitPreprocess } from 'lapikit/labs/preprocess';`;
+	const lapikitImport = `import { lapikitPreprocess } from 'lapikit/preprocess';`;
 
-	if (content.includes(`from 'lapikit/labs/preprocess'`)) {
-		terminal('info', `lapikitPreprocess already imported in ${svelteConfigFile}`);
+	if (content.includes(`from 'lapikit/preprocess'`)) {
+		const updated = mergeExistingPreprocessCall(content, pluginKeys);
+		if (!updated) {
+			terminal('warn', `lapikitPreprocess already imported in ${svelteConfigFile}`);
+			return;
+		}
+		await fs.writeFile(svelteConfigFile, updated);
+		terminal('success', `lapikitPreprocess plugins updated in ${svelteConfigFile}`);
 		return;
 	}
 
-	const lines = content.split('\n');
-	let importInsertIndex = 0;
-	for (let i = 0; i < lines.length; i++) {
-		if (lines[i].trim().startsWith('import ')) importInsertIndex = i + 1;
+	const match = content.match(/(?:const\s+\w+\s*=\s*|export\s+default\s*)(\{)/);
+	if (!match) {
+		throw new Error(`Could not find the exported config object in ${svelteConfigFile}`);
 	}
-	lines.splice(importInsertIndex, 0, lapikitImport);
-	content = lines.join('\n');
 
-	if (!content.match(/preprocess\s*:/)) {
-		content = content.replace(
-			/(const\s+\w+\s*=\s*\{|export\s+default\s*\{)/,
-			(m) => `${m}\n\tpreprocess: [lapikitPreprocess()],`
-		);
-	} else if (content.match(/preprocess\s*:\s*\[/)) {
-		content = content.replace(/preprocess\s*:\s*\[([\s\S]*?)\]/, (_, inner) => {
-			const trimmed = inner.trim();
-			if (!trimmed) return `preprocess: [lapikitPreprocess()]`;
-
-			if (inner.includes('\n')) {
-				const firstItemMatch = inner.match(/\n(\s*)\S/);
-				const indent = firstItemMatch ? firstItemMatch[1] : '\t\t';
-				const closingMatch = inner.match(/\n(\s*)$/);
-				const closingIndent = closingMatch ? closingMatch[1] : '\t';
-				const innerTrimmed = inner.trimEnd();
-				const sep = innerTrimmed.endsWith(',') ? '' : ',';
-				return `preprocess: [${innerTrimmed}${sep}\n${indent}lapikitPreprocess()\n${closingIndent}]`;
-			} else {
-				const sep = trimmed.endsWith(',') ? ' ' : ', ';
-				return `preprocess: [${trimmed}${sep}lapikitPreprocess()]`;
-			}
-		});
-	} else {
-		content = content.replace(
-			/preprocess\s*:\s*([^,\n\]{}]+)/,
-			(_, val) => `preprocess: [${val.trim()}, lapikitPreprocess()]`
-		);
+	const openBraceIndex = match.index + match[0].length - 1;
+	const closeBraceIndex = findMatchingDelimiter(content, openBraceIndex, '{', '}');
+	if (closeBraceIndex === -1) {
+		throw new Error(`Could not parse the config object in ${svelteConfigFile}`);
 	}
 
+	const objectSource = content.slice(openBraceIndex, closeBraceIndex + 1);
+	const updatedObject = injectPreprocessEntry(objectSource, pluginKeys);
+	content = content.slice(0, openBraceIndex) + updatedObject + content.slice(closeBraceIndex + 1);
+	content = insertImportLine(content, lapikitImport);
+
 	await fs.writeFile(svelteConfigFile, content);
 	terminal('success', `lapikitPreprocess added to ${svelteConfigFile}`);
 }
+
+export async function findViteConfigFile(projectPath) {
+	for (const ext of ['ts', 'js', 'mjs', 'cjs']) {
+		const file = path.join(projectPath, `vite.config.${ext}`);
+		try {
+			await fs.access(file);
+			return file;
+		} catch {
+			// lapikit other step
+		}
+	}
+	return null;
+}
+
+function findSveltekitPluginCall(content) {
+	const match = content.match(/sveltekit\s*\(\s*\{/);
+	if (!match) return null;
+
+	const openBraceIndex = match.index + match[0].length - 1;
+	const closeBraceIndex = findMatchingDelimiter(content, openBraceIndex, '{', '}');
+	if (closeBraceIndex === -1) return null;
+
+	return { openBraceIndex, closeBraceIndex };
+}
+
+export async function addLiliPreprocessToViteConfig(viteConfigFile, pluginKeys = []) {
+	let content = await fs.readFile(viteConfigFile, 'utf-8');
+	const lapikitImport = `import { lapikitPreprocess } from 'lapikit/preprocess';`;
+
+	if (content.includes(`from 'lapikit/preprocess'`)) {
+		const updated = mergeExistingPreprocessCall(content, pluginKeys);
+		if (!updated) {
+			terminal('warn', `lapikitPreprocess already imported in ${viteConfigFile}`);
+			return;
+		}
+		await fs.writeFile(viteConfigFile, updated);
+		terminal('success', `lapikitPreprocess plugins updated in ${viteConfigFile}`);
+		return;
+	}
+
+	const pluginCall = findSveltekitPluginCall(content);
+	if (!pluginCall) {
+		throw new Error(`Could not find a sveltekit({ ... }) plugin call in ${viteConfigFile}`);
+	}
+
+	const { openBraceIndex, closeBraceIndex } = pluginCall;
+	const objectSource = content.slice(openBraceIndex, closeBraceIndex + 1);
+	const updatedObject = injectPreprocessEntry(objectSource, pluginKeys);
+	content = content.slice(0, openBraceIndex) + updatedObject + content.slice(closeBraceIndex + 1);
+	content = insertImportLine(content, lapikitImport);
+
+	await fs.writeFile(viteConfigFile, content);
+	terminal('success', `lapikitPreprocess added to ${viteConfigFile}`);
+}
+
+// Since SvelteKit 2.62, Svelte/preprocess config can be passed directly to the
+// sveltekit() vite plugin instead of svelte.config.js — when it is, svelte.config.js
+// is ignored, so the vite.config plugin call takes priority when both exist.
+export async function resolveSveltePreprocessTarget(projectPath) {
+	const viteConfigFile = await findViteConfigFile(projectPath);
+	if (viteConfigFile) {
+		const content = await fs.readFile(viteConfigFile, 'utf-8');
+		if (findSveltekitPluginCall(content)) {
+			return { file: viteConfigFile, add: addLiliPreprocessToViteConfig };
+		}
+	}
+
+	try {
+		const svelteConfigFile = await findSvelteConfigFile(projectPath);
+		return { file: svelteConfigFile, add: addLiliPreprocess };
+	} catch {
+		throw new Error(
+			'No svelte.config file found, and no sveltekit({ ... }) plugin config found in vite.config.(js|ts) ' +
+				"Add lapikitPreprocess() manually: import { lapikitPreprocess } from 'lapikit/preprocess'; " +
+				'then add it to your preprocess array.'
+		);
+	}
+}
+
+export async function findEslintConfigFile(projectPath) {
+	for (const ext of ['js', 'mjs', 'cjs', 'ts']) {
+		const file = path.join(projectPath, `eslint.config.${ext}`);
+		try {
+			await fs.access(file);
+			return file;
+		} catch {
+			// lapikit other step
+		}
+	}
+	throw new Error('No eslint.config.js file found');
+}
+
+export async function addLapikitEslintConfig(eslintConfigFile) {
+	let content = await fs.readFile(eslintConfigFile, 'utf-8');
+	const lapikitImport = `import lapikitConfig from 'eslint-config-lapikit';`;
+
+	if (content.includes(`from 'eslint-config-lapikit'`)) {
+		terminal('warn', `eslint-config-lapikit already imported in ${eslintConfigFile}`);
+		return;
+	}
+
+	content = insertImportLine(content, lapikitImport);
+
+	// Matches `export default [...]` as well as wrapped forms like
+	// `export default defineConfig([...])`, `export default defineConfig(a, b)`
+	// (rest-args form, no array) and member-expression wrappers like
+	// `export default ts.config(...)`.
+	const exportArrayPattern = /export\s+default\s*(?:\[|[\w.]+\s*\()/;
+	if (!exportArrayPattern.test(content)) {
+		throw new Error(
+			`Could not find "export default [...]" in ${eslintConfigFile}. Please add "...lapikitConfig" manually.`
+		);
+	}
+
+	content = content.replace(exportArrayPattern, (m) => `${m}\n\t...lapikitConfig,`);
+
+	await fs.writeFile(eslintConfigFile, content);
+	terminal('success', `eslint-config-lapikit added to ${eslintConfigFile}`);
+}

package/bin/index.js

@@ -1,31 +1,111 @@
 #!/usr/bin/env node
-import { ansi, terminal, createRL, toggle } from './helpers.js';
-import { addLiliPreprocess, findSvelteConfigFile } from './hooks.js';
+import { ansi, terminal, createRL, toggle, select, multiselect } from './helpers.js';
+import {
+	resolveSveltePreprocessTarget,
+	installDependency,
+	findEslintConfigFile,
+	addLapikitEslintConfig
+} from './hooks.js';
 
-async function run() {
-	const rl = createRL();
+const ADDONS = [{ title: '@lapikit/repl', value: '@lapikit/repl', key: 'repl' }];
+
+const PKG_MANAGER = [
+	{ title: 'npm', value: 'npm' },
+	{ title: 'yarn', value: 'yarn' },
+	{ title: 'pnpm', value: 'pnpm' },
+	{ title: 'bun', value: 'bun' }
+];
+
+function buildSteps(config, projectPath) {
+	const pluginKeys = config.addons
+		.map((value) => ADDONS.find((addon) => addon.value === value)?.key)
+		.filter(Boolean);
+
+	const steps = [];
+
+	steps.push({
+		id: 'preprocess',
+		label: 'Add lapikitPreprocess to your project',
+		run: async () => {
+			const target = await resolveSveltePreprocessTarget(projectPath);
+			await target.add(target.file, pluginKeys);
+		}
+	});
+
+	for (const addonValue of config.addons) {
+		steps.push({
+			id: `addon:${addonValue}`,
+			label: `Install ${addonValue} (${config.pkgManager})`,
+			run: () => installDependency(config.pkgManager, addonValue, projectPath)
+		});
+	}
 
-	console.log('  _                 _ _    _ _   ');
-	console.log(' | |               (_) |  (_) |  ');
-	console.log(' | |     __ _ _ __  _| | ___| |_ ');
-	console.log(" | |    / _` | '_ \\| | |/ / | __|");
-	console.log(' | |___| (_| | |_) | |   <| | |_ ');
-	console.log(' |______\\__,_| .__/|_|_|\\_\\_|\\__|');
-	console.log('             | |                 ');
-	console.log('             |_|                 \n');
+	if (config.installEslintConfig) {
+		steps.push({
+			id: 'eslint-install',
+			label: `Install eslint-config-lapikit (${config.pkgManager})`,
+			run: () => installDependency(config.pkgManager, 'eslint-config-lapikit', projectPath)
+		});
+		steps.push({
+			id: 'eslint-config',
+			needs: 'eslint-install',
+			label: 'Add eslint-config-lapikit to eslint.config',
+			run: async () => {
+				const eslintConfigFile = await findEslintConfigFile(projectPath);
+				await addLapikitEslintConfig(eslintConfigFile);
+			}
+		});
+	}
+
+	return steps;
+}
 
-	terminal('none', `${ansi.bold.blue('Lapikit')} - Component Library for Svelte\n\n`);
+async function runSteps(config, projectPath) {
+	const steps = buildSteps(config, projectPath);
+	const results = [];
+	const failed = new Set();
 
-	console.log(
-		'This installer will guide you through the process of installing Lapikit on your Svelte project.\n'
-	);
+	for (let i = 0; i < steps.length; i++) {
+		const step = steps[i];
+		const tag = ansi.bold.blue(`[${i + 1}/${steps.length}]`);
 
-	console.log('List actions that will be done:');
-	console.log(
-		ansi.color.green('✓') +
-			' Add lili preprocess (named: lapikitPreprocess) on your svelte.config.js file\n'
-	);
-	console.log(ansi.underline.purple('Setup will take less than 5 seconds\n'));
+		if (step.needs && failed.has(step.needs)) {
+			results.push({ label: step.label, ok: false, skipped: true });
+			terminal('warn', `${tag} ${step.label} - skipped (prerequisite failed)`);
+			continue;
+		}
+
+		try {
+			await step.run();
+			results.push({ label: step.label, ok: true });
+			terminal('success', `${tag} ${step.label}`);
+		} catch (error) {
+			if (step.id) failed.add(step.id);
+			results.push({ label: step.label, ok: false, error: error.message });
+			terminal('error', `${tag} ${step.label} - ${error.message}`);
+		}
+	}
+
+	return results;
+}
+
+async function run() {
+	const rl = createRL();
+	const config = {
+		installEslintConfig: false,
+		addons: []
+	};
+
+	console.log(ansi.color.blue(' ██╗      █████╗ ██████╗ ██╗██╗  ██╗██╗████████╗'));
+	console.log(ansi.color.blue(' ██║     ██╔══██╗██╔══██╗██║██║ ██╔╝██║╚══██╔══╝'));
+	console.log(ansi.color.blue(' ██║     ███████║██████╔╝██║█████╔╝ ██║   ██║   '));
+	console.log(ansi.color.blue(' ██║     ██╔══██║██╔═══╝ ██║██╔═██╗ ██║   ██║   '));
+	console.log(ansi.color.blue(' ██████╗ ██║  ██║██║     ██║██║  ██╗██║   ██║   '));
+	console.log(ansi.color.blue(' ╚═════╝ ╚═╝  ╚═╝╚═╝     ╚═╝╚═╝  ╚═╝╚═╝   ╚═╝   '));
+
+	terminal('none', `${ansi.bold.blue('Lapikit')} - Components Library for Svelte`);
+	terminal('none', `Developed by ${ansi.bold.blue('Nycolaide')}`);
+	terminal('none', `Documentation: https://lapikit.dev\n`);
 
 	const confirm = await toggle(rl, 'Launch install Lapikit on your project?');
 	if (!confirm) {
@@ -33,25 +113,20 @@ async function run() {
 		process.exit(0);
 	}
 
-	console.log('\n');
+	config.installEslintConfig = await toggle(rl, 'Install eslint-config-lapikit?');
+	config.pkgManager = await select(rl, 'Select package manager:', PKG_MANAGER);
+	config.addons = await multiselect(rl, 'Select addons to install:', ADDONS);
 
-	try {
-		const svelteConfigFile = await findSvelteConfigFile(process.cwd());
-		await addLiliPreprocess(svelteConfigFile);
-	} catch (error) {
-		terminal('warn', `Warning: Could not update svelte.config file: ${error.message}`);
-	}
+	const results = await runSteps(config, process.cwd());
+	rl.close();
+	return results;
 }
 
 run()
-	.then(() => {
-		terminal('none', `\n\nThank's for installing Lapikit!\n`);
-		terminal('none', `Website: https://lapikit.dev`);
-		terminal('none', `Github: https://github.com/lapikit/lapikit`);
-		terminal('none', `Support the developement: https://buymeacoffee.com/nycolaide`);
-		process.exit(0);
+	.then((results) => {
+		process.exitCode = results?.some((r) => !r.ok) ? 1 : 0;
 	})
 	.catch((error) => {
 		terminal('error', `Error: ${error}`);
-		process.exit(1);
+		process.exitCode = 1;
 	});

package/dist/components/accordion/accordion.svelte

@@ -125,6 +125,16 @@
 		display: none;
 	}
 
+	.kit-accordion[data-variant='text'] :global(.kit-accordion-item),
+	.kit-accordion[data-variant='text'] :global(.kit-accordion-item:first-child:last-child) {
+		border-radius: 0 !important;
+	}
+
+	.kit-accordion:not([data-variant='text'])
+		:global(.kit-accordion-item[data-read-only='false'][data-disabled='false'] > button:hover) {
+		background: var(--kit-accordion-item-hover-bg);
+	}
+
 	/** 
 	 * rounded
 	 * @link ...

package/dist/components/accordion/modules/accordion-item.svelte

@@ -199,7 +199,7 @@
 	}
 
 	.kit-accordion-item__separator {
-		width: 96%;
+		width: 100%;
 		height: 1px;
 		display: block;
 		position: relative;
@@ -207,9 +207,10 @@
 		margin: 0 auto;
 	}
 
-	.kit-accordion-item[data-read-only='false'][data-disabled='false'] > button:hover {
+	/* .kit-accordion-item[data-read-only='false'][data-disabled='false']:not([data-variant='text'])
+		> button:hover {
 		background: var(--kit-accordion-item-hover-bg);
-	}
+	} */
 
 	/**I think is a good idea for not use this*/
 	/* .kit-accordion-item[data-active='true'][data-disabled='false'][data-read-only='false'] > button {

package/dist/components/app/app.svelte

@@ -62,7 +62,7 @@
 		--kit-density-comfortable: 4px;
 
 		--kit-shadow-opacity: 30%;
-		--kit-shadow-ambiant-opacity: 15%;
+		--kit-shadow-ambient-opacity: 15%;
 
 		--kit-disabled-opacity: 0.55;
 		--kit-font:
@@ -261,7 +261,7 @@
 		box-shadow:
 			0 1px 2px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent),
 			0 3px 8px -2px
-				color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambiant-opacity), transparent);
+				color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambient-opacity), transparent);
 	}
 
 	:global([data-elevation='2']),
@@ -270,7 +270,7 @@
 		box-shadow:
 			0 1px 3px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent),
 			0 5px 12px -3px
-				color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambiant-opacity), transparent);
+				color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambient-opacity), transparent);
 	}
 
 	:global([data-elevation='3']),
@@ -279,7 +279,7 @@
 		box-shadow:
 			0 2px 4px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent),
 			0 8px 20px -4px
-				color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambiant-opacity), transparent);
+				color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambient-opacity), transparent);
 	}
 
 	:global([data-elevation='4']),
@@ -288,7 +288,7 @@
 		box-shadow:
 			0 3px 5px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent),
 			0 11px 26px -5px
-				color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambiant-opacity), transparent);
+				color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambient-opacity), transparent);
 	}
 
 	:global([data-elevation='5']),
@@ -297,7 +297,7 @@
 		box-shadow:
 			0 4px 6px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent),
 			0 14px 32px -6px
-				color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambiant-opacity), transparent);
+				color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambient-opacity), transparent);
 	}
 	@keyframes -global-animation-l-ripple {
 		from {

package/dist/components/btn/btn.svelte

@@ -237,6 +237,7 @@
 		background: var(--kit-btn-hover-bg);
 		color: var(--kit-btn-fg);
 		text-decoration: var(--kit-btn-decoration);
+		translate: 0 -1px;
 	}
 
 	.kit-btn:has(> :is(input[type='checkbox'], input[type='radio']):checked) {

package/dist/components/card/card.svelte

@@ -202,7 +202,6 @@
 	}
 
 	.kit-card[data-interactive='true'][data-disabled='false']:hover {
-		translate: 0 -1px;
 		background: var(--kit-card-hover-bg);
 	}
 

package/dist/components/chip/chip.svelte

@@ -279,6 +279,7 @@
 		background: var(--kit-chip-hover-bg);
 		color: var(--kit-chip-fg);
 		text-decoration: var(--kit-chip-decoration);
+		translate: 0 -1px;
 	}
 
 	:is(.kit-chip:focus-visible, .kit-chip:has(> input:focus-visible)) {

package/dist/components/icon/icon.svelte

@@ -116,20 +116,26 @@
 
 <style>
 	.kit-icon {
+		--kit-icon-size-xs: 12px;
+		--kit-icon-size-sm: 14px;
+		--kit-icon-size-md: 16px;
+		--kit-icon-size-lg: 18px;
+		--kit-icon-size-xl: 20px;
+
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
 		text-indent: 0;
 		line-height: 1;
-		font-size: var(--kit-icon-current-size);
+		font-size: var(--kit-icon-current-size, var(--kit-icon-size-md));
 		vertical-align: middle;
 	}
 
 	.kit-icon :global(svg),
 	.kit-icon img,
 	.kit-icon .kit-icon__mask {
-		width: var(--kit-icon-current-size);
-		height: var(--kit-icon-current-size);
+		width: var(--kit-icon-current-size, var(--kit-icon-size-md));
+		height: var(--kit-icon-current-size, var(--kit-icon-size-md));
 		flex-shrink: 0;
 		display: block;
 	}
@@ -152,18 +158,18 @@
 	 * @link https://lapikit.dev/docs/components/icon#size 
 	 */
 	.kit-icon[data-size='xs'] {
-		--kit-icon-current-size: 12px;
+		--kit-icon-current-size: var(--kit-icon-size-xs);
 	}
 	.kit-icon[data-size='sm'] {
-		--kit-icon-current-size: 14px;
+		--kit-icon-current-size: var(--kit-icon-size-sm);
 	}
 	.kit-icon[data-size='md'] {
-		--kit-icon-current-size: 16px;
+		--kit-icon-current-size: var(--kit-icon-size-md);
 	}
 	.kit-icon[data-size='lg'] {
-		--kit-icon-current-size: 18px;
+		--kit-icon-current-size: var(--kit-icon-size-lg);
 	}
 	.kit-icon[data-size='xl'] {
-		--kit-icon-current-size: 20px;
+		--kit-icon-current-size: var(--kit-icon-size-xl);
 	}
 </style>

package/dist/components/list/list.svelte

@@ -136,14 +136,14 @@
 	 * variant
 	 * @link https://lapikit.dev/docs/components/list#variants
 	 */
-	.kit-list[data-variant='filled'] :global(.kit-list-item) {
+	.kit-list[data-variant='filled'] {
 		--kit-list-item-bg: var(--kit-color-surface-2);
 		--kit-list-item-fg: var(--kit-color-text);
 
 		--kit-list-item-hover-bg: color-mix(in oklab, var(---kit-list-item-bg), black 10%);
 		--kit-list-item-active-bg: color-mix(in oklab, var(--kit-list-item-bg), black 16%);
 	}
-	.kit-list[data-variant='outline'] :global(.kit-list-item) {
+	.kit-list[data-variant='outline'] {
 		--kit-list-item-bg: transparent;
 		--kit-list-item-fg: var(--kit-color-text);
 		--kit-list-item-bd: var(--kit-list-item-fg);
@@ -151,7 +151,7 @@
 		--kit-list-item-hover-bg: color-mix(in oklab, var(--kit-list-item-fg), transparent 80%);
 		--kit-list-item-active-bg: color-mix(in oklab, var(--kit-list-item-fg), transparent 92%);
 	}
-	.kit-list[data-variant='text'] :global(.kit-list-item) {
+	.kit-list[data-variant='text'] {
 		--kit-list-item-bg: transparent;
 		--kit-list-item-fg: var(--kit-color-text);
 

package/dist/components/list/modules/list-item.svelte

@@ -155,7 +155,6 @@
 	}
 
 	.kit-list-item[data-interactive='true'][data-disabled='false']:hover {
-		translate: 0 -1px;
 		background: var(--kit-list-item-hover-bg);
 	}
 	.kit-list-item[data-active='true'][data-disabled='false'] {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.6.7",
+	"version": "0.6.9",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"
@@ -83,6 +83,7 @@
 		"@tabler/icons-svelte": "^3.40.0",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/svelte": "^5.2.4",
+		"@types/node": "^26.1.0",
 		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^3.0.0",