tailjng 0.0.62 → 0.1.1

package/README.md

@@ -1,63 +1,218 @@
-# Tailjng
+# tailjng
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
+Librería UI y utilidades para **Angular 19** con **Tailwind CSS v4**. Modelo híbrido: lo que es lógica compartida va en **npm**; los componentes visuales se **copian a tu app** con el CLI (estilo shadcn/ui).
 
-## Code scaffolding
+---
 
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+## ¿Qué incluye?
+
+### Desde npm (`import { … } from 'tailjng'`)
+
+| Área | Contenido |
+|------|-----------|
+| **Config** | `TAILJNG_CONFIG` — `urlBase`, `socketUrl` para API REST |
+| **Colores** | `JColorsService` — variantes (`primary`, `success_soft`, `error_outline`, …) |
+| **Iconos** | `JIconsService` — mapa Lucide usado por los componentes |
+| **Alertas** | `JAlertDialogService`, `JAlertToastService` |
+| **CRUD / HTTP** | `JGenericCrudService`, `JConverterCrudService`, params, files, error handler |
+| **Transformación** | `JTransformService`, `JCalendarService` — fechas, moneda, tablas |
+| **Reportes** | `JExcelService`, filtros Excel/upload |
+| **Interfaces** | `TableColumn`, filtros, formularios, alertas, tema |
+| **Shared** | `JFormShared`, `JDialogShared` |
+
+### Desde el CLI (`npx tailjng add <nombre>`)
+
+**35 componentes UI** standalone copiados a `src/app/tailjng/` (ruta configurable con `.tailjng/paths.json`):
+
+| Categoría | Ejemplos |
+|-----------|----------|
+| Base | `badge`, `label`, `button`, `tooltip`, `dialog`, `progress-bar`, `toggle-radio` |
+| Inputs | `input`, `input-file`, `input-textarea`, `input-range`, `checkbox-input`, `checkbox-switch` |
+| Selects | `select-dropdown`, `select-multi-dropdown`, `select-multi-table` |
+| Formularios | `form-container`, `form-validation`, `form-sidebar` |
+| Datos | `table-complete`, `table-crud-complete`, `filter-complete`, `card-complete`, `paginator-complete` |
+| Otros | `alert-dialog`, `alert-toast`, `viewer-image`, `viewer-pdf`, `theme-generator`, `coach-mark` |
+
+El CLI instala **dependencias transitivas** automáticamente (ej. `button` → `tooltip`).
+
+> Los componentes CRUD (`table-crud-complete`, `filter-complete`, `card-*`, …) esperan un backend REST en `TAILJNG_CONFIG.urlBase`. Compatible con **[tailjnx](https://www.npmjs.com/package/tailjnx)** (librería backend del mismo ecosistema).
+
+---
+
+## Requisitos
+
+- Angular **19.2+** (19.x dentro del mismo major; no Angular 20/21 aún)
+- Tailwind CSS **4.x** (incluido si eliges Tailwind al crear el proyecto con `ng new`)
+- Peers: `lucide-angular`, `date-fns`, `exceljs`, `xlsx` (el CLI los instala con `init:app` si faltan)
+- Estilos globales en **CSS o SCSS** — `init:app` detecta cuál usa tu app
+
+---
+
+## Inicio rápido
 
 ```bash
-ng generate component component-name
+npm install tailjng
 ```
 
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+Desde la raíz de tu app Angular:
 
 ```bash
-ng generate --help
+npx tailjng init:app          # Tailwind, providers, estilos (sin UI)
+npx tailjng add button          # un componente + deps
+npx tailjng list                # ver todos los disponibles
 ```
 
-## Building
-
-To build the library, run:
+Opcional — alerts y mode-toggle en el mismo paso:
 
 ```bash
-ng build tailjng
+npx tailjng init:app --with-components
 ```
 
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+---
+
+## Configuración
+
+### Providers (`init:app` genera esto)
+
+```typescript
+// src/app/config/tailjng.providers.ts
+import { CurrencyPipe } from '@angular/common';
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { TAILJNG_CONFIG } from 'tailjng';
+
+export const tailjngProviders = [
+  provideHttpClient(),
+  provideAnimations(),
+  CurrencyPipe,
+  {
+    provide: TAILJNG_CONFIG,
+    useValue: {
+      urlBase: 'http://localhost:3000/api/v1',
+      socketUrl: 'http://localhost:3000',
+    },
+  },
+];
+```
 
-### Publishing the Library
+### Estilos
 
-Once the project is built, you can publish your library by following these steps:
+`init:app` configura `@import "tailwindcss"`, variables `@theme` y añade en `angular.json`:
 
-1. Navigate to the `dist` directory:
-   ```bash
-   cd dist/tailjng
-   ```
+```json
+"node_modules/tailjng/src/styles.css"
+```
 
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
+---
 
-## Running unit tests
+## Uso en código
 
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+### Servicios (npm)
 
-```bash
-ng test
+```typescript
+import {
+  JIconsService,
+  JColorsService,
+  JAlertToastService,
+  JGenericCrudService,
+  TAILJNG_CONFIG,
+  TableColumn,
+} from 'tailjng';
+```
+
+### Componentes (copiados con CLI)
+
+```typescript
+import { JButtonComponent } from './tailjng/button/button.component';
+import { JDropdownSelectComponent } from './tailjng/select/select-dropdown/dropdown-select.component';
+import { JAlertToastComponent } from './tailjng/alert/alert-toast/toast-alert.component';
+```
+
+```html
+<JAlertToast />
+<JButton [text]="'Guardar'" classes="primary" [icon]="icons.save" (clicked)="save()" />
+```
+
+### Colores — `JColorsService` (solo npm)
+
+No uses `npx tailjng add color`. Las variantes vienen del servicio:
+
+```html
+<JButton classes="success" … />
+<JBadge classes="warning_soft" … />
+```
+
+### Select con datos estáticos
+
+Opciones en el `.ts`, binding en el template:
+
+```typescript
+readonly options = [
+  { label: 'Pruebas', value: 'pruebas' },
+  { label: 'Producción', value: 'produccion' },
+];
+```
+
+```html
+<JDropdownSelect
+  formControlName="environment"
+  [options]="options"
+  optionLabel="label"
+  optionValue="value"
+  [isSearch]="false"
+  [showClear]="false"
+/>
+```
+
+### Select / toggle con API
+
+Pasa `endpoint`, `type="searchable"` o `loadOnInit` según el componente; usa `JGenericCrudService` vía `TAILJNG_CONFIG.urlBase`.
+
+---
+
+## Comandos CLI
+
+| Comando | Descripción |
+|---------|-------------|
+| `npx tailjng init:app` | Prepara proyecto: Tailwind, deps, providers, estilos |
+| `npx tailjng init:app --yes` | Sin prompts interactivos |
+| `npx tailjng init:app --with-components` | init + mode-toggle y alerts |
+| `npx tailjng add <nombre>` | Instala componente + dependencias |
+| `npx tailjng install-all` | Instala los 35 componentes |
+| `npx tailjng list` | Lista registry e indica cuáles ya están instalados |
+| `npx tailjng version` | Versión del paquete npm instalado |
+
+Si un componente ya existe, el CLI pregunta cómo sobrescribir (uno a uno, todos o omitir).
+
+---
+
+## Estructura en tu proyecto (tras `init:app` + `add`)
+
+```
+tu-app/
+  .postcssrc.json
+  .tailjng/paths.json
+  src/
+    environment.ts
+    app/
+      config/tailjng.providers.ts
+      tailjng/              ← componentes copiados por el CLI
+        button/
+        tooltip/
+        …
 ```
 
-## Running end-to-end tests
+---
 
-For end-to-end (e2e) testing, run:
+## Publicación e instalación
 
 ```bash
-ng e2e
+npm view tailjng version
+npm install tailjng@latest
 ```
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+---
 
-## Additional Resources
+## Desarrollo del paquete (mantenedores)
 
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+Este archivo se publica en npm. El runbook del monorepo está en **[DEV.md](../../DEV.md)** (raíz del workspace).

package/cli/component-manager.js

@@ -3,30 +3,76 @@
 const { copyComponentFiles } = require("./file-operations");
 const { installDependencies } = require("./dependency-manager");
 const { COLORS } = require("./settings/colors");
+const { collectDependencyTree } = require("./settings/lib-utils");
+const { isComponentInstalled } = require("./settings/path-utils");
+const { resetOverwritePolicy } = require("./settings/overwrite-policy");
+const { askOverwriteStrategy } = require("./settings/prompt-utils");
 
-// Registro global para evitar re-instalaciones duplicadas
 const installedComponentsGlobal = new Set();
 
-/**
- * Instala un componente individual y sus dependencias.
- */
+function getExistingComponents(componentNames, componentList) {
+  const projectRoot = process.cwd();
+  return componentNames.filter((name) =>
+    isComponentInstalled(projectRoot, name, componentList[name].path)
+  );
+}
+
+async function resolveOverwriteStrategy(componentNames, componentList) {
+  const existing = getExistingComponents(componentNames, componentList);
+  if (existing.length === 0) return;
+  await askOverwriteStrategy(existing.length, existing);
+}
+
+function logInstallPlan(componentName, componentList) {
+  const deps = collectDependencyTree(componentName, componentList);
+  const allComponents = [...deps, componentName];
+
+  console.log(
+    `${COLORS.blue}${COLORS.bright}[tailjng CLI]${COLORS.reset} ${COLORS.blue}Install plan for ${COLORS.bright}"${componentName}"${COLORS.reset}`
+  );
+
+  if (deps.length > 0) {
+    console.log(`${COLORS.dim}   Dependencies (${deps.length}): ${deps.join(", ")}${COLORS.reset}`);
+  } else {
+    console.log(`${COLORS.dim}   Dependencies: none${COLORS.reset}`);
+  }
+
+  const existing = getExistingComponents(allComponents, componentList);
+
+  if (existing.length > 0) {
+    console.log(
+      `${COLORS.yellow}   Already in project: ${existing.join(", ")}${COLORS.reset}`
+    );
+  }
+
+  console.log("");
+}
+
 async function addComponent(componentName, componentList) {
+  resetOverwritePolicy();
+  installedComponentsGlobal.clear();
+
   const componentData = componentList[componentName];
   if (!componentData) {
     console.error(
-      `${COLORS.red}${COLORS.bright}[tailjng CLI]${COLORS.reset} ${COLORS.red}ERROR: Component ${COLORS.bright}"${componentName}"${COLORS.reset} ${COLORS.red}not found in the component list.${COLORS.reset}`
+      `${COLORS.red}${COLORS.bright}[tailjng CLI]${COLORS.reset} ${COLORS.red}ERROR: Component ${COLORS.bright}"${componentName}"${COLORS.reset} ${COLORS.red}not found.${COLORS.reset}`
     );
+    console.log(`${COLORS.cyan}Run ${COLORS.bright}npx tailjng list${COLORS.reset}${COLORS.cyan} to see available components.${COLORS.reset}`);
     process.exit(1);
   }
 
+  const deps = collectDependencyTree(componentName, componentList);
+  const allComponents = [...deps, componentName];
+
+  logInstallPlan(componentName, componentList);
+  await resolveOverwriteStrategy(allComponents, componentList);
+
   console.log(
     `${COLORS.blue}${COLORS.bright}[tailjng CLI]${COLORS.reset} ${COLORS.blue}Adding component: ${COLORS.bright}"${componentName}"${COLORS.reset}`
   );
 
-  // Instalar dependencias primero
   await installDependencies(componentData.dependencies, componentList, installedComponentsGlobal);
 
-  // Si el componente principal ya fue procesado (como dependencia), saltarlo
   if (installedComponentsGlobal.has(componentName)) {
     console.log(
       `${COLORS.dim}${COLORS.bright}[tailjng CLI]${COLORS.reset} ${COLORS.dim}Main component ${COLORS.bright}"${componentName}"${COLORS.reset} ${COLORS.dim}was already processed as a dependency.${COLORS.reset}`
@@ -34,10 +80,8 @@ async function addComponent(componentName, componentList) {
     return;
   }
 
-  // Copiar los archivos del componente principal
   const wasInstalled = await copyComponentFiles(componentName, componentData.path, false);
-
-  installedComponentsGlobal.add(componentName); // lo marcamos como instalado
+  installedComponentsGlobal.add(componentName);
 
   if (wasInstalled) {
     console.log(
@@ -45,34 +89,41 @@ async function addComponent(componentName, componentList) {
     );
   } else {
     console.log(
-      `${COLORS.yellow}${COLORS.bright}[tailjng CLI]${COLORS.reset} ${COLORS.yellow}Component ${COLORS.bright}"${componentName}"${COLORS.reset} ${COLORS.yellow}installation was cancelled by user.${COLORS.reset}`
+      `${COLORS.yellow}${COLORS.bright}[tailjng CLI]${COLORS.reset} ${COLORS.yellow}Component ${COLORS.bright}"${componentName}"${COLORS.reset} ${COLORS.yellow}kept your existing version (not overwritten).${COLORS.reset}`
     );
   }
 }
 
-/**
- * Instala todos los componentes disponibles en la lista.
- */
 async function installAllComponents(componentList) {
+  resetOverwritePolicy();
+  installedComponentsGlobal.clear();
+
+  const allNames = Object.keys(componentList);
+  const existing = getExistingComponents(allNames, componentList);
+
   console.log(
     `${COLORS.blue}${COLORS.bright}[tailjng CLI]${COLORS.reset} ${COLORS.blue}Installing all components...${COLORS.reset}`
   );
 
-  for (const componentName of Object.keys(componentList)) {
+  if (existing.length > 0) {
+    console.log(
+      `${COLORS.yellow}   ${existing.length} component(s) already in project.${COLORS.reset}\n`
+    );
+    await resolveOverwriteStrategy(allNames, componentList);
+  }
+
+  for (const componentName of allNames) {
     const componentData = componentList[componentName];
 
-    // Evita duplicados
     if (installedComponentsGlobal.has(componentName)) {
       console.log(
-        `${COLORS.dim}${COLORS.bright}[tailjng CLI]${COLORS.reset} ${COLORS.dim}Skipping already installed: ${COLORS.bright}"${componentName}"${COLORS.reset}`
+        `${COLORS.dim}${COLORS.bright}[tailjng CLI]${COLORS.reset} ${COLORS.dim}Skipping already processed: ${COLORS.bright}"${componentName}"${COLORS.reset}`
       );
       continue;
     }
 
-    // Instalar dependencias
     await installDependencies(componentData.dependencies, componentList, installedComponentsGlobal);
 
-    // Instalar el componente principal
     const wasInstalled = await copyComponentFiles(componentName, componentData.path, false);
     installedComponentsGlobal.add(componentName);
 
@@ -82,7 +133,7 @@ async function installAllComponents(componentList) {
       );
     } else {
       console.log(
-        `${COLORS.yellow}${COLORS.bright}[tailjng CLI]${COLORS.reset} ${COLORS.yellow}Component ${COLORS.bright}"${componentName}"${COLORS.reset} ${COLORS.yellow}installation was skipped by user.${COLORS.reset}`
+        `${COLORS.yellow}${COLORS.bright}[tailjng CLI]${COLORS.reset} ${COLORS.yellow}Component ${COLORS.bright}"${componentName}"${COLORS.reset} ${COLORS.yellow}kept your existing version.${COLORS.reset}`
       );
     }
   }

package/cli/execute/init-app.js

@@ -0,0 +1,284 @@
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+const readline = require('readline');
+const { COLORS } = require('../settings/colors');
+const { addComponent } = require('../component-manager');
+const { getComponentList } = require('../settings/components-list');
+const { buildInitFiles } = require('../templates/app.generator');
+const {
+  findAngularWorkspace,
+  readJson,
+  getApplicationProjects,
+  resolveAppPaths,
+  getBuildOptions,
+  detectStyleLanguage,
+  getPrimaryStyleEntry,
+  writeFileSafe,
+  ensureTailjngStylesInAngularJson,
+  patchIndexHtml,
+  patchAppConfig,
+  patchAppComponentForAlerts,
+  getMissingPackages,
+  resolveRuntimePackages,
+  resolveDevPackages,
+  hasTailwindSetup,
+  fileExists,
+} = require('../settings/project-utils');
+
+const RUNTIME_PACKAGES = {
+  'lucide-angular': '^0.525.0',
+  '@ng-icons/lucide': '>=32.0.0',
+  'date-fns': '^4.1.0',
+  'exceljs': '^4.4.0',
+  'xlsx': '^0.18.5',
+};
+
+const DEV_PACKAGES = {
+  tailwindcss: '^4.0.9',
+  '@tailwindcss/postcss': '^4.0.9',
+  postcss: '^8.5.3',
+  autoprefixer: '^10.4.20',
+};
+
+/** Solo si pasas --with-components (opcional; no es el flujo normal). */
+const OPTIONAL_BASE_COMPONENTS = ['mode-toggle', 'alert-dialog', 'alert-toast'];
+
+function ask(question, defaultValue = '') {
+  if (process.argv.includes('--yes')) {
+    return Promise.resolve(defaultValue);
+  }
+
+  const suffix = defaultValue ? ` (${defaultValue})` : '';
+  return new Promise((resolve) => {
+    const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+    rl.question(`${COLORS.cyan}${question}${suffix}: ${COLORS.reset}`, (answer) => {
+      rl.close();
+      resolve(answer.trim() || defaultValue);
+    });
+  });
+}
+
+function askYesNo(question, defaultYes = true) {
+  if (process.argv.includes('--yes')) {
+    return Promise.resolve(defaultYes);
+  }
+
+  const hint = defaultYes ? 'Y/n' : 'y/N';
+  return new Promise((resolve) => {
+    const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+    rl.question(`${COLORS.cyan}${question} (${hint}): ${COLORS.reset}`, (answer) => {
+      rl.close();
+      const normalized = answer.trim().toLowerCase();
+      if (!normalized) resolve(defaultYes);
+      else resolve(normalized === 'y' || normalized === 'yes');
+    });
+  });
+}
+
+function installPackages(workspaceRoot, packages, isDev = false) {
+  const entries = Object.entries(packages);
+  if (entries.length === 0) return;
+
+  const spec = entries.map(([name, version]) => `${name}@${version}`).join(' ');
+  const flag = isDev ? '--save-dev' : '--save';
+  console.log(`${COLORS.blue}[tailjng CLI] Installing ${isDev ? 'dev ' : ''}dependencies...${COLORS.reset}`);
+
+  const run = (extra = '') => {
+    execSync(`npm install ${flag} ${extra} ${spec}`.replace(/\s+/g, ' ').trim(), {
+      cwd: workspaceRoot,
+      stdio: 'inherit',
+      shell: true,
+    });
+  };
+
+  try {
+    run();
+  } catch {
+    console.log(`${COLORS.yellow}[tailjng CLI] Retrying with --legacy-peer-deps...${COLORS.reset}`);
+    run('--legacy-peer-deps');
+  }
+}
+
+function resolveTargetPath(workspaceRoot, appProject, relativePath, appRootRelative = false) {
+  const appRoot = path.join(workspaceRoot, appProject.root || '');
+
+  if (appRootRelative) {
+    return path.join(appRoot, relativePath);
+  }
+
+  if (relativePath.startsWith('projects/')) {
+    return path.join(workspaceRoot, relativePath);
+  }
+
+  return path.join(workspaceRoot, appProject.sourceRoot, relativePath.replace(/^src\//, ''));
+}
+
+async function runInitApp() {
+  const cwd = process.cwd();
+  const workspace = findAngularWorkspace(cwd);
+
+  if (!workspace) {
+    console.error(`${COLORS.red}[tailjng CLI] ERROR: angular.json not found. Run this inside an Angular project.${COLORS.reset}`);
+    process.exit(1);
+  }
+
+  const { workspaceRoot, angularJsonPath } = workspace;
+  const angularJson = readJson(angularJsonPath);
+  const apps = getApplicationProjects(angularJson);
+
+  if (apps.length === 0) {
+    console.error(`${COLORS.red}[tailjng CLI] ERROR: No application project found in angular.json.${COLORS.reset}`);
+    process.exit(1);
+  }
+
+  let selectedApp = apps[0];
+  if (apps.length > 1) {
+    console.log(`${COLORS.cyan}[tailjng CLI] Multiple applications found:${COLORS.reset}`);
+    apps.forEach((app, index) => console.log(`  ${index + 1}. ${app.name}`));
+    const answer = await ask('Select application number', '1');
+    const index = Number.parseInt(answer, 10) - 1;
+    selectedApp = apps[index] || apps[0];
+  }
+
+  const { appRoot, srcRoot } = resolveAppPaths(workspaceRoot, selectedApp);
+  const buildOptions = getBuildOptions(angularJson, selectedApp.name);
+  const styleLanguage = detectStyleLanguage(buildOptions);
+  const primaryStylePath = getPrimaryStyleEntry(buildOptions);
+  const indexPath = path.join(workspaceRoot, buildOptions.index || path.join(selectedApp.sourceRoot, 'index.html'));
+  const appConfigPath = path.join(srcRoot, 'app', 'app.config.ts');
+  const appComponentTsPath = path.join(srcRoot, 'app', 'app.component.ts');
+  const appComponentHtmlPath = path.join(srcRoot, 'app', 'app.component.html');
+  const componentsPath = 'src/app/tailjng';
+
+  console.log(`\n${COLORS.bright}${COLORS.blue}[tailjng CLI] init:app${COLORS.reset}`);
+  console.log(`${COLORS.dim}Workspace: ${workspaceRoot}${COLORS.reset}`);
+  console.log(`${COLORS.dim}Application: ${selectedApp.name}${COLORS.reset}`);
+  console.log(`${COLORS.dim}Styles: ${styleLanguage} (${primaryStylePath})${COLORS.reset}\n`);
+
+  const socketUrl = await ask('API socket/base URL', 'http://localhost:3000');
+  const urlBase = await ask('API urlBase', `${socketUrl.replace(/\/$/, '')}/api/v1`);
+  const installDeps = await askYesNo('Install required npm packages?', true);
+  const withComponentsFlag = process.argv.includes('--with-components');
+  const installComponents = withComponentsFlag
+    ? true
+    : await askYesNo('Install base UI components now? (default: use add / install-all later)', false);
+  const overwrite = process.argv.includes('--yes')
+    ? true
+    : await askYesNo('Overwrite generated config files if they already exist?', false);
+
+  const packageJsonPath = path.join(workspaceRoot, 'package.json');
+  const packageJson = fileExists(packageJsonPath) ? readJson(packageJsonPath) : { dependencies: {}, devDependencies: {} };
+  const tailwindReady = hasTailwindSetup(workspaceRoot, packageJson, primaryStylePath);
+
+  if (!packageJson.dependencies?.tailjng) {
+    console.log(`${COLORS.yellow}[tailjng CLI] WARNING: tailjng is not in package.json dependencies.${COLORS.reset}`);
+    console.log(`${COLORS.yellow}Install it first: npm install tailjng${COLORS.reset}`);
+  }
+
+  if (installDeps) {
+    if (tailwindReady) {
+      console.log(`${COLORS.cyan}[tailjng CLI] Tailwind already configured — skipping Tailwind/PostCSS packages and .postcssrc.json${COLORS.reset}`);
+    }
+
+    const runtimePackages = resolveRuntimePackages(packageJson, RUNTIME_PACKAGES);
+    const devPackages = resolveDevPackages(packageJson, DEV_PACKAGES, tailwindReady);
+    const missingRuntime = Object.fromEntries(getMissingPackages(packageJson, runtimePackages));
+    const missingDev = Object.fromEntries(getMissingPackages(packageJson, devPackages));
+
+    if (missingRuntime['@angular/animations']) {
+      console.log(`${COLORS.dim}[tailjng CLI] Adding @angular/animations aligned with @angular/core${COLORS.reset}`);
+    }
+
+    installPackages(workspaceRoot, missingRuntime, false);
+    installPackages(workspaceRoot, missingDev, true);
+  }
+
+  const hasAppConfig = fileExists(appConfigPath);
+  const files = buildInitFiles({
+    styleLanguage,
+    primaryStylePath,
+    urlBase,
+    socketUrl,
+    componentsPath,
+    overwrite,
+    hasAppConfig,
+  });
+
+  let created = 0;
+  let skipped = 0;
+
+  function shouldWriteStyles(filePath) {
+    if (!fs.existsSync(filePath)) return true;
+    const content = fs.readFileSync(filePath, 'utf8');
+    return !content.includes('tailwindcss');
+  }
+
+  for (const file of files) {
+    if (tailwindReady && file.relativePath === '.postcssrc.json') {
+      skipped += 1;
+      console.log(`${COLORS.yellow}↷ Skipped (Tailwind already configured) ${file.relativePath}${COLORS.reset}`);
+      continue;
+    }
+
+    const targetPath = resolveTargetPath(workspaceRoot, selectedApp, file.relativePath, file.appRootRelative);
+    const isPrimaryStyles = file.relativePath === primaryStylePath;
+    const forceWrite = isPrimaryStyles && shouldWriteStyles(targetPath);
+    const wrote = writeFileSafe(targetPath, file.content, overwrite || forceWrite);
+    if (wrote) {
+      created += 1;
+      console.log(`${COLORS.green}✔ Created ${path.relative(workspaceRoot, targetPath)}${COLORS.reset}`);
+    } else {
+      skipped += 1;
+      console.log(`${COLORS.yellow}↷ Skipped (exists) ${path.relative(workspaceRoot, targetPath)}${COLORS.reset}`);
+    }
+  }
+
+  if (hasAppConfig) {
+    const patched = patchAppConfig(appConfigPath);
+    if (patched.changed) {
+      console.log(`${COLORS.green}✔ Patched ${path.relative(workspaceRoot, appConfigPath)}${COLORS.reset}`);
+    }
+  }
+
+  const indexPatched = patchIndexHtml(indexPath);
+  if (indexPatched) {
+    console.log(`${COLORS.green}✔ Patched ${path.relative(workspaceRoot, indexPath)}${COLORS.reset}`);
+  }
+
+  const stylesPatched = ensureTailjngStylesInAngularJson(angularJsonPath, selectedApp.name, styleLanguage);
+  if (stylesPatched.changed) {
+    console.log(`${COLORS.green}✔ Added node_modules/tailjng/src/styles.css to angular.json${COLORS.reset}`);
+  }
+
+  if (installComponents) {
+    const previousCwd = process.cwd();
+    process.chdir(appRoot);
+    try {
+      for (const componentName of OPTIONAL_BASE_COMPONENTS) {
+        await addComponent(componentName, getComponentList());
+      }
+      patchAppComponentForAlerts(appComponentTsPath, appComponentHtmlPath);
+      console.log(`${COLORS.green}✔ Installed optional base components + alert shell${COLORS.reset}`);
+    } finally {
+      process.chdir(previousCwd);
+    }
+  }
+
+  if (tailwindReady && !shouldWriteStyles(path.join(workspaceRoot, primaryStylePath))) {
+    console.log(`${COLORS.yellow}[tailjng CLI] Tip: add tailjng @theme tokens to your existing styles if components look unstyled.${COLORS.reset}`);
+  }
+
+  console.log(`\n${COLORS.greenBright}${COLORS.bright}[tailjng CLI] init:app completed.${COLORS.reset}`);
+  console.log(`${COLORS.dim}Created: ${created} | Skipped: ${skipped}${COLORS.reset}`);
+  console.log(`\n${COLORS.cyan}Project ready. Install components when you need them:${COLORS.reset}`);
+  console.log(`  ${COLORS.dim}One by one:${COLORS.reset}  cd ${path.relative(workspaceRoot, appRoot)} && npx tailjng add button`);
+  console.log(`  ${COLORS.dim}All at once:${COLORS.reset} cd ${path.relative(workspaceRoot, appRoot)} && npx tailjng install-all`);
+  console.log(`  ${COLORS.dim}List:${COLORS.reset}         npx tailjng list`);
+  console.log(`\n${COLORS.cyan}Then run:${COLORS.reset} ng serve ${selectedApp.name} -o\n`);
+}
+
+runInitApp().catch((error) => {
+  console.error(`${COLORS.red}[tailjng CLI] init:app failed:${COLORS.reset}`, error);
+  process.exit(1);
+});