tailjng 0.1.3 → 0.1.5

package/README.md

@@ -44,7 +44,7 @@ El CLI instala **dependencias transitivas** automáticamente (ej. `button` → `
 - 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`, `file-saver` (el CLI los instala con `init:app` si faltan)
+- Peers: `lucide-angular`, `date-fns`, `exceljs`, `file-saver` (el CLI los instala con `init:app` si faltan)
 - Estilos globales en **CSS o SCSS** — `init:app` detecta cuál usa tu app
 
 ---
@@ -134,24 +134,46 @@ import { JAlertToastComponent } from './tailjng/alert/alert-toast/toast-alert.co
 <JButton [text]="'Guardar'" classes="primary" [icon]="icons.save" (clicked)="save()" />
 ```
 
-### Colores — `JColorsService` + safelist Tailwind
+### Colores — `src/app/tailjng/colors/`
 
-Las variantes (`primary`, `success_soft`, …) las resuelve **`JColorsService`** en runtime. Tailwind v4 **no ve** esas clases en el HTML estático, así que el paquete incluye `node_modules/tailjng/src/colors.safelist.css` con `@source inline(...)`.
+Las variantes (`primary`, `success_soft`, …) las resuelve **`JColorsService`**. Tailwind v4 no genera clases solo en runtime, así que cada proyecto tiene una carpeta editable:
 
-`init:app` importa ese archivo en tu `styles.css` / `styles.scss` automáticamente.
+| Archivo | Para qué |
+|---------|----------|
+| `colors.config.ts` | Lista de variantes (incluye las 77 por defecto) + las tuyas (`brand`, etc.) |
+| `colors.safelist.css` | Clases Tailwind que el build debe generar (`@apply`) |
 
-**Variantes personalizadas del proyecto:**
+**`init:app`** y **`sync:app`** crean esa carpeta (sin sobrescribir si ya existe), importan `colors.safelist.css` en `styles.css` y registran `tailjngColorsProvider`.
+
+Si falta la carpeta en un proyecto existente:
 
 ```powershell
-npx tailjng add colors-config
+npx tailjng sync:app
+# o solo los archivos:
+npx tailjng add colors
 ```
 
-Copia `src/app/tailjng/colors/` con:
+**Añadir un color propio** — edita `colors.config.ts` y registra las clases nuevas en el bloque `.__tailjng_custom_colors__` de `colors.safelist.css`:
 
-- `colors.config.ts` — define variantes extra (`TAILJNG_COLORS_CONFIG`)
-- `colors.safelist.css` — añade tus clases Tailwind al `@source inline` para que el build las genere
+```typescript
+// colors.config.ts
+brand: 'bg-indigo-600 text-white hover:bg-indigo-700 border border-indigo-500 shadow-md',
+```
+
+```css
+/* colors.safelist.css */
+.__tailjng_custom_colors__ {
+  @apply bg-indigo-600 text-white hover:bg-indigo-700 border-indigo-500;
+}
+```
+
+Uso en componentes:
+
+```html
+<JButton classes="brand" text="Guardar" />
+```
 
-Registra el provider en `app.config.ts`:
+`init:app` / `sync:app` registran el provider automáticamente. Manualmente en `app.config.ts`:
 
 ```typescript
 import { tailjngColorsProvider } from './tailjng/colors/colors.config';
@@ -204,6 +226,7 @@ Pasa `endpoint`, `type="searchable"` o `loadOnInit` según el componente; usa `J
 | `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 sync:app` | Tras `npm install tailjng@latest` — solo lo nuevo (estilos, deps, angular.json) |
 | `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 |

package/cli/execute/init-app.js

@@ -1,11 +1,11 @@
 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 { RUNTIME_PACKAGES, DEV_PACKAGES, installPackages } = require('../settings/init-packages');
 const {
   findAngularWorkspace,
   readJson,
@@ -29,22 +29,10 @@ const {
   resolveStyleFilePath,
   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',
-  'file-saver': '^2.0.5',
-};
-
-const DEV_PACKAGES = {
-  tailwindcss: '^4.0.9',
-  '@tailwindcss/postcss': '^4.0.9',
-  postcss: '^8.5.3',
-  autoprefixer: '^10.4.20',
-};
+const {
+  ensureProjectColorsConfig,
+  patchAppConfigColors,
+} = require('../settings/colors-config-utils');
 
 /** Solo si pasas --with-components (opcional; no es el flujo normal). */
 const OPTIONAL_BASE_COMPONENTS = ['mode-toggle', 'alert-dialog', 'alert-toast'];
@@ -81,25 +69,6 @@ function askYesNo(question, defaultYes = true) {
   });
 }
 
-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,
-    });
-  };
-
-  run('--legacy-peer-deps');
-}
-
 function resolveTargetPath(workspaceRoot, appProject, relativePath, appRootRelative = false) {
   const appRoot = path.join(workspaceRoot, appProject.root || '');
 
@@ -201,6 +170,9 @@ async function runInitApp() {
     installPackages(workspaceRoot, missingDev, true);
   }
 
+  const { appRoot } = resolveAppPaths(workspaceRoot, selectedApp);
+  ensureProjectColorsConfig(workspaceRoot, appRoot, overwrite);
+
   const hasAppConfig = fileExists(appConfigPath);
   const safelistImport = getTailjngSafelistCssImport(workspaceRoot, primaryStylePath, selectedApp);
   const primaryStyleFullPath = resolveStyleFilePath(workspaceRoot, primaryStylePath, selectedApp);
@@ -249,6 +221,11 @@ async function runInitApp() {
     if (patched.changed) {
       console.log(`${COLORS.green}✔ Patched ${path.relative(workspaceRoot, appConfigPath)}${COLORS.reset}`);
     }
+
+    const colorsPatched = patchAppConfigColors(appConfigPath, srcRoot);
+    if (colorsPatched.changed) {
+      console.log(`${COLORS.green}✔ Linked tailjngColorsProvider from src/app/tailjng/colors/${COLORS.reset}`);
+    }
   }
 
   const indexPatched = patchIndexHtml(indexPath);

package/cli/execute/sync-app.js

@@ -0,0 +1,192 @@
+const fs = require('fs');
+const path = require('path');
+const { COLORS } = require('../settings/colors');
+const { RUNTIME_PACKAGES, DEV_PACKAGES, installPackages } = require('../settings/init-packages');
+const { buildPathsJson, buildPathsReadme } = require('../templates/app.generator');
+const {
+  findAngularWorkspace,
+  readJson,
+  getApplicationProjects,
+  resolveAppPaths,
+  getBuildOptions,
+  detectStyleLanguage,
+  getPrimaryStyleEntry,
+  writeFileSafe,
+  ensureTailjngStylesInAngularJson,
+  patchIndexHtml,
+  patchAppConfig,
+  getMissingPackages,
+  resolveRuntimePackages,
+  resolveDevPackages,
+  hasTailwindSetup,
+  getTailjngSafelistCssImport,
+  ensureTailjngSafelistImport,
+  alignAngularAnimationsInPackageJson,
+  resolveStyleFilePath,
+  fileExists,
+} = require('../settings/project-utils');
+const {
+  ensureProjectColorsConfig,
+  patchAppConfigColors,
+  COLORS_FILES,
+} = require('../settings/colors-config-utils');
+
+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 runSyncApp() {
+  const workspace = findAngularWorkspace(process.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);
+  }
+
+  const selectedApp = apps[0];
+  const { appRoot, srcRoot } = resolveAppPaths(workspaceRoot, selectedApp);
+  const buildOptions = getBuildOptions(angularJson, selectedApp.name);
+  const styleLanguage = detectStyleLanguage(buildOptions);
+  const primaryStylePath = getPrimaryStyleEntry(buildOptions);
+  const primaryStyleFullPath = resolveStyleFilePath(workspaceRoot, primaryStylePath, selectedApp);
+  const indexPath = path.join(workspaceRoot, buildOptions.index || path.join(selectedApp.sourceRoot, 'index.html'));
+  const appConfigPath = path.join(srcRoot, 'app', 'app.config.ts');
+  const packageJsonPath = path.join(workspaceRoot, 'package.json');
+  const packageJson = fileExists(packageJsonPath) ? readJson(packageJsonPath) : { dependencies: {}, devDependencies: {} };
+  const tailwindReady = hasTailwindSetup(workspaceRoot, packageJson, primaryStylePath);
+  const installDeps = !process.argv.includes('--no-install');
+  const componentsPath = 'src/app/tailjng';
+
+  console.log(`\n${COLORS.bright}${COLORS.blue}[tailjng CLI] sync:app${COLORS.reset}`);
+  console.log(`${COLORS.dim}Updates integration only — does not overwrite your config (environment, providers, styles).${COLORS.reset}`);
+  console.log(`${COLORS.dim}Workspace: ${workspaceRoot} | App: ${selectedApp.name}${COLORS.reset}\n`);
+
+  if (!packageJson.dependencies?.tailjng) {
+    console.log(`${COLORS.yellow}[tailjng CLI] WARNING: tailjng is not in package.json. Run: npm install tailjng@latest --legacy-peer-deps${COLORS.reset}`);
+  }
+
+  let changes = 0;
+
+  const animationsAligned = alignAngularAnimationsInPackageJson(workspaceRoot);
+  if (animationsAligned.changed) {
+    changes += 1;
+    console.log(`${COLORS.green}✔ Aligned @angular/animations → ${animationsAligned.version}${COLORS.reset}`);
+    Object.assign(packageJson, readJson(packageJsonPath));
+  }
+
+  if (installDeps) {
+    const runtimePackages = resolveRuntimePackages(packageJson, RUNTIME_PACKAGES, workspaceRoot);
+    const devPackages = resolveDevPackages(packageJson, DEV_PACKAGES, tailwindReady);
+    const missingRuntime = Object.fromEntries(getMissingPackages(packageJson, runtimePackages, workspaceRoot));
+    const missingDev = Object.fromEntries(getMissingPackages(packageJson, devPackages, workspaceRoot));
+
+    if (Object.keys(missingRuntime).length > 0) {
+      installPackages(workspaceRoot, missingRuntime, false);
+      changes += 1;
+      console.log(`${COLORS.green}✔ Installed missing runtime packages${COLORS.reset}`);
+    }
+
+    if (Object.keys(missingDev).length > 0) {
+      installPackages(workspaceRoot, missingDev, true);
+      changes += 1;
+      console.log(`${COLORS.green}✔ Installed missing dev packages${COLORS.reset}`);
+    }
+
+    if (Object.keys(missingRuntime).length === 0 && Object.keys(missingDev).length === 0) {
+      console.log(`${COLORS.dim}↷ Dependencies already satisfied${COLORS.reset}`);
+    }
+  } else {
+    console.log(`${COLORS.dim}↷ Skipped dependency install (--no-install)${COLORS.reset}`);
+  }
+
+  const pathsJsonPath = resolveTargetPath(workspaceRoot, selectedApp, '.tailjng/paths.json', true);
+  if (writeFileSafe(pathsJsonPath, buildPathsJson(componentsPath), false)) {
+    changes += 1;
+    console.log(`${COLORS.green}✔ Created ${path.relative(workspaceRoot, pathsJsonPath)}${COLORS.reset}`);
+  }
+
+  const pathsReadmePath = resolveTargetPath(workspaceRoot, selectedApp, '.tailjng/README.md', true);
+  if (writeFileSafe(pathsReadmePath, buildPathsReadme(), false)) {
+    changes += 1;
+    console.log(`${COLORS.green}✔ Created ${path.relative(workspaceRoot, pathsReadmePath)}${COLORS.reset}`);
+  }
+
+  const colorsResult = ensureProjectColorsConfig(workspaceRoot, appRoot, false);
+  if (colorsResult.created > 0) {
+    changes += colorsResult.created;
+  } else if (colorsResult.skipped === COLORS_FILES.length) {
+    console.log(`${COLORS.dim}↷ Project colors config already present${COLORS.reset}`);
+  }
+
+  const safelistImport = getTailjngSafelistCssImport(workspaceRoot, primaryStylePath, selectedApp);
+  const safelistPatched = ensureTailjngSafelistImport(primaryStyleFullPath, safelistImport);
+  if (safelistPatched.changed) {
+    changes += 1;
+    const label = safelistPatched.migrated
+      ? 'Migrated colors safelist to project folder'
+      : 'Added tailjng colors safelist';
+    console.log(`${COLORS.green}✔ ${label} → ${path.relative(workspaceRoot, primaryStyleFullPath)}${COLORS.reset}`);
+  } else {
+    console.log(`${COLORS.dim}↷ Colors safelist already in styles${COLORS.reset}`);
+  }
+
+  const stylesPatched = ensureTailjngStylesInAngularJson(angularJsonPath, selectedApp.name, styleLanguage);
+  if (stylesPatched.changed) {
+    changes += 1;
+    console.log(`${COLORS.green}✔ Added node_modules/tailjng/src/styles.css to angular.json${COLORS.reset}`);
+  } else {
+    console.log(`${COLORS.dim}↷ tailjng styles already in angular.json${COLORS.reset}`);
+  }
+
+  if (fileExists(appConfigPath)) {
+    const patched = patchAppConfig(appConfigPath);
+    if (patched.changed) {
+      changes += 1;
+      console.log(`${COLORS.green}✔ Patched app.config.ts (added tailjngProviders)${COLORS.reset}`);
+    }
+
+    const colorsPatched = patchAppConfigColors(appConfigPath, srcRoot);
+    if (colorsPatched.changed) {
+      changes += 1;
+      console.log(`${COLORS.green}✔ Linked tailjngColorsProvider from src/app/tailjng/colors/${COLORS.reset}`);
+    }
+  }
+
+  if (patchIndexHtml(indexPath)) {
+    changes += 1;
+    console.log(`${COLORS.green}✔ Patched index.html (body classes)${COLORS.reset}`);
+  }
+
+  console.log(`\n${COLORS.greenBright}${COLORS.bright}[tailjng CLI] sync:app completed.${COLORS.reset}`);
+  console.log(`${COLORS.dim}Changes applied: ${changes}${COLORS.reset}`);
+
+  if (changes === 0) {
+    console.log(`${COLORS.cyan}Project already up to date with this tailjng version.${COLORS.reset}`);
+  }
+
+  console.log(`\n${COLORS.dim}Tip: update UI components with ${COLORS.cyan}npx tailjng add <name>${COLORS.reset}${COLORS.dim} (asks before overwrite).${COLORS.reset}\n`);
+}
+
+runSyncApp().catch((error) => {
+  console.error(`${COLORS.red}[tailjng CLI] sync:app failed:${COLORS.reset}`, error);
+  process.exit(1);
+});

package/cli/index.js

@@ -18,6 +18,11 @@ async function main() {
         return
     }
 
+    if (command === "sync:app") {
+        require("./execute/sync-app")
+        return
+    }
+
     if (command === "add") {
         const componentName = args[1]
         if (!componentName) {
@@ -53,8 +58,10 @@ function showHelp() {
     console.log(`${COLORS.bright}${COLORS.blue}tailjng CLI${COLORS.reset} v${getPackageVersion(__dirname)}
 
 ${COLORS.bright}Project setup${COLORS.reset}
-  ${COLORS.cyan}npx tailjng init:app${COLORS.reset}                 Configure Tailwind, providers, styles (no UI)
+  ${COLORS.cyan}npx tailjng init:app${COLORS.reset}                 First-time setup (Tailwind, providers, styles)
   ${COLORS.cyan}npx tailjng init:app --with-components${COLORS.reset}  init:app + mode-toggle and alerts
+  ${COLORS.cyan}npx tailjng sync:app${COLORS.reset}                 Update integration after npm upgrade (no overwrite)
+  ${COLORS.cyan}npx tailjng sync:app --no-install${COLORS.reset}     sync:app without npm install
 
 ${COLORS.bright}Components${COLORS.reset} ${COLORS.dim}(run from your Angular app directory)${COLORS.reset}
   ${COLORS.cyan}npx tailjng add${COLORS.reset} ${COLORS.dim}<name>${COLORS.reset}              Install one component + dependencies

package/cli/settings/colors-config-utils.js

@@ -0,0 +1,188 @@
+const fs = require('fs');
+const path = require('path');
+const { COLORS } = require('./colors');
+const { writeFileSafe } = require('./project-utils');
+
+const COLORS_SOURCE_REL = 'src/lib/components/colors-config';
+const COLORS_FILES = ['colors.config.ts', 'colors.safelist.css', 'README.md'];
+
+function getProjectColorsDir(appRoot) {
+  return path.join(appRoot, 'src', 'app', 'tailjng', 'colors');
+}
+
+function resolveTailjngPackageRoot(workspaceRoot) {
+  const fromNodeModules = path.join(workspaceRoot, 'node_modules', 'tailjng', COLORS_SOURCE_REL);
+  if (fs.existsSync(fromNodeModules)) {
+    return path.join(workspaceRoot, 'node_modules', 'tailjng');
+  }
+
+  const fromMonorepo = path.join(workspaceRoot, 'projects', 'tailjng', COLORS_SOURCE_REL);
+  if (fs.existsSync(fromMonorepo)) {
+    return path.join(workspaceRoot, 'projects', 'tailjng');
+  }
+
+  return null;
+}
+
+function getColorsSafelistImportLine(workspaceRoot, styleEntry, appProject) {
+  const appRoot = path.join(workspaceRoot, appProject.root || '');
+  const colorsSafelist = path.join(getProjectColorsDir(appRoot), 'colors.safelist.css');
+
+  let stylePath;
+  if (path.isAbsolute(styleEntry)) {
+    stylePath = styleEntry;
+  } else if (styleEntry.startsWith('projects/')) {
+    stylePath = path.join(workspaceRoot, styleEntry);
+  } else {
+    stylePath = path.join(appRoot, styleEntry);
+  }
+
+  const targetSafelist = fs.existsSync(colorsSafelist)
+    ? colorsSafelist
+    : path.join(workspaceRoot, 'node_modules', 'tailjng', 'src', 'colors.safelist.css');
+
+  let rel = path.relative(path.dirname(stylePath), targetSafelist).split(path.sep).join('/');
+  if (!rel.startsWith('.')) rel = `./${rel}`;
+  return `@import "${rel}";`;
+}
+
+function ensureProjectColorsConfig(workspaceRoot, appRoot, overwrite = false) {
+  const packageRoot = resolveTailjngPackageRoot(workspaceRoot);
+  if (!packageRoot) {
+    console.log(`${COLORS.yellow}[tailjng CLI] WARNING: tailjng package not found — skip colors config copy${COLORS.reset}`);
+    return { created: 0, skipped: 0, colorsDir: getProjectColorsDir(appRoot) };
+  }
+
+  const sourceDir = path.join(packageRoot, COLORS_SOURCE_REL);
+  const colorsDir = getProjectColorsDir(appRoot);
+  let created = 0;
+  let skipped = 0;
+
+  for (const file of COLORS_FILES) {
+    const src = path.join(sourceDir, file);
+    const dest = path.join(colorsDir, file);
+    if (!fs.existsSync(src)) continue;
+
+    const content = fs.readFileSync(src, 'utf8');
+    if (writeFileSafe(dest, content, overwrite)) {
+      created += 1;
+      console.log(`${COLORS.green}✔ Created ${path.relative(workspaceRoot, dest)}${COLORS.reset}`);
+    } else {
+      skipped += 1;
+      console.log(`${COLORS.dim}↷ Skipped (exists) ${path.relative(workspaceRoot, dest)}${COLORS.reset}`);
+    }
+  }
+
+  return { created, skipped, colorsDir };
+}
+
+function ensureColorsSafelistImport(styleFilePath, importLine) {
+  if (!fs.existsSync(styleFilePath)) return { changed: false };
+
+  let content = fs.readFileSync(styleFilePath, 'utf8');
+  const projectImport = /tailjng\/colors\/colors\.safelist\.css/;
+  const npmImport = /node_modules\/tailjng\/src\/colors\.safelist\.css/;
+  const anySafelistImport = /@import\s+"[^"]*colors\.safelist\.css";?/;
+
+  if (projectImport.test(content)) {
+    return { changed: false };
+  }
+
+  if (npmImport.test(content) && projectImport.test(importLine)) {
+    content = content.replace(anySafelistImport, importLine);
+    fs.writeFileSync(styleFilePath, content, 'utf8');
+    return { changed: true, migrated: true };
+  }
+
+  if (content.includes('colors.safelist.css')) {
+    return { changed: false };
+  }
+
+  const tailwindMatch = content.match(/@(?:import|use)\s+"tailwindcss";?/);
+  if (tailwindMatch) {
+    const insertAt = tailwindMatch.index + tailwindMatch[0].length;
+    content = `${content.slice(0, insertAt)}\n${importLine}\n${content.slice(insertAt)}`;
+  } else {
+    content = `${importLine}\n${content}`;
+  }
+
+  fs.writeFileSync(styleFilePath, content, 'utf8');
+  return { changed: true };
+}
+
+function patchTailjngProvidersColors(providersPath) {
+  if (!fs.existsSync(providersPath)) return { changed: false };
+
+  let content = fs.readFileSync(providersPath, 'utf8');
+  if (content.includes('tailjngColorsProvider') || content.includes('../tailjng/colors/colors.config')) {
+    return { changed: false };
+  }
+
+  const lines = content.split('\n');
+  let lastImport = -1;
+  for (let i = 0; i < lines.length; i += 1) {
+    if (lines[i].startsWith('import ')) lastImport = i;
+  }
+
+  const importLine = "import { tailjngColorsProvider } from '../tailjng/colors/colors.config';";
+  if (lastImport === -1) {
+    content = `${importLine}\n${content}`;
+  } else {
+    lines.splice(lastImport + 1, 0, importLine);
+    content = lines.join('\n');
+  }
+
+  if (content.includes('export const tailjngProviders = [')) {
+    content = content.replace(
+      /export const tailjngProviders = \[/,
+      'export const tailjngProviders = [\n  tailjngColorsProvider,',
+    );
+  }
+
+  fs.writeFileSync(providersPath, content, 'utf8');
+  return { changed: true };
+}
+
+function patchAppConfigColors(appConfigPath, srcRoot) {
+  const providersPath = path.join(srcRoot, 'app', 'config', 'tailjng.providers.ts');
+  if (fs.existsSync(providersPath)) {
+    return patchTailjngProvidersColors(providersPath);
+  }
+
+  if (!fs.existsSync(appConfigPath)) return { changed: false };
+
+  let content = fs.readFileSync(appConfigPath, 'utf8');
+  if (content.includes('tailjngColorsProvider') || content.includes('./tailjng/colors/colors.config')) {
+    return { changed: false };
+  }
+
+  const lines = content.split('\n');
+  let lastImport = -1;
+  for (let i = 0; i < lines.length; i += 1) {
+    if (lines[i].startsWith('import ')) lastImport = i;
+  }
+
+  const importLine = "import { tailjngColorsProvider } from './tailjng/colors/colors.config';";
+  if (lastImport === -1) {
+    content = `${importLine}\n${content}`;
+  } else {
+    lines.splice(lastImport + 1, 0, importLine);
+    content = lines.join('\n');
+  }
+
+  if (content.includes('providers: [')) {
+    content = content.replace(/providers:\s*\[/, 'providers: [\n    tailjngColorsProvider,');
+  }
+
+  fs.writeFileSync(appConfigPath, content, 'utf8');
+  return { changed: true };
+}
+
+module.exports = {
+  getProjectColorsDir,
+  getColorsSafelistImportLine,
+  ensureProjectColorsConfig,
+  ensureColorsSafelistImport,
+  patchAppConfigColors,
+  COLORS_FILES,
+};

package/cli/settings/init-packages.js

@@ -0,0 +1,37 @@
+const { execSync } = require('child_process');
+const { COLORS } = require('./colors');
+
+const RUNTIME_PACKAGES = {
+  'lucide-angular': '^0.577.0',
+  'date-fns': '^4.1.0',
+  'exceljs': '^4.4.0',
+  'file-saver': '^2.0.5',
+};
+
+const DEV_PACKAGES = {
+  tailwindcss: '^4.0.9',
+  '@tailwindcss/postcss': '^4.0.9',
+  postcss: '^8.5.3',
+  autoprefixer: '^10.4.20',
+};
+
+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}`);
+
+  execSync(`npm install ${flag} --legacy-peer-deps ${spec}`.replace(/\s+/g, ' ').trim(), {
+    cwd: workspaceRoot,
+    stdio: 'inherit',
+    shell: true,
+  });
+}
+
+module.exports = {
+  RUNTIME_PACKAGES,
+  DEV_PACKAGES,
+  installPackages,
+};

package/cli/settings/project-utils.js

@@ -77,29 +77,13 @@ function resolveStyleFilePath(workspaceRoot, styleEntry, appProject) {
 }
 
 function getTailjngSafelistCssImport(workspaceRoot, styleEntry, appProject) {
-  const stylePath = resolveStyleFilePath(workspaceRoot, styleEntry, appProject);
-  const safelistPath = path.join(workspaceRoot, 'node_modules', 'tailjng', 'src', 'colors.safelist.css');
-  let rel = path.relative(path.dirname(stylePath), safelistPath).split(path.sep).join('/');
-  if (!rel.startsWith('.')) rel = `./${rel}`;
-  return `@import "${rel}";`;
+  const { getColorsSafelistImportLine } = require('./colors-config-utils');
+  return getColorsSafelistImportLine(workspaceRoot, styleEntry, appProject);
 }
 
 function ensureTailjngSafelistImport(styleFilePath, importLine) {
-  if (!fs.existsSync(styleFilePath)) return { changed: false };
-
-  let content = fs.readFileSync(styleFilePath, 'utf8');
-  if (content.includes('colors.safelist.css')) return { changed: false };
-
-  const tailwindMatch = content.match(/@(?:import|use)\s+"tailwindcss";?/);
-  if (tailwindMatch) {
-    const insertAt = tailwindMatch.index + tailwindMatch[0].length;
-    content = `${content.slice(0, insertAt)}\n${importLine}\n${content.slice(insertAt)}`;
-  } else {
-    content = `${importLine}\n${content}`;
-  }
-
-  fs.writeFileSync(styleFilePath, content, 'utf8');
-  return { changed: true };
+  const { ensureColorsSafelistImport } = require('./colors-config-utils');
+  return ensureColorsSafelistImport(styleFilePath, importLine);
 }
 
 function ensureTailjngStylesInAngularJson(angularJsonPath, projectName, styleLanguage) {

package/cli/templates/app.generator.js

@@ -380,4 +380,6 @@ function buildInitFiles(options) {
 module.exports = {
   buildInitFiles,
   buildAppConfigTs,
+  buildPathsJson,
+  buildPathsReadme,
 };