tailjng 0.1.6 → 0.1.8

package/README.md

@@ -12,7 +12,7 @@ Librería UI y utilidades para **Angular 19** con **Tailwind CSS v4**. Modelo h
 |------|-----------|
 | **Config** | `TAILJNG_CONFIG` — `urlBase`, `socketUrl` para API REST |
 | **Colores** | `JColorsService` — variantes (`primary`, `success_soft`, `error_outline`, …) |
-| **Iconos** | `JIconsService` — mapa Lucide usado por los componentes |
+| **Iconos** | Registro `Icons` en `.config/icons/icons.lucide.ts` (copiado con CLI) + componente `JIcon` |
 | **Alertas** | `JAlertDialogService`, `JAlertToastService` |
 | **CRUD / HTTP** | `JGenericCrudService`, `JConverterCrudService`, params, files, error handler |
 | **Transformación** | `JTransformService`, `JCalendarService` — fechas, moneda, tablas |
@@ -112,7 +112,6 @@ export const tailjngProviders = [
 
 ```typescript
 import {
-  JIconsService,
   JColorsService,
   JAlertToastService,
   JGenericCrudService,
@@ -134,7 +133,16 @@ import { JAlertToastComponent } from './tailjng/alert/alert-toast/toast-alert.co
 <JButton [text]="'Guardar'" classes="primary" [icon]="icons.save" (clicked)="save()" />
 ```
 
-### Colores — `src/app/tailjng/colors/`
+### Configuración — `src/app/tailjng/.config/`
+
+Colores e iconos viven fuera de los componentes UI, en subcarpetas de `.config`:
+
+| Subcarpeta | Archivos |
+|------------|----------|
+| `.config/colors/` | `colors.config.ts`, `colors.safelist.css` |
+| `.config/icons/` | `icons.lucide.ts` (clase `Icons`) |
+
+### Colores — `src/app/tailjng/.config/colors/`
 
 Las variantes (`primary`, `success_soft`, …) las resuelve **`JColorsService`**. Tailwind v4 no genera clases solo en runtime, así que cada proyecto tiene una carpeta editable:
 
@@ -143,7 +151,21 @@ Las variantes (`primary`, `success_soft`, …) las resuelve **`JColorsService`**
 | `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`) |
 
-**`init:app`** y **`sync:app`** crean esa carpeta (sin sobrescribir si ya existe), importan `colors.safelist.css` en `styles.css` y registran `tailjngColorsProvider`.
+**`init:app`** y **`sync:app`** crean esa carpeta (sin sobrescribir si ya existe), importan `colors.safelist.css` en tus estilos globales y registran `tailjngColorsProvider`.
+
+Import del safelist según el lenguaje de estilos del proyecto:
+
+```css
+/* styles.css */
+@import "tailwindcss";
+@import "./app/tailjng/.config/colors/colors.safelist.css";
+```
+
+```scss
+/* styles.scss — todos los @use van antes de otras reglas */
+@use "tailwindcss";
+@use "./app/tailjng/.config/colors/colors.safelist.css";
+```
 
 Si falta la carpeta en un proyecto existente:
 
@@ -176,7 +198,7 @@ Uso en componentes:
 `init:app` / `sync:app` registran el provider automáticamente. Manualmente en `app.config.ts`:
 
 ```typescript
-import { tailjngColorsProvider } from './tailjng/colors/colors.config';
+import { tailjngColorsProvider } from './tailjng/.config/colors/colors.config';
 
 providers: [
   tailjngColorsProvider,

package/cli/execute/init-app.js

@@ -33,6 +33,7 @@ const {
   ensureProjectColorsConfig,
   patchAppConfigColors,
 } = require('../settings/colors-config-utils');
+const { ensureProjectIconsConfig } = require('../settings/icons-config-utils');
 
 /** Solo si pasas --with-components (opcional; no es el flujo normal). */
 const OPTIONAL_BASE_COMPONENTS = ['mode-toggle', 'alert-dialog', 'alert-toast'];
@@ -148,7 +149,8 @@ async function runInitApp() {
   // 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}`);
+    const label = animationsAligned.added ? 'Added' : 'Aligned';
+    console.log(`${COLORS.cyan}[tailjng CLI] ${label} @angular/animations → ${animationsAligned.version} (same as @angular/core)${COLORS.reset}`);
     Object.assign(packageJson, readJson(packageJsonPath));
   }
 
@@ -171,6 +173,7 @@ async function runInitApp() {
   }
 
   ensureProjectColorsConfig(workspaceRoot, appRoot, overwrite);
+  ensureProjectIconsConfig(workspaceRoot, appRoot, overwrite);
 
   const hasAppConfig = fileExists(appConfigPath);
   const safelistImport = getTailjngSafelistCssImport(workspaceRoot, primaryStylePath, selectedApp);
@@ -223,7 +226,7 @@ async function runInitApp() {
 
     const colorsPatched = patchAppConfigColors(appConfigPath, srcRoot);
     if (colorsPatched.changed) {
-      console.log(`${COLORS.green}✔ Linked tailjngColorsProvider from src/app/tailjng/colors/${COLORS.reset}`);
+      console.log(`${COLORS.green}✔ Linked tailjngColorsProvider from src/app/tailjng/.config/colors/${COLORS.reset}`);
     }
   }
 

package/cli/execute/sync-app.js

@@ -30,6 +30,10 @@ const {
   patchAppConfigColors,
   COLORS_FILES,
 } = require('../settings/colors-config-utils');
+const {
+  ensureProjectIconsConfig,
+  ICONS_FILES,
+} = require('../settings/icons-config-utils');
 
 function resolveTargetPath(workspaceRoot, appProject, relativePath, appRootRelative = false) {
   const appRoot = path.join(workspaceRoot, appProject.root || '');
@@ -89,7 +93,8 @@ async function runSyncApp() {
   const animationsAligned = alignAngularAnimationsInPackageJson(workspaceRoot);
   if (animationsAligned.changed) {
     changes += 1;
-    console.log(`${COLORS.green}✔ Aligned @angular/animations → ${animationsAligned.version}${COLORS.reset}`);
+    const label = animationsAligned.added ? 'Added' : 'Aligned';
+    console.log(`${COLORS.green}✔ ${label} @angular/animations → ${animationsAligned.version}${COLORS.reset}`);
     Object.assign(packageJson, readJson(packageJsonPath));
   }
 
@@ -137,6 +142,13 @@ async function runSyncApp() {
     console.log(`${COLORS.dim}↷ Project colors config already present${COLORS.reset}`);
   }
 
+  const iconsResult = ensureProjectIconsConfig(workspaceRoot, appRoot, false);
+  if (iconsResult.created > 0) {
+    changes += iconsResult.created;
+  } else if (iconsResult.skipped === ICONS_FILES.length) {
+    console.log(`${COLORS.dim}↷ Project icons config already present${COLORS.reset}`);
+  }
+
   const safelistImport = getTailjngSafelistCssImport(workspaceRoot, primaryStylePath, selectedApp);
   const safelistPatched = ensureTailjngSafelistImport(primaryStyleFullPath, safelistImport);
   if (safelistPatched.changed) {
@@ -167,7 +179,7 @@ async function runSyncApp() {
     const colorsPatched = patchAppConfigColors(appConfigPath, srcRoot);
     if (colorsPatched.changed) {
       changes += 1;
-      console.log(`${COLORS.green}✔ Linked tailjngColorsProvider from src/app/tailjng/colors/${COLORS.reset}`);
+      console.log(`${COLORS.green}✔ Linked tailjngColorsProvider from src/app/tailjng/.config/colors/${COLORS.reset}`);
     }
   }
 

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

@@ -3,11 +3,19 @@ const path = require('path');
 const { COLORS } = require('./colors');
 const { writeFileSafe } = require('./project-utils');
 
-const COLORS_SOURCE_REL = 'src/lib/components/colors-config';
+const CONFIG_DIR = '.config';
+const COLORS_SOURCE_REL = 'src/lib/components/.config/colors';
 const COLORS_FILES = ['colors.config.ts', 'colors.safelist.css', 'README.md'];
+const COLORS_PROVIDER_IMPORT = '../tailjng/.config/colors/colors.config';
+const COLORS_PROVIDER_IMPORT_APP = './tailjng/.config/colors/colors.config';
+const COLORS_SAFELIST_SEGMENT = 'tailjng/.config/colors/colors.safelist.css';
+
+function getProjectConfigDir(appRoot) {
+  return path.join(appRoot, 'src', 'app', 'tailjng', CONFIG_DIR);
+}
 
 function getProjectColorsDir(appRoot) {
-  return path.join(appRoot, 'src', 'app', 'tailjng', 'colors');
+  return path.join(getProjectConfigDir(appRoot), 'colors');
 }
 
 function resolveTailjngPackageRoot(workspaceRoot) {
@@ -24,6 +32,21 @@ function resolveTailjngPackageRoot(workspaceRoot) {
   return null;
 }
 
+function migrateLegacyColorsPaths(content) {
+  return content
+    .replaceAll('../tailjng/colors/colors.config', COLORS_PROVIDER_IMPORT)
+    .replaceAll('./tailjng/colors/colors.config', COLORS_PROVIDER_IMPORT_APP)
+    .replaceAll('tailjng/colors/colors.safelist.css', COLORS_SAFELIST_SEGMENT);
+}
+
+function isScssStyleEntry(styleEntry) {
+  return /\.(scss|sass)$/i.test(styleEntry);
+}
+
+function getSafelistDirective(styleEntry) {
+  return isScssStyleEntry(styleEntry) ? '@use' : '@import';
+}
+
 function getColorsSafelistImportLine(workspaceRoot, styleEntry, appProject) {
   const appRoot = path.join(workspaceRoot, appProject.root || '');
   const colorsSafelist = path.join(getProjectColorsDir(appRoot), 'colors.safelist.css');
@@ -43,7 +66,7 @@ function getColorsSafelistImportLine(workspaceRoot, styleEntry, appProject) {
 
   let rel = path.relative(path.dirname(stylePath), targetSafelist).split(path.sep).join('/');
   if (!rel.startsWith('.')) rel = `./${rel}`;
-  return `@import "${rel}";`;
+  return `${getSafelistDirective(styleEntry)} "${rel}";`;
 }
 
 function ensureProjectColorsConfig(workspaceRoot, appRoot, overwrite = false) {
@@ -80,15 +103,37 @@ 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 migrated = migrateLegacyColorsPaths(content);
+  if (migrated !== content) {
+    content = migrated;
+    fs.writeFileSync(styleFilePath, content, 'utf8');
+    return { changed: true, migrated: true };
+  }
+
+  const isScss = /\.(scss|sass)$/i.test(styleFilePath);
+  const expectedDirective = isScss ? '@use' : '@import';
+  const projectImport = new RegExp(COLORS_SAFELIST_SEGMENT.replace(/\./g, '\\.'));
   const npmImport = /node_modules\/tailjng\/src\/colors\.safelist\.css/;
-  const anySafelistImport = /@import\s+"[^"]*colors\.safelist\.css";?/;
+  const anySafelistImport = /@(?:import|use)\s+"[^"]*colors\.safelist\.css";?/;
+
+  const wrongDirectivePattern = isScss
+    ? /@import\s+"([^"]*colors\.safelist\.css)";?/
+    : /@use\s+"([^"]*colors\.safelist\.css)";?/;
 
-  if (projectImport.test(content)) {
+  if (wrongDirectivePattern.test(content)) {
+    content = content.replace(
+      wrongDirectivePattern,
+      (_, safelistPath) => `${expectedDirective} "${safelistPath}";`,
+    );
+    fs.writeFileSync(styleFilePath, content, 'utf8');
+    return { changed: true, migrated: true };
+  }
+
+  if (projectImport.test(content) && anySafelistImport.test(content)) {
     return { changed: false };
   }
 
-  if (npmImport.test(content) && projectImport.test(importLine)) {
+  if (npmImport.test(content) && importLine.includes(COLORS_SAFELIST_SEGMENT)) {
     content = content.replace(anySafelistImport, importLine);
     fs.writeFileSync(styleFilePath, content, 'utf8');
     return { changed: true, migrated: true };
@@ -114,7 +159,13 @@ 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')) {
+  const migrated = migrateLegacyColorsPaths(content);
+  if (migrated !== content) {
+    fs.writeFileSync(providersPath, migrated, 'utf8');
+    return { changed: true, migrated: true };
+  }
+
+  if (content.includes('tailjngColorsProvider') || content.includes(COLORS_PROVIDER_IMPORT)) {
     return { changed: false };
   }
 
@@ -124,7 +175,7 @@ function patchTailjngProvidersColors(providersPath) {
     if (lines[i].startsWith('import ')) lastImport = i;
   }
 
-  const importLine = "import { tailjngColorsProvider } from '../tailjng/colors/colors.config';";
+  const importLine = `import { tailjngColorsProvider } from '${COLORS_PROVIDER_IMPORT}';`;
   if (lastImport === -1) {
     content = `${importLine}\n${content}`;
   } else {
@@ -152,7 +203,13 @@ function patchAppConfigColors(appConfigPath, srcRoot) {
   if (!fs.existsSync(appConfigPath)) return { changed: false };
 
   let content = fs.readFileSync(appConfigPath, 'utf8');
-  if (content.includes('tailjngColorsProvider') || content.includes('./tailjng/colors/colors.config')) {
+  const migrated = migrateLegacyColorsPaths(content);
+  if (migrated !== content) {
+    fs.writeFileSync(appConfigPath, migrated, 'utf8');
+    return { changed: true, migrated: true };
+  }
+
+  if (content.includes('tailjngColorsProvider') || content.includes(COLORS_PROVIDER_IMPORT_APP)) {
     return { changed: false };
   }
 
@@ -162,7 +219,7 @@ function patchAppConfigColors(appConfigPath, srcRoot) {
     if (lines[i].startsWith('import ')) lastImport = i;
   }
 
-  const importLine = "import { tailjngColorsProvider } from './tailjng/colors/colors.config';";
+  const importLine = `import { tailjngColorsProvider } from '${COLORS_PROVIDER_IMPORT_APP}';`;
   if (lastImport === -1) {
     content = `${importLine}\n${content}`;
   } else {
@@ -179,6 +236,7 @@ function patchAppConfigColors(appConfigPath, srcRoot) {
 }
 
 module.exports = {
+  getProjectConfigDir,
   getProjectColorsDir,
   getColorsSafelistImportLine,
   ensureProjectColorsConfig,

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

@@ -0,0 +1,62 @@
+const fs = require('fs');
+const path = require('path');
+const { COLORS } = require('./colors');
+const { writeFileSafe } = require('./project-utils');
+const { getProjectConfigDir } = require('./colors-config-utils');
+
+const ICONS_SOURCE_REL = 'src/lib/components/.config/icons';
+const ICONS_FILES = ['icons.lucide.ts', 'README.md'];
+
+function getProjectIconsDir(appRoot) {
+  return path.join(getProjectConfigDir(appRoot), 'icons');
+}
+
+function resolveTailjngPackageRoot(workspaceRoot) {
+  const fromNodeModules = path.join(workspaceRoot, 'node_modules', 'tailjng', ICONS_SOURCE_REL);
+  if (fs.existsSync(fromNodeModules)) {
+    return path.join(workspaceRoot, 'node_modules', 'tailjng');
+  }
+
+  const fromMonorepo = path.join(workspaceRoot, 'projects', 'tailjng', ICONS_SOURCE_REL);
+  if (fs.existsSync(fromMonorepo)) {
+    return path.join(workspaceRoot, 'projects', 'tailjng');
+  }
+
+  return null;
+}
+
+function ensureProjectIconsConfig(workspaceRoot, appRoot, overwrite = false) {
+  const packageRoot = resolveTailjngPackageRoot(workspaceRoot);
+  if (!packageRoot) {
+    console.log(`${COLORS.yellow}[tailjng CLI] WARNING: tailjng package not found — skip icons config copy${COLORS.reset}`);
+    return { created: 0, skipped: 0, iconsDir: getProjectIconsDir(appRoot) };
+  }
+
+  const sourceDir = path.join(packageRoot, ICONS_SOURCE_REL);
+  const iconsDir = getProjectIconsDir(appRoot);
+  let created = 0;
+  let skipped = 0;
+
+  for (const file of ICONS_FILES) {
+    const src = path.join(sourceDir, file);
+    const dest = path.join(iconsDir, 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, iconsDir };
+}
+
+module.exports = {
+  getProjectIconsDir,
+  ensureProjectIconsConfig,
+  ICONS_FILES,
+};

package/cli/settings/path-utils.js

@@ -5,8 +5,26 @@ const path = require("path")
 const { getComponentsBasePath } = require("./lib-utils")
 
 const COMPONENTS_SOURCE_PREFIX = "src/lib/components/"
+const CONFIG_SOURCE_PREFIX = "src/lib/components/.config/"
+
+function isConfigPath(componentPath) {
+    return componentPath.startsWith(CONFIG_SOURCE_PREFIX)
+}
 
 function parseComponentPath(componentPath) {
+    if (isConfigPath(componentPath)) {
+        const relativePath = componentPath.replace(CONFIG_SOURCE_PREFIX, "")
+        const pathParts = relativePath.split("/")
+        const componentFolder = pathParts[pathParts.length - 1]
+
+        return {
+            componentFolder,
+            subfolders: [".config", ...pathParts.slice(0, -1)],
+            hasSubfolders: true,
+            fullSubPath: [".config", ...pathParts.slice(0, -1)].join("/"),
+        }
+    }
+
     const relativePath = componentPath.replace(COMPONENTS_SOURCE_PREFIX, "")
     const pathParts = relativePath.split("/")
     const componentFolder = pathParts[pathParts.length - 1]
@@ -21,9 +39,15 @@ function parseComponentPath(componentPath) {
 }
 
 function buildTargetPath(projectRoot, componentName, componentPath) {
-    const pathInfo = parseComponentPath(componentPath)
     const basePath = getComponentsBasePath(projectRoot)
 
+    if (isConfigPath(componentPath)) {
+        const configRel = componentPath.slice(CONFIG_SOURCE_PREFIX.length)
+        return path.join(basePath, ".config", configRel)
+    }
+
+    const pathInfo = parseComponentPath(componentPath)
+
     if (pathInfo.hasSubfolders) {
         return path.join(basePath, pathInfo.fullSubPath, componentName)
     }
@@ -34,4 +58,10 @@ function isComponentInstalled(projectRoot, componentName, componentPath) {
     return fs.existsSync(buildTargetPath(projectRoot, componentName, componentPath))
 }
 
-module.exports = { parseComponentPath, buildTargetPath, isComponentInstalled }
+module.exports = {
+    parseComponentPath,
+    buildTargetPath,
+    isComponentInstalled,
+    isConfigPath,
+    CONFIG_SOURCE_PREFIX,
+}

package/cli/settings/project-utils.js

@@ -260,7 +260,13 @@ function alignAngularAnimationsInPackageJson(workspaceRoot) {
   const aligned = coreInstalled ? `^${coreInstalled}` : coreSpec;
   if (!aligned) return { changed: false };
 
-  if (!deps['@angular/animations']) return { changed: false };
+  if (!deps['@angular/animations']) {
+    deps['@angular/animations'] = aligned;
+    pkg.dependencies = deps;
+    writeJson(pkgPath, pkg);
+    return { changed: true, version: aligned, added: true };
+  }
+
   if (deps['@angular/animations'] === aligned) return { changed: false };
 
   deps['@angular/animations'] = aligned;

package/cli/templates/app.generator.js

@@ -70,16 +70,19 @@ ${buildDefaultThemeBlock()}
 
 .dark {
   --tw-bg-opacity: 1;
-  color: var(--white);
+  color: var(--color-dark-foreground);
 }
 `;
 }
 
 function buildStylesScss(safelistImport = '') {
+  const safelistUse = safelistImport
+    ? safelistImport.replace(/^@import\s+/, '@use ')
+    : '';
   return `@use "tailwindcss";
-${safelistImport ? `${safelistImport}\n` : ''}
 @use "./scss/scroll";
 @use "./scss/input";
+${safelistUse ? `${safelistUse}\n` : ''}
 
 html,
 body {
@@ -104,7 +107,7 @@ ${buildDefaultThemeBlock()}
 
 .dark {
   --tw-bg-opacity: 1;
-  color: var(--white);
+  color: var(--color-dark-foreground);
 }
 `;
 }
@@ -114,8 +117,8 @@ function buildScrollScss() {
   padding-right: 5px;
 
   &::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
+    width: 8px;
+    height: 8px;
   }
 
   &::-webkit-scrollbar-track {