@mimi-ng/cli 0.2.0 → 0.4.0

package/README.md

@@ -29,7 +29,7 @@ ng add @mimi-ng/cli
 
 Verifica Angular y Tailwind (si falta algo, se detiene sin modificar nada) y configura el proyecto:
 
-- importa el tema de Mimi en tu CSS global, justo después de `@import "tailwindcss"`;
+- importa el tema de Mimi en tu CSS global, justo después de `@import "tailwindcss"`, y excluye `.mimi/` del escaneo de Tailwind (`@source not "../.mimi";`, con Tailwind 4.1 o superior);
 - agrega el alias `@/components/ui/*` al `tsconfig.json`;
 - registra la CLI en `angular.json`, para que funcione `ng g mimi`;
 - instala `clsx`, `tailwind-merge` y `class-variance-authority` con tu gestor de paquetes;
@@ -37,6 +37,14 @@ Verifica Angular y Tailwind (si falta algo, se detiene sin modificar nada) y con
 
 Con `--icons` instala también [`@lucide/angular`](https://lucide.dev) para tus íconos.
 
+**Si configuraste el CSS a mano, o instalaste con la 0.3.0 o una anterior,** agrega después de `@import "tailwindcss"` (la ruta va de tu CSS global a la carpeta `.mimi/` de la raíz; con `src/styles.css`, así):
+
+```css
+@source not "../.mimi";
+```
+
+Sin esa línea, Tailwind escanea las copias originales de `.mimi/` (van en git) y tu CSS lleva sus clases aunque ya las hayas cambiado. `ng g mimi` te avisa si falta. Necesita Tailwind 4.1 o superior: la 4.0 no entiende `@source not`.
+
 ## Agregar componentes
 
 ```sh
@@ -46,7 +54,7 @@ ng g mimi                     # menú para elegir (terminal interactiva)
 ng g @mimi-ng/cli:ui button   # forma larga (si Mimi no está en schematicCollections)
 ```
 
-Cada componente se copia a `src/app/components/ui/<nombre>`, con lo que necesite, y se instalan las dependencias que falten. Algunos usan por dentro `@angular/cdk` y `@angular/aria`, paquetes oficiales del equipo de Angular: `ng g mimi` los instala cuando hacen falta (aria en la versión exacta de tu cdk) y agrega los estilos del CDK a tu CSS global. Más en [Fundamentos](https://ng.mimiworks.dev/docs/foundations).
+Cada componente se copia a `src/app/components/ui/<nombre>`, con lo que necesite, y se instalan las dependencias que falten. Algunos usan por dentro `@angular/cdk` y `@angular/aria`, paquetes oficiales del equipo de Angular: `ng g mimi` los instala cuando hacen falta (aria en la versión exacta de tu cdk) y agrega los estilos del CDK a tu CSS global. Mimi necesita `@angular/cdk` y `@angular/aria` 22.2.4 o posterior (con 22.2.3, Combobox y Select pueden fallar al destruirse): si ya los tienes en una versión anterior, `ng g mimi` te avisa (no los cambia por ti); actualízalos con `ng update @angular/cdk @angular/aria`. Más en [Fundamentos](https://ng.mimiworks.dev/docs/foundations).
 
 Después lo importas como cualquier otro:
 
@@ -67,25 +75,50 @@ export class App {}
 - **Badge**: `ng g mimi badge` · [documentación](https://ng.mimiworks.dev/docs/components/badge)
 - **Button**: `ng g mimi button` · [documentación](https://ng.mimiworks.dev/docs/components/button)
 - **Card**: `ng g mimi card` · [documentación](https://ng.mimiworks.dev/docs/components/card)
+- **Calendar**: `ng g mimi calendar` · [documentación](https://ng.mimiworks.dev/docs/components/date-picker)
 - **Checkbox**: `ng g mimi checkbox` · [documentación](https://ng.mimiworks.dev/docs/components/switch)
+- **Color Picker**: `ng g mimi color-picker` · [documentación](https://ng.mimiworks.dev/docs/components/color-picker)
+- **Combobox**: `ng g mimi combobox` · [documentación](https://ng.mimiworks.dev/docs/components/combobox)
 - **Confirm**: `ng g mimi confirm` · [documentación](https://ng.mimiworks.dev/docs/components/confirm)
 - **Context Menu**: `ng g mimi context-menu` · [documentación](https://ng.mimiworks.dev/docs/components/context-menu)
+- **Date Picker**: `ng g mimi date-picker` · [documentación](https://ng.mimiworks.dev/docs/components/date-picker)
+- **Date Range**: `ng g mimi date-range` · [documentación](https://ng.mimiworks.dev/docs/components/date-range)
 - **Dialog**: `ng g mimi dialog` · [documentación](https://ng.mimiworks.dev/docs/components/dialog)
 - **Dropdown Menu**: `ng g mimi dropdown-menu` · [documentación](https://ng.mimiworks.dev/docs/components/dropdown-menu)
+- **File Upload**: `ng g mimi file-upload` · [documentación](https://ng.mimiworks.dev/docs/components/file-upload)
 - **FormField**: `ng g mimi form-field` · [documentación](https://ng.mimiworks.dev/docs/components/form-field)
 - **Input**: `ng g mimi input` · [documentación](https://ng.mimiworks.dev/docs/components/input)
+- **Input Mask**: `ng g mimi input-mask` · [documentación](https://ng.mimiworks.dev/docs/components/input-mask)
+- **Input OTP**: `ng g mimi input-otp` · [documentación](https://ng.mimiworks.dev/docs/components/input-otp)
+- **Number Input**: `ng g mimi number-input` · [documentación](https://ng.mimiworks.dev/docs/components/number-input)
 - **Pagination**: `ng g mimi pagination` · [documentación](https://ng.mimiworks.dev/docs/components/pagination)
+- **Password**: `ng g mimi password` · [documentación](https://ng.mimiworks.dev/docs/components/password)
 - **Popover**: `ng g mimi popover` · [documentación](https://ng.mimiworks.dev/docs/components/popover)
+- **Progress**: `ng g mimi progress` · [documentación](https://ng.mimiworks.dev/docs/components/progress)
 - **Select**: `ng g mimi select` · [documentación](https://ng.mimiworks.dev/docs/components/select)
 - **Separator**: `ng g mimi separator` · [documentación](https://ng.mimiworks.dev/docs/components/separator)
 - **Skeleton**: `ng g mimi skeleton` · [documentación](https://ng.mimiworks.dev/docs/components/skeleton)
+- **Slider**: `ng g mimi slider` · [documentación](https://ng.mimiworks.dev/docs/components/slider)
 - **Switch**: `ng g mimi switch` · [documentación](https://ng.mimiworks.dev/docs/components/switch)
 - **Tabs**: `ng g mimi tabs` · [documentación](https://ng.mimiworks.dev/docs/components/tabs)
 - **Textarea**: `ng g mimi textarea` · [documentación](https://ng.mimiworks.dev/docs/components/input)
+- **Tags Input**: `ng g mimi tags-input` · [documentación](https://ng.mimiworks.dev/docs/components/tags-input)
 - **Toast**: `ng g mimi toast` · [documentación](https://ng.mimiworks.dev/docs/components/toast)
+- **Toggle Group**: `ng g mimi toggle-group` · [documentación](https://ng.mimiworks.dev/docs/components/toggle-group)
 - **Toolbar**: `ng g mimi toolbar` · [documentación](https://ng.mimiworks.dev/docs/components/toolbar)
 - **Tooltip**: `ng g mimi tooltip` · [documentación](https://ng.mimiworks.dev/docs/components/tooltip)
 
+## Blocks
+
+Pantallas enteras (inicio de sesión, registro, ajustes…) hechas con los componentes de Mimi. Se agregan con el mismo comando, por ejemplo `ng g mimi` seguido del nombre del Block: la pantalla se copia a `src/app/blocks/<nombre>` (`aliases.blocks` en `mimi.json`) y los componentes que usa, a la carpeta de siempre. Es un componente de página: agrégalo a tus rutas. La pantalla es tuya; si la modificas, `ng g mimi` no la vuelve a tocar al actualizar (te avisa y `--overwrite` la reemplaza entera).
+
+- **login-01** (inicio de sesión centrado, con Google y GitHub): `ng g mimi login-01` · [documentación](https://ng.mimiworks.dev/docs/blocks/login-01)
+- **login-02** (inicio de sesión en dos columnas, con imagen y testimonio): `ng g mimi login-02` · [documentación](https://ng.mimiworks.dev/docs/blocks/login-02)
+- **otp-01** (verificación con un código de 6 dígitos, reenvío y cuenta regresiva): `ng g mimi otp-01` · [documentación](https://ng.mimiworks.dev/docs/blocks/otp-01)
+- **pricing-01** (tres planes con mensual/anual y el plan destacado): `ng g mimi pricing-01` · [documentación](https://ng.mimiworks.dev/docs/blocks/pricing-01)
+- **settings-01** (ajustes de cuenta con secciones, interruptores, sesiones y facturación): `ng g mimi settings-01` · [documentación](https://ng.mimiworks.dev/docs/blocks/settings-01)
+- **signup-01** (registro con validación, medidor de contraseña y confirmación): `ng g mimi signup-01` · [documentación](https://ng.mimiworks.dev/docs/blocks/signup-01)
+
 ## Tus cambios
 
 - Guarda la carpeta `.mimi/` en git: tiene la copia original de cada archivo, y con ella Mimi sabe qué cambiaste tú.

package/dist/init/css.js

@@ -42,7 +42,7 @@ function insertAfterTheme(css, lines) {
     const eol = eolOf(css);
     return css.slice(0, end) + lines.map((line) => eol + line).join('') + css.slice(end);
 }
-/** ¿Ya hay un `@import` o `@source` con esa ruta (con comillas simples o dobles)? */
+/** ¿Ya hay un `@import`, `@source` o `@source not` con esa ruta (comillas simples o dobles)? */
 function hasDirective(css, directive, path) {
     const escaped = path.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
     return new RegExp(`${directive}\\s+(["'])${escaped}\\1`).test(css);

package/dist/init/index.js

@@ -7,6 +7,7 @@ const utility_1 = require("@schematics/angular/utility");
 const json_file_1 = require("@schematics/angular/utility/json-file");
 const registry_1 = require("../registry");
 const project_1 = require("../utils/project");
+const tailwind_1 = require("../utils/tailwind");
 const write_files_1 = require("../utils/write-files");
 const css_1 = require("./css");
 const items_1 = require("./items");
@@ -87,13 +88,17 @@ async function inspect(tree, options) {
     }
     const sourceRoot = (0, paths_1.normalizePath)(project.sourceRoot ?? `${project.root}/src`);
     const mimiConfig = (0, project_1.readJson)(tree, 'mimi.json');
+    if (mimiConfig)
+        (0, project_1.assertAliases)(mimiConfig);
     const componentsDir = (0, paths_1.normalizePath)(mimiConfig?.aliases?.components ?? `${sourceRoot}/app/components/ui`);
     const tsConfig = build?.options?.['tsConfig'];
     return {
         projectName: name,
         cssPath: withTailwind,
         sourceNone: (0, css_1.findTailwindImport)(tree.readText(withTailwind)).sourceNone,
+        sourceNot: (0, tailwind_1.tailwindSupportsSourceNot)(tree, deps['tailwindcss']),
         componentsDir,
+        blocksDir: (0, paths_1.normalizePath)(mimiConfig?.aliases?.blocks ?? (0, project_1.defaultBlocksDir)(componentsDir)),
         buildTsConfig: typeof tsConfig === 'string' ? (0, paths_1.normalizePath)(tsConfig) : undefined,
         mimiConfig,
         sourceRoot,
@@ -134,6 +139,24 @@ function updateGlobalCss(plan) {
             context.logger.warn(`El @import de Tailwind en ${plan.cssPath} usa source(none): Tailwind no escanea nada por su ` +
                 `cuenta. Se agregó @source "${sourcePath}"; para que genere las clases de los componentes.`);
         }
+        // G1: y la carpeta de los Blocks (sin él, un Block queda sin estilos). Tailwind no se queja
+        // si la carpeta todavía no existe.
+        const blocksSourcePath = (0, paths_1.relativePath)(cssDir, plan.blocksDir);
+        if (plan.sourceNone && !(0, css_1.hasDirective)(css, '@source', blocksSourcePath)) {
+            lines.push(`@source "${blocksSourcePath}";`);
+        }
+        // Sin source(none), Tailwind escanea todo el workspace salvo lo que ignora git, y .mimi/ va
+        // en git: las clases de las copias originales acabarían en el CSS aunque el usuario ya las
+        // haya cambiado o quitado en sus componentes.
+        // Con Tailwind 4.0 (no entiende `@source not`) no se escribe: solo se avisa.
+        if ((0, tailwind_1.missingMimiExclusion)(css, plan.cssPath)) {
+            const line = (0, tailwind_1.mimiSourceNotLine)(plan.cssPath);
+            if (plan.sourceNot)
+                lines.push(line);
+            else
+                context.logger.warn(`Tailwind 4.0 escanea ${write_files_1.BASE_DIR}/ y genera CSS de más. Con Tailwind 4.1 o superior, ` +
+                    `agrega ${line} en ${plan.cssPath} (init lo hace si lo vuelves a ejecutar).`);
+        }
         if (lines.length === 0)
             return;
         css = (0, css_1.insertAfterTailwind)(css, lines);
@@ -224,6 +247,8 @@ function writeMimiConfig(plan) {
                 components: plan.componentsDir,
                 utils: `${plan.componentsDir}/utils`,
                 theme: `${plan.sourceRoot}/app/mimi.preset.ts`,
+                // Desde la 0.4.0 (B.1-a). Los proyectos anteriores lo reciben con el primer Block.
+                blocks: plan.blocksDir,
             },
             components: {},
         };

package/dist/init/paths.js

@@ -6,6 +6,7 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizePath = normalizePath;
+exports.invalidAliasReason = invalidAliasReason;
 exports.dirnameOf = dirnameOf;
 exports.relativePath = relativePath;
 /** `src\app\ui\`, `./src/app/ui` o `/src/app/ui` → `src/app/ui`. Resuelve `.` y `..`. */
@@ -21,6 +22,25 @@ function normalizePath(path) {
     }
     return out.join('/');
 }
+/**
+ * M2: un alias de mimi.json (`components`, `blocks`) tiene que ser una ruta relativa a la raíz del
+ * workspace y quedar dentro de él. Devuelve el motivo si no lo es (o null): absoluta (`/x`,
+ * `C:\x`, `\\servidor`, `~/x`), con `..` o vacía. Se comprueba antes de normalizar: normalizePath
+ * convertiría `C:\x` en una carpeta «C:» y quitaría el `/` inicial.
+ */
+function invalidAliasReason(value) {
+    if (typeof value !== 'string' || value.trim() === '')
+        return 'está vacío';
+    const path = value.trim().replace(/\\/g, '/');
+    if (/^[a-zA-Z]:/.test(path) || path.startsWith('/') || path.startsWith('~')) {
+        return 'es una ruta absoluta';
+    }
+    if (path.split('/').includes('..'))
+        return 'tiene «..» (saldría del proyecto)';
+    if (normalizePath(path) === '')
+        return 'apunta a la raíz del workspace';
+    return null;
+}
 /** Carpeta de un archivo: `src/styles.css` → `src`. */
 function dirnameOf(path) {
     const parts = normalizePath(path).split('/');