@mimi-ng/cli 0.3.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
@@ -100,6 +108,17 @@ export class App {}
 - **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('/');

package/dist/registry.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.0",
+  "version": "0.4.0",
   "suggestedDependencies": {
     "@lucide/angular": "^1.47.0"
   },
@@ -670,6 +670,117 @@
         "utils/control-styles",
         "utils/field-state"
       ]
+    },
+    "login-01": {
+      "type": "block",
+      "files": [
+        "blocks/login-01/login-01.ts",
+        "blocks/login-01/login-01.html",
+        "blocks/login-01/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/forms": "^22.0.0"
+      },
+      "registryDependencies": [
+        "button",
+        "card",
+        "checkbox",
+        "form-field",
+        "input",
+        "password",
+        "separator",
+        "utils/cn"
+      ]
+    },
+    "login-02": {
+      "type": "block",
+      "files": [
+        "blocks/login-02/login-02.ts",
+        "blocks/login-02/login-02.html",
+        "blocks/login-02/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/forms": "^22.0.0"
+      },
+      "registryDependencies": [
+        "avatar",
+        "button",
+        "form-field",
+        "input",
+        "utils/cn"
+      ]
+    },
+    "signup-01": {
+      "type": "block",
+      "files": [
+        "blocks/signup-01/signup-01.ts",
+        "blocks/signup-01/signup-01.html",
+        "blocks/signup-01/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/forms": "^22.0.0"
+      },
+      "registryDependencies": [
+        "button",
+        "checkbox",
+        "form-field",
+        "input",
+        "password",
+        "utils/cn"
+      ]
+    },
+    "otp-01": {
+      "type": "block",
+      "files": [
+        "blocks/otp-01/otp-01.ts",
+        "blocks/otp-01/otp-01.html",
+        "blocks/otp-01/index.ts"
+      ],
+      "registryDependencies": [
+        "button",
+        "card",
+        "input-otp",
+        "utils/cn"
+      ]
+    },
+    "settings-01": {
+      "type": "block",
+      "files": [
+        "blocks/settings-01/settings-01.ts",
+        "blocks/settings-01/settings-01.html",
+        "blocks/settings-01/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/forms": "^22.0.0"
+      },
+      "registryDependencies": [
+        "avatar",
+        "badge",
+        "button",
+        "card",
+        "form-field",
+        "input",
+        "progress",
+        "separator",
+        "switch",
+        "tabs",
+        "textarea",
+        "utils/cn"
+      ]
+    },
+    "pricing-01": {
+      "type": "block",
+      "files": [
+        "blocks/pricing-01/pricing-01.ts",
+        "blocks/pricing-01/pricing-01.html",
+        "blocks/pricing-01/index.ts"
+      ],
+      "registryDependencies": [
+        "badge",
+        "button",
+        "toggle-group",
+        "utils/cn"
+      ]
     }
   }
 }

package/dist/templates/blocks/login-01/index.ts

@@ -0,0 +1 @@
+export * from './login-01';

package/dist/templates/blocks/login-01/login-01.html

@@ -0,0 +1,174 @@
+<!-- Trama de puntos de fondo (solo escritorio). La máscara usa solo el canal alfa. -->
+<div
+  aria-hidden="true"
+  class="pointer-events-none absolute inset-0 -z-10 hidden bg-[radial-gradient(color-mix(in_oklab,var(--mimi-foreground)_14%,transparent)_1px,transparent_1px)] bg-size-[18px_18px] mask-[radial-gradient(ellipse_at_50%_40%,var(--mimi-foreground)_30%,transparent_75%)] sm:block"
+></div>
+
+<mimi-card
+  class="w-full gap-[18px] border-0 bg-transparent p-0 shadow-none sm:max-w-[400px] sm:border sm:bg-card sm:p-8 sm:shadow-card"
+>
+  <form
+    novalidate
+    class="flex flex-col gap-[18px]"
+    [attr.aria-labelledby]="id + '-title'"
+    (submit)="onSubmit($event)"
+  >
+    <div class="flex flex-col items-center gap-2.5 text-center">
+      <span
+        aria-hidden="true"
+        class="inline-flex size-10 items-center justify-center rounded-[12px] bg-primary text-[22px] leading-none font-extrabold text-primary-foreground shadow-primary"
+        >m</span
+      >
+      <h1 [id]="id + '-title'" class="text-2xl font-extrabold tracking-[-0.02em]">Sign in</h1>
+      <p class="text-sm text-muted-foreground">Welcome back to Mimi Sales.</p>
+    </div>
+
+    <div class="grid grid-cols-1 gap-2.5 sm:grid-cols-2">
+      <button
+        mimiBtn
+        type="button"
+        variant="outline"
+        tone="secondary"
+        (click)="provider.emit('google')"
+      >
+        <!-- La «G» del diseño, una letra en un círculo (no el logotipo de Google). -->
+        <span
+          aria-hidden="true"
+          class="inline-flex size-[18px] items-center justify-center rounded-full border-[1.5px] border-current text-[11px] font-extrabold"
+          >G</span
+        >
+        Google
+      </button>
+      <button
+        mimiBtn
+        type="button"
+        variant="outline"
+        tone="secondary"
+        (click)="provider.emit('github')"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="17"
+          height="17"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <!-- Lucide github (ISC) -->
+          <path
+            d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
+          />
+          <path d="M9 18c-4.51 2-5-2-7-2" />
+        </svg>
+        GitHub
+      </button>
+    </div>
+
+    <div class="flex items-center gap-3 text-xs text-muted-foreground">
+      <mimi-separator class="w-auto flex-1" />
+      or with your email
+      <mimi-separator class="w-auto flex-1" />
+    </div>
+
+    <mimi-form-field label="Email">
+      <input mimiInput type="email" autocomplete="email" [formField]="login.email" />
+    </mimi-form-field>
+
+    <mimi-form-field class="relative">
+      <label [attr.for]="id + '-password'" class="text-sm font-medium">Password</label>
+      <a
+        [href]="forgotHref()"
+        class="absolute top-0 right-0 rounded-sm text-[13px] font-medium text-muted-foreground underline underline-offset-3 hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        >Forgot it?</a
+      >
+      <mimi-password>
+        <input
+          mimiInput
+          type="password"
+          autocomplete="current-password"
+          [id]="id + '-password'"
+          [formField]="login.password"
+        />
+      </mimi-password>
+    </mimi-form-field>
+
+    <div class="flex items-center gap-2.5">
+      <mimi-checkbox [id]="id + '-remember'" [formField]="login.remember" />
+      <label [attr.for]="id + '-remember'" class="cursor-pointer text-sm"
+        >Remember me for 30 days</label
+      >
+    </div>
+
+    <!-- Siempre en la página: así el lector anuncia el error cuando aparece. -->
+    <div role="alert" class="empty:hidden">
+      @if (error(); as message) {
+        <p
+          class="flex items-start gap-2 rounded-[var(--mimi-radius)] bg-destructive-soft-bg px-3 py-2.5 text-sm text-destructive-soft-foreground"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+            class="mt-0.5 shrink-0"
+          >
+            <!-- Lucide circle-alert (ISC) -->
+            <circle cx="12" cy="12" r="10" />
+            <line x1="12" x2="12" y1="8" y2="12" />
+            <line x1="12" x2="12.01" y1="16" y2="16" />
+          </svg>
+          {{ message }}
+        </p>
+      }
+    </div>
+
+    <button
+      mimiBtn
+      type="submit"
+      class="h-[calc(var(--mimi-control-height,2.5rem)+4px)] text-[15px] font-semibold"
+      [attr.aria-disabled]="loading() ? 'true' : null"
+      [attr.aria-busy]="loading() ? 'true' : null"
+    >
+      @if (loading()) {
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+          class="motion-safe:animate-[mimi-spin_0.8s_linear_infinite]"
+        >
+          <!-- Lucide loader-circle (ISC) -->
+          <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+        </svg>
+        Signing in…
+      } @else {
+        Sign in
+      }
+    </button>
+
+    <p class="text-center text-sm text-muted-foreground">
+      Don't have an account?
+      <a
+        [href]="signupHref()"
+        class="rounded-sm font-semibold text-foreground underline underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        >Sign up</a
+      >
+    </p>
+  </form>
+</mimi-card>

package/dist/templates/blocks/login-01/login-01.ts

@@ -0,0 +1,105 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  booleanAttribute,
+  computed,
+  input,
+  output,
+  signal,
+} from '@angular/core';
+import { FormField, email, form, required } from '@angular/forms/signals';
+import { MimiButton } from '@/components/ui/button';
+import { MimiCard } from '@/components/ui/card';
+import { MimiCheckbox } from '@/components/ui/checkbox';
+import { MimiFormField } from '@/components/ui/form-field';
+import { MimiInput } from '@/components/ui/input';
+import { MimiPassword } from '@/components/ui/password';
+import { MimiSeparator } from '@/components/ui/separator';
+import { cn } from '@/components/ui/utils/cn';
+
+/** Lo que sale al enviar un formulario válido. */
+export interface Login01Value {
+  email: string;
+  password: string;
+  remember: boolean;
+}
+
+/** Proveedores de los botones de redes. */
+export type Login01Provider = 'google' | 'github';
+
+let nextId = 0;
+
+/**
+ * login-01 (Block de Mimi): inicio de sesión centrado con correo, contraseña, «recordarme» y
+ * botones de Google y GitHub. Diseño: docs/design/Block login-01.dc.html.
+ *
+ * Es una pantalla: ponla en tus rutas (`{ path: 'login', component: Login01 }`) y conéctala con
+ * tu autenticación por las salidas. El archivo es tuyo: cambia los textos, quita las redes o
+ * agrega campos aquí mismo.
+ *
+ * ```html
+ * <mimi-login-01 [loading]="auth.loading()" [error]="auth.error()" (submitted)="auth.signIn($event)" />
+ * ```
+ */
+@Component({
+  selector: 'mimi-login-01',
+  imports: [
+    FormField,
+    MimiButton,
+    MimiCard,
+    MimiCheckbox,
+    MimiFormField,
+    MimiInput,
+    MimiPassword,
+    MimiSeparator,
+  ],
+  templateUrl: './login-01.html',
+  host: {
+    '[class]': 'classes()',
+    '[attr.data-state]': 'loading() ? "loading" : null',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Login01 {
+  /** Mientras tu app comprueba las credenciales: el botón dice «Signing in…» y no reenvía. */
+  readonly loading = input(false, { transform: booleanAttribute });
+  /** Error de tu servidor (credenciales incorrectas…), encima del botón. `null`: ninguno. */
+  readonly error = input<string | null>(null);
+  readonly forgotHref = input('#');
+  readonly signupHref = input('#');
+  readonly userClass = input('', { alias: 'class' });
+
+  /** Formulario válido enviado. */
+  readonly submitted = output<Login01Value>();
+  /** Botón de una red pulsado. */
+  readonly provider = output<Login01Provider>();
+
+  protected readonly id = `mimi-login-01-${nextId++}`;
+
+  protected readonly model = signal<Login01Value>({ email: '', password: '', remember: true });
+  protected readonly login = form(this.model, (path) => {
+    required(path.email);
+    email(path.email);
+    required(path.password);
+  });
+
+  protected readonly classes = computed(() =>
+    cn(
+      'relative isolate flex min-h-svh w-full items-center justify-center bg-background px-[22px] py-8 text-foreground sm:bg-muted sm:p-10',
+      this.userClass(),
+    ),
+  );
+
+  protected onSubmit(event: Event): void {
+    event.preventDefault();
+    if (this.loading()) return;
+    const state = this.login();
+    state.markAsTouched();
+    if (state.invalid()) {
+      // El foco va al primer campo con error (el orden del formulario).
+      state.errorSummary()[0]?.fieldTree().focusBoundControl();
+      return;
+    }
+    this.submitted.emit({ ...this.model() });
+  }
+}

package/dist/templates/blocks/login-02/index.ts

@@ -0,0 +1 @@
+export * from './login-02';