tailjng 0.1.2 → 0.1.4

package/README.md

@@ -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,
@@ -25,25 +25,14 @@ const {
   hasTailwindSetup,
   getTailjngSafelistCssImport,
   ensureTailjngSafelistImport,
+  alignAngularAnimationsInPackageJson,
   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'];
@@ -80,30 +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,
-    });
-  };
-
-  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 || '');
 
@@ -180,12 +145,19 @@ async function runInitApp() {
     console.log(`${COLORS.yellow}Install it first: npm install tailjng${COLORS.reset}`);
   }
 
+  // Siempre alinear @angular/animations con la versión real de @angular/core del proyecto
+  const animationsAligned = alignAngularAnimationsInPackageJson(workspaceRoot);
+  if (animationsAligned.changed) {
+    console.log(`${COLORS.cyan}[tailjng CLI] Aligned @angular/animations → ${animationsAligned.version} (same as @angular/core)${COLORS.reset}`);
+    Object.assign(packageJson, readJson(packageJsonPath));
+  }
+
   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 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));
@@ -198,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);
@@ -246,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,39 @@
+const { execSync } = require('child_process');
+const { COLORS } = require('./colors');
+
+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',
+};
+
+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) {
@@ -244,15 +228,56 @@ function getMergedDependencies(packageJson) {
   return { ...packageJson.dependencies, ...packageJson.devDependencies };
 }
 
-/** Alinea @angular/animations con la línea de @angular/core del proyecto (evita ERESOLVE 19.2.0 vs 19.2.25). */
-function resolveRuntimePackages(packageJson, basePackages) {
+function getInstalledPackageVersion(workspaceRoot, name) {
+  const pkgPath = path.join(workspaceRoot, 'node_modules', ...name.split('/'), 'package.json');
+  if (!fs.existsSync(pkgPath)) return null;
+  try {
+    return JSON.parse(fs.readFileSync(pkgPath, 'utf8')).version;
+  } catch {
+    return null;
+  }
+}
+
+function resolveAngularAnimationsSpec(packageJson, workspaceRoot) {
+  const deps = getMergedDependencies(packageJson);
+  const coreInstalled = workspaceRoot ? getInstalledPackageVersion(workspaceRoot, '@angular/core') : null;
+  if (coreInstalled) return `^${coreInstalled}`;
+  if (deps['@angular/core']) return deps['@angular/core'];
+  return '^19.2.0';
+}
+
+/** Corrige @angular/animations para usar la misma versión que @angular/core del proyecto. */
+function alignAngularAnimationsInPackageJson(workspaceRoot) {
+  const pkgPath = path.join(workspaceRoot, 'package.json');
+  if (!fs.existsSync(pkgPath)) return { changed: false };
+
+  const pkg = readJson(pkgPath);
+  const deps = pkg.dependencies || {};
+  const coreInstalled = getInstalledPackageVersion(workspaceRoot, '@angular/core');
+  const coreSpec = deps['@angular/core'];
+
+  // Preferir versión instalada (ej. 19.2.25); si no, la misma entrada que core en package.json
+  const aligned = coreInstalled ? `^${coreInstalled}` : coreSpec;
+  if (!aligned) return { changed: false };
+
+  if (!deps['@angular/animations']) return { changed: false };
+  if (deps['@angular/animations'] === aligned) return { changed: false };
+
+  deps['@angular/animations'] = aligned;
+  pkg.dependencies = deps;
+  writeJson(pkgPath, pkg);
+  return { changed: true, version: aligned };
+}
+
+/** Alinea @angular/animations con la versión instalada de @angular/core (evita ERESOLVE 19.2.0 vs 19.2.25). */
+function resolveRuntimePackages(packageJson, basePackages, workspaceRoot = null) {
   const packages = { ...basePackages };
   const deps = getMergedDependencies(packageJson);
 
   if (deps['@angular/animations']) {
     delete packages['@angular/animations'];
-  } else if (deps['@angular/core']) {
-    packages['@angular/animations'] = deps['@angular/core'];
+  } else if (deps['@angular/core'] || (workspaceRoot && getInstalledPackageVersion(workspaceRoot, '@angular/core'))) {
+    packages['@angular/animations'] = resolveAngularAnimationsSpec(packageJson, workspaceRoot);
   }
 
   return packages;
@@ -327,6 +352,7 @@ module.exports = {
   getMergedDependencies,
   resolveRuntimePackages,
   resolveDevPackages,
+  alignAngularAnimationsInPackageJson,
   hasTailwindSetup,
   fileExists,
 };

package/cli/templates/app.generator.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailjng",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "peerDependencies": {
     "@angular/common": "^19.2.0",
     "@angular/core": "^19.2.0",

package/registry/components.json

@@ -1,6 +1,6 @@
 {
   "components": {
-    "colors-config": {
+    "colors": {
       "path": "src/lib/components/colors-config",
       "dependencies": []
     },

package/src/colors.safelist.css

@@ -1,4 +1,29 @@
-/* AUTO-GENERATED — do not edit. Run: node scripts/generate-colors-safelist.mjs */
-/* Tailwind v4 safelist for JColorsService dynamic classes (npm bundle). */
+/* AUTO-GENERATED — do not edit blocks 1-N. Run: node scripts/generate-colors-safelist.mjs */
+/* npm fallback — prefer src/app/tailjng/colors/colors.safelist.css in projects */
 
-@source inline("bg-accent/40 bg-background bg-background/80 bg-black/5 bg-blue-50 bg-blue-500 bg-blue-500/10 bg-cyan-500 bg-cyan-500/10 bg-dark-background bg-gray-50 bg-gray-500 bg-gray-500/10 bg-green-50 bg-green-500 bg-green-500/10 bg-none bg-orange-500 bg-orange-500/10 bg-pink-500 bg-pink-500/10 bg-primary bg-primary/10 bg-primary/80 bg-purple-50 bg-purple-500 bg-purple-500/10 bg-red-50 bg-red-500 bg-red-500/10 bg-teal-500 bg-teal-500/10 bg-transparent bg-white bg-yellow-50 bg-yellow-600 bg-yellow-600/10 border border-blue-300 border-blue-500 border-blue-500/20 border-border border-cyan-300 border-cyan-500 border-cyan-500/20 border-dark-border border-dark-border/20 border-gray-400 border-gray-500 border-gray-500/20 border-green-300 border-green-500 border-green-500/20 border-orange-300 border-orange-500 border-orange-500/20 border-pink-300 border-pink-500 border-pink-500/20 border-primary border-primary/20 border-primary/30 border-purple-300 border-purple-400 border-purple-500 border-purple-500/20 border-red-400 border-red-500 border-red-500/20 border-teal-300 border-teal-500 border-teal-500/20 border-transparent border-yellow-500 border-yellow-600 border-yellow-600/20 dark:bg-[#15181e] dark:bg-[#15241f] dark:bg-[#1a1a24] dark:bg-[#1f1c1a] dark:bg-[#21181c] dark:bg-[#241732] dark:bg-dark-accent/30 dark:bg-dark-background dark:bg-dark-background/80 dark:bg-foreground dark:bg-input dark:bg-input/15 dark:bg-input/80 dark:bg-white/10 dark:border-blue-300 dark:border-blue-600 dark:border-border dark:border-border/20 dark:border-cyan-300 dark:border-cyan-600 dark:border-dark-border dark:border-gray-400 dark:border-gray-600 dark:border-green-300 dark:border-green-600 dark:border-input dark:border-input/30 dark:border-input/40 dark:border-orange-300 dark:border-orange-600 dark:border-pink-300 dark:border-pink-600 dark:border-purple-300 dark:border-purple-400 dark:border-purple-600 dark:border-red-400 dark:border-red-600 dark:border-teal-300 dark:border-teal-600 dark:border-transparent dark:border-yellow-500 dark:border-yellow-700 dark:hover:bg-blue-500/15 dark:hover:bg-blue-600/10 dark:hover:bg-border/10 dark:hover:bg-cyan-500/15 dark:hover:bg-cyan-600/10 dark:hover:bg-dark-accent/40 dark:hover:bg-dark-accent/50 dark:hover:bg-dark-background dark:hover:bg-gray-500/15 dark:hover:bg-gray-600/10 dark:hover:bg-green-500/15 dark:hover:bg-green-600/10 dark:hover:bg-input dark:hover:bg-input/15 dark:hover:bg-input/25 dark:hover:bg-input/60 dark:hover:bg-input/80 dark:hover:bg-orange-500/15 dark:hover:bg-orange-600/10 dark:hover:bg-pink-500/15 dark:hover:bg-pink-600/10 dark:hover:bg-purple-500/15 dark:hover:bg-purple-600/10 dark:hover:bg-red-500/15 dark:hover:bg-red-600/10 dark:hover:bg-teal-500/15 dark:hover:bg-teal-600/10 dark:hover:bg-white/10 dark:hover:bg-white/15 dark:hover:bg-yellow-600/15 dark:hover:bg-yellow-700/10 dark:hover:text-white dark:text-blue-400 dark:text-border dark:text-cyan-400 dark:text-gray-400 dark:text-green-400 dark:text-input dark:text-orange-400 dark:text-pink-400 dark:text-purple-400 dark:text-red-400 dark:text-teal-400 dark:text-white dark:text-yellow-400 hover:bg-accent hover:bg-accent/60 hover:bg-accent/70 hover:bg-background hover:bg-black/10 hover:bg-black/5 hover:bg-blue-500/10 hover:bg-blue-500/20 hover:bg-blue-600 hover:bg-cyan-500/10 hover:bg-cyan-500/20 hover:bg-cyan-600 hover:bg-dark-accent/50 hover:bg-dark-border/10 hover:bg-gray-500/10 hover:bg-gray-500/20 hover:bg-gray-600 hover:bg-green-500/10 hover:bg-green-500/20 hover:bg-green-600 hover:bg-orange-500/10 hover:bg-orange-500/20 hover:bg-orange-600 hover:bg-pink-500/10 hover:bg-pink-500/20 hover:bg-pink-600 hover:bg-primary hover:bg-primary/10 hover:bg-primary/20 hover:bg-primary/80 hover:bg-purple-500/10 hover:bg-purple-500/20 hover:bg-purple-600 hover:bg-red-500/10 hover:bg-red-500/20 hover:bg-red-600 hover:bg-teal-500/10 hover:bg-teal-500/20 hover:bg-teal-600 hover:bg-yellow-600/10 hover:bg-yellow-600/20 hover:bg-yellow-700 shadow-md shadow-sm text-black text-blue-500 text-blue-600 text-cyan-500 text-cyan-600 text-dark-border text-gray-500 text-gray-600 text-green-500 text-green-600 text-orange-500 text-orange-600 text-pink-500 text-pink-600 text-primary text-purple-500 text-purple-600 text-red-500 text-red-600 text-teal-500 text-teal-600 text-white text-yellow-500 text-yellow-600 text-yellow-700");
+@layer utilities {
+  .__tailjng_colors_safelist_1__ {
+    @apply bg-accent/40 bg-background bg-background/80 bg-black/5 bg-blue-50 bg-blue-500 bg-blue-500/10 bg-cyan-500 bg-cyan-500/10 bg-dark-background bg-gray-50 bg-gray-500 bg-gray-500/10 bg-green-50 bg-green-500 bg-green-500/10 bg-none bg-orange-500 bg-orange-500/10 bg-pink-500 bg-pink-500/10 bg-primary bg-primary/10 bg-primary/80 bg-purple-50 bg-purple-500 bg-purple-500/10 bg-red-50 bg-red-500 bg-red-500/10 bg-teal-500 bg-teal-500/10 bg-transparent bg-white bg-yellow-50 bg-yellow-600 bg-yellow-600/10 border border-blue-300 border-blue-500 border-blue-500/20 border-border border-cyan-300 border-cyan-500 border-cyan-500/20 border-dark-border border-dark-border/20 border-gray-400 border-gray-500 border-gray-500/20;
+  }
+
+  .__tailjng_colors_safelist_2__ {
+    @apply border-green-300 border-green-500 border-green-500/20 border-orange-300 border-orange-500 border-orange-500/20 border-pink-300 border-pink-500 border-pink-500/20 border-primary border-primary/20 border-primary/30 border-purple-300 border-purple-400 border-purple-500 border-purple-500/20 border-red-400 border-red-500 border-red-500/20 border-teal-300 border-teal-500 border-teal-500/20 border-transparent border-yellow-500 border-yellow-600 border-yellow-600/20 dark:bg-[#15181e] dark:bg-[#15241f] dark:bg-[#1a1a24] dark:bg-[#1f1c1a] dark:bg-[#21181c] dark:bg-[#241732] dark:bg-dark-accent/30 dark:bg-dark-background dark:bg-dark-background/80 dark:bg-foreground dark:bg-input dark:bg-input/15 dark:bg-input/80 dark:bg-white/10 dark:border-blue-300 dark:border-blue-600 dark:border-border dark:border-border/20 dark:border-cyan-300 dark:border-cyan-600 dark:border-dark-border dark:border-gray-400 dark:border-gray-600 dark:border-green-300;
+  }
+
+  .__tailjng_colors_safelist_3__ {
+    @apply dark:border-green-600 dark:border-input dark:border-input/30 dark:border-input/40 dark:border-orange-300 dark:border-orange-600 dark:border-pink-300 dark:border-pink-600 dark:border-purple-300 dark:border-purple-400 dark:border-purple-600 dark:border-red-400 dark:border-red-600 dark:border-teal-300 dark:border-teal-600 dark:border-transparent dark:border-yellow-500 dark:border-yellow-700 dark:hover:bg-blue-500/15 dark:hover:bg-blue-600/10 dark:hover:bg-border/10 dark:hover:bg-cyan-500/15 dark:hover:bg-cyan-600/10 dark:hover:bg-dark-accent/40 dark:hover:bg-dark-accent/50 dark:hover:bg-dark-background dark:hover:bg-gray-500/15 dark:hover:bg-gray-600/10 dark:hover:bg-green-500/15 dark:hover:bg-green-600/10 dark:hover:bg-input dark:hover:bg-input/15 dark:hover:bg-input/25 dark:hover:bg-input/60 dark:hover:bg-input/80 dark:hover:bg-orange-500/15 dark:hover:bg-orange-600/10 dark:hover:bg-pink-500/15 dark:hover:bg-pink-600/10 dark:hover:bg-purple-500/15 dark:hover:bg-purple-600/10 dark:hover:bg-red-500/15 dark:hover:bg-red-600/10 dark:hover:bg-teal-500/15 dark:hover:bg-teal-600/10 dark:hover:bg-white/10 dark:hover:bg-white/15 dark:hover:bg-yellow-600/15 dark:hover:bg-yellow-700/10 dark:hover:text-white;
+  }
+
+  .__tailjng_colors_safelist_4__ {
+    @apply dark:text-blue-400 dark:text-border dark:text-cyan-400 dark:text-gray-400 dark:text-green-400 dark:text-input dark:text-orange-400 dark:text-pink-400 dark:text-purple-400 dark:text-red-400 dark:text-teal-400 dark:text-white dark:text-yellow-400 hover:bg-accent hover:bg-accent/60 hover:bg-accent/70 hover:bg-background hover:bg-black/10 hover:bg-black/5 hover:bg-blue-500/10 hover:bg-blue-500/20 hover:bg-blue-600 hover:bg-cyan-500/10 hover:bg-cyan-500/20 hover:bg-cyan-600 hover:bg-dark-accent/50 hover:bg-dark-border/10 hover:bg-gray-500/10 hover:bg-gray-500/20 hover:bg-gray-600 hover:bg-green-500/10 hover:bg-green-500/20 hover:bg-green-600 hover:bg-orange-500/10 hover:bg-orange-500/20 hover:bg-orange-600 hover:bg-pink-500/10 hover:bg-pink-500/20 hover:bg-pink-600 hover:bg-primary hover:bg-primary/10 hover:bg-primary/20 hover:bg-primary/80 hover:bg-purple-500/10 hover:bg-purple-500/20 hover:bg-purple-600 hover:bg-red-500/10 hover:bg-red-500/20 hover:bg-red-600 hover:bg-teal-500/10;
+  }
+
+  .__tailjng_colors_safelist_5__ {
+    @apply hover:bg-teal-500/20 hover:bg-teal-600 hover:bg-yellow-600/10 hover:bg-yellow-600/20 hover:bg-yellow-700 shadow-md shadow-sm text-black text-blue-500 text-blue-600 text-cyan-500 text-cyan-600 text-dark-border text-gray-500 text-gray-600 text-green-500 text-green-600 text-orange-500 text-orange-600 text-pink-500 text-pink-600 text-primary text-purple-500 text-purple-600 text-red-500 text-red-600 text-teal-500 text-teal-600 text-white text-yellow-500 text-yellow-600 text-yellow-700;
+  }
+
+  /* ── Tus colores custom: descomenta y añade clases Tailwind ── */
+  .__tailjng_custom_colors__ {
+    /* @apply bg-indigo-600 text-white hover:bg-indigo-700; */
+  }
+}

package/src/lib/components/colors-config/README.md

@@ -0,0 +1,38 @@
+# Colores Tailjng — configuración del proyecto
+
+Carpeta generada por `init:app`, `sync:app` o `npx tailjng add colors`.
+
+## Archivos
+
+| Archivo | Para qué |
+|---------|----------|
+| `colors.config.ts` | Variantes (`primary`, `success_soft`, …) + las tuyas (`brand`, etc.) |
+| `colors.safelist.css` | Clases Tailwind que el build debe generar (`@apply`) |
+
+## Añadir un color propio
+
+**1.** En `colors.config.ts`:
+
+```typescript
+brand: 'bg-indigo-600 text-white hover:bg-indigo-700 border border-indigo-500 shadow-md',
+brand_soft: 'bg-indigo-500/10 text-indigo-600 border border-indigo-500/20 shadow-sm',
+```
+
+**2.** En `colors.safelist.css`, dentro del bloque `@layer utilities`:
+
+```css
+.__tailjng_custom_colors__ {
+  @apply bg-indigo-600 text-white hover:bg-indigo-700 border-indigo-500 bg-indigo-500/10 text-indigo-600;
+}
+```
+
+**3.** Uso en componentes:
+
+```html
+<JButton classes="brand" text="Guardar" />
+<JBadge classes="brand_soft" value="N" />
+```
+
+## Provider
+
+`app.config.ts` debe incluir `tailjngColorsProvider` (lo añade `init:app` / `sync:app`).

package/src/lib/components/colors-config/colors.config.ts

@@ -1,19 +1,112 @@
 import { TAILJNG_COLORS_CONFIG } from 'tailjng';
 
 /**
- * Variantes de color personalizadas del proyecto.
- * Uso en componentes: classes="brand" o classes="brand_soft"
+ * Variantes de color — edita las existentes o añade las tuyas al final.
+ * Uso en componentes: classes="primary" | classes="success_soft" | classes="brand"
  *
- * Importante: cada clase Tailwind que uses aquí debe estar también en colors.safelist.css
- * (@source inline) para que el build las genere.
+ * Si añades variantes nuevas con clases Tailwind nuevas, regístralas también
+ * en colors.safelist.css (bloque .__tailjng_custom_colors__).
  */
-export const customColorVariants: Record<string, string> = {
+export const colorVariants: Record<string, string> = {
+
+        primary: 'bg-primary dark:bg-input text-white dark:text-white hover:bg-primary/80 dark:hover:bg-input/60 dark:hover:text-white shadow-md border border-dark-border dark:border-border',
+        primary_soft: 'bg-primary/10 dark:bg-input/15 text-primary dark:text-input hover:bg-primary/20 dark:hover:bg-input/25 border border-primary/20 dark:border-input/30 shadow-sm',
+        primary_outline: 'bg-transparent text-primary dark:text-input border border-primary dark:border-input hover:bg-primary/10 dark:hover:bg-input/15 shadow-sm',
+        primary_ghost: 'bg-transparent text-primary dark:text-input hover:bg-primary/10 dark:hover:bg-input/15 border border-transparent dark:border-transparent',
+        primary_light: 'bg-primary/80 dark:bg-input/80 text-white hover:bg-primary dark:hover:bg-input border border-primary/30 dark:border-input/40 shadow-md',
+        primary_dark: 'bg-primary text-white dark:bg-input hover:bg-primary/80 dark:hover:bg-input/80 border border-dark-border dark:border-border shadow-md',
+
+        primary_secondary: 'bg-none text-dark-border dark:text-border border border-dark-border dark:border-border hover:bg-dark-border/10 dark:hover:bg-border/10 shadow-md',
+
+        secondary: 'bg-background dark:bg-dark-background text-black border border-dark-border dark:border-border dark:text-white hover:bg-accent dark:hover:bg-dark-accent/50',
+        secondary_soft: 'bg-accent/40 dark:bg-dark-accent/30 text-black dark:text-white border border-border dark:border-dark-border hover:bg-accent/70 dark:hover:bg-dark-accent/50 shadow-sm',
+        secondary_outline: 'bg-transparent text-black dark:text-white border border-border dark:border-dark-border hover:bg-accent dark:hover:bg-dark-accent/40 shadow-sm',
+        secondary_ghost: 'bg-transparent text-black dark:text-white hover:bg-accent/60 dark:hover:bg-dark-accent/40 border border-transparent dark:border-transparent',
+        secondary_light: 'bg-background/80 dark:bg-dark-background/80 text-black dark:text-white border border-border dark:border-dark-border hover:bg-background dark:hover:bg-dark-background shadow-sm',
+        secondary_dark: 'bg-dark-background text-white border border-dark-border hover:bg-dark-accent/50 shadow-md',
+
+        success: 'bg-green-500 hover:bg-green-600 text-white border border-green-300 dark:border-green-300 shadow-md',
+        success_secondary: 'bg-none text-green-500 border border-green-500 dark:border-green-600 hover:bg-green-500/10 dark:hover:bg-green-600/10 shadow-md',
+        success_soft: 'bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/20 hover:bg-green-500/20 dark:hover:bg-green-500/15 shadow-sm',
+        success_outline: 'bg-transparent text-green-500 border border-green-500 hover:bg-green-500/10 shadow-sm',
+        success_ghost: 'bg-transparent text-green-500 hover:bg-green-500/10 border border-transparent dark:border-transparent',
+
+        info: 'bg-blue-500 hover:bg-blue-600 text-white border border-blue-300 dark:border-blue-300 shadow-md',
+        info_secondary: 'bg-none text-blue-500 border border-blue-500 dark:border-blue-600 hover:bg-blue-500/10 dark:hover:bg-blue-600/10 shadow-md',
+        info_soft: 'bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/20 hover:bg-blue-500/20 dark:hover:bg-blue-500/15 shadow-sm',
+        info_outline: 'bg-transparent text-blue-500 border border-blue-500 hover:bg-blue-500/10 shadow-sm',
+        info_ghost: 'bg-transparent text-blue-500 hover:bg-blue-500/10 border border-transparent dark:border-transparent',
+
+        warning: 'bg-yellow-600 hover:bg-yellow-700 text-white border border-yellow-500 dark:border-yellow-500 shadow-md',
+        warning_secondary: 'bg-none text-yellow-600 border border-yellow-600 dark:border-yellow-700 hover:bg-yellow-600/10 dark:hover:bg-yellow-700/10 shadow-md',
+        warning_soft: 'bg-yellow-600/10 text-yellow-700 dark:text-yellow-400 border border-yellow-600/20 hover:bg-yellow-600/20 dark:hover:bg-yellow-600/15 shadow-sm',
+        warning_outline: 'bg-transparent text-yellow-600 border border-yellow-600 hover:bg-yellow-600/10 shadow-sm',
+        warning_ghost: 'bg-transparent text-yellow-600 hover:bg-yellow-600/10 border border-transparent dark:border-transparent',
+
+        question: 'bg-purple-500 hover:bg-purple-600 text-white border border-purple-400 dark:border-purple-400 shadow-md',
+        question_secondary: 'bg-none text-purple-500 border border-purple-500 dark:border-purple-600 hover:bg-purple-500/10 dark:hover:bg-purple-600/10 shadow-md',
+        question_soft: 'bg-purple-500/10 text-purple-600 dark:text-purple-400 border border-purple-500/20 hover:bg-purple-500/20 dark:hover:bg-purple-500/15 shadow-sm',
+        question_outline: 'bg-transparent text-purple-500 border border-purple-500 hover:bg-purple-500/10 shadow-sm',
+        question_ghost: 'bg-transparent text-purple-500 hover:bg-purple-500/10 border border-transparent dark:border-transparent',
+
+        error: 'bg-red-500 hover:bg-red-600 text-white border border-red-400 dark:border-red-400 shadow-md',
+        error_secondary: 'bg-none text-red-500 border border-red-500 dark:border-red-600 hover:bg-red-500/10 dark:hover:bg-red-600/10 shadow-md',
+        error_soft: 'bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/20 hover:bg-red-500/20 dark:hover:bg-red-500/15 shadow-sm',
+        error_outline: 'bg-transparent text-red-500 border border-red-500 hover:bg-red-500/10 shadow-sm',
+        error_ghost: 'bg-transparent text-red-500 hover:bg-red-500/10 border border-transparent dark:border-transparent',
+
+        loading: 'bg-gray-500 hover:bg-gray-600 text-white border border-gray-400 dark:border-gray-400 shadow-md',
+        loading_secondary: 'bg-none text-gray-500 border border-gray-500 dark:border-gray-600 hover:bg-gray-500/10 dark:hover:bg-gray-600/10 shadow-md',
+        loading_soft: 'bg-gray-500/10 text-gray-600 dark:text-gray-400 border border-gray-500/20 hover:bg-gray-500/20 dark:hover:bg-gray-500/15 shadow-sm',
+        loading_outline: 'bg-transparent text-gray-500 border border-gray-500 hover:bg-gray-500/10 shadow-sm',
+        loading_ghost: 'bg-transparent text-gray-500 hover:bg-gray-500/10 border border-transparent dark:border-transparent',
+
+        orange: 'bg-orange-500 hover:bg-orange-600 text-white border border-orange-300 dark:border-orange-300 shadow-md',
+        orange_secondary: 'bg-none text-orange-500 border border-orange-500 dark:border-orange-600 hover:bg-orange-500/10 dark:hover:bg-orange-600/10 shadow-md',
+        orange_soft: 'bg-orange-500/10 text-orange-600 dark:text-orange-400 border border-orange-500/20 hover:bg-orange-500/20 dark:hover:bg-orange-500/15 shadow-sm',
+        orange_outline: 'bg-transparent text-orange-500 border border-orange-500 hover:bg-orange-500/10 shadow-sm',
+        orange_ghost: 'bg-transparent text-orange-500 hover:bg-orange-500/10 border border-transparent dark:border-transparent',
+
+        cyan: 'bg-cyan-500 hover:bg-cyan-600 text-white border border-cyan-300 dark:border-cyan-300 shadow-md',
+        cyan_secondary: 'bg-none text-cyan-500 border border-cyan-500 dark:border-cyan-600 hover:bg-cyan-500/10 dark:hover:bg-cyan-600/10 shadow-md',
+        cyan_soft: 'bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 border border-cyan-500/20 hover:bg-cyan-500/20 dark:hover:bg-cyan-500/15 shadow-sm',
+        cyan_outline: 'bg-transparent text-cyan-500 border border-cyan-500 hover:bg-cyan-500/10 shadow-sm',
+        cyan_ghost: 'bg-transparent text-cyan-500 hover:bg-cyan-500/10 border border-transparent dark:border-transparent',
+
+        purple: 'bg-purple-500 hover:bg-purple-600 text-white border border-purple-300 dark:border-purple-300 shadow-md',
+        purple_secondary: 'bg-none text-purple-500 border border-purple-500 dark:border-purple-600 hover:bg-purple-500/10 dark:hover:bg-purple-600/10 shadow-md',
+        purple_soft: 'bg-purple-500/10 text-purple-600 dark:text-purple-400 border border-purple-500/20 hover:bg-purple-500/20 dark:hover:bg-purple-500/15 shadow-sm',
+        purple_outline: 'bg-transparent text-purple-500 border border-purple-500 hover:bg-purple-500/10 shadow-sm',
+        purple_ghost: 'bg-transparent text-purple-500 hover:bg-purple-500/10 border border-transparent dark:border-transparent',
+
+        teal: 'bg-teal-500 hover:bg-teal-600 text-white border border-teal-300 dark:border-teal-300 shadow-md',
+        teal_secondary: 'bg-none text-teal-500 border border-teal-500 dark:border-teal-600 hover:bg-teal-500/10 dark:hover:bg-teal-600/10 shadow-md',
+        teal_soft: 'bg-teal-500/10 text-teal-600 dark:text-teal-400 border border-teal-500/20 hover:bg-teal-500/20 dark:hover:bg-teal-500/15 shadow-sm',
+        teal_outline: 'bg-transparent text-teal-500 border border-teal-500 hover:bg-teal-500/10 shadow-sm',
+        teal_ghost: 'bg-transparent text-teal-500 hover:bg-teal-500/10 border border-transparent dark:border-transparent',
+
+        pink: 'bg-pink-500 hover:bg-pink-600 text-white border border-pink-300 dark:border-pink-300 shadow-md',
+        pink_secondary: 'bg-none text-pink-500 border border-pink-500 dark:border-pink-600 hover:bg-pink-500/10 dark:hover:bg-pink-600/10 shadow-md',
+        pink_soft: 'bg-pink-500/10 text-pink-600 dark:text-pink-400 border border-pink-500/20 hover:bg-pink-500/20 dark:hover:bg-pink-500/15 shadow-sm',
+        pink_outline: 'bg-transparent text-pink-500 border border-pink-500 hover:bg-pink-500/10 shadow-sm',
+        pink_ghost: 'bg-transparent text-pink-500 hover:bg-pink-500/10 border border-transparent dark:border-transparent',
+
+        green: 'bg-green-500 hover:bg-green-600 text-white border border-green-300 dark:border-green-300 shadow-md',
+        green_secondary: 'bg-none text-green-500 border border-green-500 dark:border-green-600 hover:bg-green-500/10 dark:hover:bg-green-600/10 shadow-md',
+        green_soft: 'bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/20 hover:bg-green-500/20 dark:hover:bg-green-500/15 shadow-sm',
+        green_outline: 'bg-transparent text-green-500 border border-green-500 hover:bg-green-500/10 shadow-sm',
+        green_ghost: 'bg-transparent text-green-500 hover:bg-green-500/10 border border-transparent dark:border-transparent',
+
+        default: 'text-black dark:text-white shadow-md border border-dark-border dark:border-border',
+        default_soft: 'bg-black/5 dark:bg-white/10 text-black dark:text-white border border-dark-border/20 dark:border-border/20 hover:bg-black/10 dark:hover:bg-white/15 shadow-sm',
+        default_outline: 'bg-transparent text-black dark:text-white border border-dark-border dark:border-border hover:bg-black/5 dark:hover:bg-white/10 shadow-sm',
+        default_ghost: 'bg-transparent text-black dark:text-white hover:bg-black/5 dark:hover:bg-white/10 border border-transparent dark:border-transparent',
+
+  // ── Custom — añade variantes propias debajo ──
   // brand: 'bg-indigo-600 text-white hover:bg-indigo-700 border border-indigo-500 shadow-md',
 };
 
 export const tailjngColorsProvider = {
   provide: TAILJNG_COLORS_CONFIG,
-  useValue: {
-    variants: customColorVariants,
-  },
+  useValue: { variants: colorVariants },
 };

package/src/lib/components/colors-config/colors.safelist.css

@@ -1,7 +1,29 @@
-/**
- * Safelist Tailwind para variantes personalizadas del proyecto.
- * Añade tus clases al @source inline (Tailwind v4 las incluirá en el build).
- *
- * Generado por: npx tailjng add colors-config
- */
-@source inline("");
+/* AUTO-GENERATED — do not edit blocks 1-N. Run: node scripts/generate-colors-safelist.mjs */
+/* Importar en styles.css DESPUÉS de @import "tailwindcss". */
+
+@layer utilities {
+  .__tailjng_colors_safelist_1__ {
+    @apply bg-accent/40 bg-background bg-background/80 bg-black/5 bg-blue-50 bg-blue-500 bg-blue-500/10 bg-cyan-500 bg-cyan-500/10 bg-dark-background bg-gray-50 bg-gray-500 bg-gray-500/10 bg-green-50 bg-green-500 bg-green-500/10 bg-none bg-orange-500 bg-orange-500/10 bg-pink-500 bg-pink-500/10 bg-primary bg-primary/10 bg-primary/80 bg-purple-50 bg-purple-500 bg-purple-500/10 bg-red-50 bg-red-500 bg-red-500/10 bg-teal-500 bg-teal-500/10 bg-transparent bg-white bg-yellow-50 bg-yellow-600 bg-yellow-600/10 border border-blue-300 border-blue-500 border-blue-500/20 border-border border-cyan-300 border-cyan-500 border-cyan-500/20 border-dark-border border-dark-border/20 border-gray-400 border-gray-500 border-gray-500/20;
+  }
+
+  .__tailjng_colors_safelist_2__ {
+    @apply border-green-300 border-green-500 border-green-500/20 border-orange-300 border-orange-500 border-orange-500/20 border-pink-300 border-pink-500 border-pink-500/20 border-primary border-primary/20 border-primary/30 border-purple-300 border-purple-400 border-purple-500 border-purple-500/20 border-red-400 border-red-500 border-red-500/20 border-teal-300 border-teal-500 border-teal-500/20 border-transparent border-yellow-500 border-yellow-600 border-yellow-600/20 dark:bg-[#15181e] dark:bg-[#15241f] dark:bg-[#1a1a24] dark:bg-[#1f1c1a] dark:bg-[#21181c] dark:bg-[#241732] dark:bg-dark-accent/30 dark:bg-dark-background dark:bg-dark-background/80 dark:bg-foreground dark:bg-input dark:bg-input/15 dark:bg-input/80 dark:bg-white/10 dark:border-blue-300 dark:border-blue-600 dark:border-border dark:border-border/20 dark:border-cyan-300 dark:border-cyan-600 dark:border-dark-border dark:border-gray-400 dark:border-gray-600 dark:border-green-300;
+  }
+
+  .__tailjng_colors_safelist_3__ {
+    @apply dark:border-green-600 dark:border-input dark:border-input/30 dark:border-input/40 dark:border-orange-300 dark:border-orange-600 dark:border-pink-300 dark:border-pink-600 dark:border-purple-300 dark:border-purple-400 dark:border-purple-600 dark:border-red-400 dark:border-red-600 dark:border-teal-300 dark:border-teal-600 dark:border-transparent dark:border-yellow-500 dark:border-yellow-700 dark:hover:bg-blue-500/15 dark:hover:bg-blue-600/10 dark:hover:bg-border/10 dark:hover:bg-cyan-500/15 dark:hover:bg-cyan-600/10 dark:hover:bg-dark-accent/40 dark:hover:bg-dark-accent/50 dark:hover:bg-dark-background dark:hover:bg-gray-500/15 dark:hover:bg-gray-600/10 dark:hover:bg-green-500/15 dark:hover:bg-green-600/10 dark:hover:bg-input dark:hover:bg-input/15 dark:hover:bg-input/25 dark:hover:bg-input/60 dark:hover:bg-input/80 dark:hover:bg-orange-500/15 dark:hover:bg-orange-600/10 dark:hover:bg-pink-500/15 dark:hover:bg-pink-600/10 dark:hover:bg-purple-500/15 dark:hover:bg-purple-600/10 dark:hover:bg-red-500/15 dark:hover:bg-red-600/10 dark:hover:bg-teal-500/15 dark:hover:bg-teal-600/10 dark:hover:bg-white/10 dark:hover:bg-white/15 dark:hover:bg-yellow-600/15 dark:hover:bg-yellow-700/10 dark:hover:text-white;
+  }
+
+  .__tailjng_colors_safelist_4__ {
+    @apply dark:text-blue-400 dark:text-border dark:text-cyan-400 dark:text-gray-400 dark:text-green-400 dark:text-input dark:text-orange-400 dark:text-pink-400 dark:text-purple-400 dark:text-red-400 dark:text-teal-400 dark:text-white dark:text-yellow-400 hover:bg-accent hover:bg-accent/60 hover:bg-accent/70 hover:bg-background hover:bg-black/10 hover:bg-black/5 hover:bg-blue-500/10 hover:bg-blue-500/20 hover:bg-blue-600 hover:bg-cyan-500/10 hover:bg-cyan-500/20 hover:bg-cyan-600 hover:bg-dark-accent/50 hover:bg-dark-border/10 hover:bg-gray-500/10 hover:bg-gray-500/20 hover:bg-gray-600 hover:bg-green-500/10 hover:bg-green-500/20 hover:bg-green-600 hover:bg-orange-500/10 hover:bg-orange-500/20 hover:bg-orange-600 hover:bg-pink-500/10 hover:bg-pink-500/20 hover:bg-pink-600 hover:bg-primary hover:bg-primary/10 hover:bg-primary/20 hover:bg-primary/80 hover:bg-purple-500/10 hover:bg-purple-500/20 hover:bg-purple-600 hover:bg-red-500/10 hover:bg-red-500/20 hover:bg-red-600 hover:bg-teal-500/10;
+  }
+
+  .__tailjng_colors_safelist_5__ {
+    @apply hover:bg-teal-500/20 hover:bg-teal-600 hover:bg-yellow-600/10 hover:bg-yellow-600/20 hover:bg-yellow-700 shadow-md shadow-sm text-black text-blue-500 text-blue-600 text-cyan-500 text-cyan-600 text-dark-border text-gray-500 text-gray-600 text-green-500 text-green-600 text-orange-500 text-orange-600 text-pink-500 text-pink-600 text-primary text-purple-500 text-purple-600 text-red-500 text-red-600 text-teal-500 text-teal-600 text-white text-yellow-500 text-yellow-600 text-yellow-700;
+  }
+
+  /* ── Tus colores custom: descomenta y añade clases Tailwind ── */
+  .__tailjng_custom_colors__ {
+    /* @apply bg-indigo-600 text-white hover:bg-indigo-700; */
+  }
+}

package/src/lib/components/colors-config/colors-config.component.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-/**
- * Configuración de colores/variantes Tailwind del proyecto (sin UI).
- * Los archivos útiles son colors.config.ts y colors.safelist.css en esta carpeta.
- */
-@Component({
-  selector: 'j-colors-config',
-  standalone: true,
-  template: '',
-})
-export class JColorsConfigComponent {}