@mimi-ng/cli 0.3.0 → 0.5.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
@@ -71,8 +79,10 @@ export class App {}
 - **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)
+- **Command**: `ng g mimi command` · [documentación](https://ng.mimiworks.dev/docs/components/command)
 - **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)
+- **Data Table**: `ng g mimi data-table` · [documentación](https://ng.mimiworks.dev/docs/components/data-table)
 - **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)
@@ -91,6 +101,7 @@ export class App {}
 - **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)
+- **Sortable List**: `ng g mimi sortable-list` · [documentación](https://ng.mimiworks.dev/docs/components/sortable-list)
 - **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)
@@ -99,6 +110,24 @@ export class App {}
 - **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)
+- **Tree**: `ng g mimi tree` · [documentación](https://ng.mimiworks.dev/docs/components/tree)
+
+## Blocks
+
+Pantallas y secciones (inicio de sesión, registro, ajustes, precios…) hechas con los componentes de Mimi. Se agregan con el mismo comando, por ejemplo `ng g mimi` seguido del nombre del Block, y los componentes que usan van a la carpeta de siempre.
+
+- **Las páginas** (`login-01`, `login-02`, `otp-01`, `settings-01`, `signup-01`, `table-01`) se generan como una página tuya: `ng g mimi login-01` crea `src/app/pages/login/` (`aliases.pages` en `mimi.json`) con `login.ts`, `login.html` y `login.routes.ts`, y la clase `LoginPage`. Al terminar te da la línea para `app.routes.ts` (la CLI no toca tus rutas). Otro nombre: `--name admin-login`. Si la carpeta ya existe, no la toca y te pide otro nombre.
+- **Las secciones** (`pricing-01`) se copian a `src/app/blocks/<nombre>` (`aliases.blocks`): ponlas dentro de una de tus páginas.
+
+El Block es tuyo; si lo modificas, `ng g mimi` no lo vuelve a tocar al actualizar (te avisa y `--overwrite` lo reemplaza entero). Mimi lo sigue por su nombre (`login-01`) aunque le pongas otro. Si instalaste una pantalla con la 0.4.0, sigue en `src/app/blocks/` y se actualiza ahí.
+
+- **login-01** (página: 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** (página: 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** (página: 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** (sección: 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** (página: 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)
+- **table-01** (página: clientes con la Data Table en escritorio y una lista de tarjetas en móvil): `ng g mimi table-01` · [documentación](https://ng.mimiworks.dev/docs/blocks/table-01)
+- **signup-01** (página: 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
 
@@ -111,6 +140,18 @@ export class App {}
 
 Desde pnpm 10, los scripts de instalación de las dependencias están bloqueados hasta que los apruebes, y la instalación puede fallar con `ERR_PNPM_IGNORED_BUILDS`. Apruébalos con `pnpm approve-builds`. Más detalles en la [página de Instalación](https://ng.mimiworks.dev/docs/installation).
 
+## Si los componentes salen sin estilos
+
+Si `ng build` termina bien pero los componentes salen sin estilos, y el CSS compilado pesa mucho menos de lo normal (en una prueba, unos 33 kB en vez de unos 100 kB), puede que tu sistema bloquee el binario nativo de Tailwind. Lo vimos en Windows, con el Control de aplicaciones, que bloqueó el binario de Tailwind 4.3.5: Tailwind usa entonces un respaldo que no escanea tus archivos, y no da ningún error. No es de Mimi.
+
+Para comprobarlo, busca una clase de tus componentes (por ejemplo `bg-background`) en el `styles-*.css` de `dist/<proyecto>/browser`: si no está, Tailwind no escaneó nada. Para ver si es el bloqueo, carga el binario desde la raíz del proyecto (Windows x64):
+
+```sh
+node -e "require('./node_modules/@tailwindcss/oxide-win32-x64-msvc/tailwindcss-oxide.win32-x64-msvc.node')"
+```
+
+Si falla con `ERR_DLOPEN_FAILED`, permite ese archivo en la política de tu sistema (con quien la administre) o fija una versión de Tailwind cuyo binario cargue; en la prueba donde lo vimos, la 4.3.3: `npm i -D --save-exact tailwindcss@4.3.3 @tailwindcss/postcss@4.3.3`. No desactives la política de seguridad para esto. Con otra versión, o en otro equipo, el resultado puede ser distinto.
+
 ## Licencia
 
 MIT. Incluye íconos de Lucide (ISC); ver `THIRD_PARTY_NOTICES.md`.

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,18 @@ 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)),
+        pagesDir: (0, paths_1.normalizePath)(mimiConfig?.aliases?.pages ?? (0, project_1.defaultPagesDir)(componentsDir)),
         buildTsConfig: typeof tsConfig === 'string' ? (0, paths_1.normalizePath)(tsConfig) : undefined,
         mimiConfig,
         sourceRoot,
@@ -134,6 +140,29 @@ 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}";`);
+        }
+        // B.11-i: y la de las páginas (los Blocks de tipo página).
+        const pagesSourcePath = (0, paths_1.relativePath)(cssDir, plan.pagesDir);
+        if (plan.sourceNone && !(0, css_1.hasDirective)(css, '@source', pagesSourcePath)) {
+            lines.push(`@source "${pagesSourcePath}";`);
+        }
+        // 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 +253,10 @@ 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,
+                // Desde la B.11. Los proyectos anteriores lo reciben con la primera página.
+                pages: plan.pagesDir,
             },
             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.js

@@ -3,10 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.registry = void 0;
+exports.isPageBlock = exports.registry = void 0;
 exports.resolveItems = resolveItems;
 const registry_json_1 = __importDefault(require("./registry.json"));
 exports.registry = registry_json_1.default;
+/** ¿El ítem es un Block que se genera como página (B.11)? */
+const isPageBlock = (name, reg = exports.registry) => reg.items[name]?.type === 'block' && reg.items[name].kind === 'page';
+exports.isPageBlock = isPageBlock;
 /**
  * El ítem y todas sus `registryDependencies`, sin repetir, dependencias primero.
  * Lanza un error si el nombre no existe.

package/dist/registry.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.0",
+  "version": "0.5.0",
   "suggestedDependencies": {
     "@lucide/angular": "^1.47.0"
   },
@@ -265,6 +265,23 @@
         "utils/cn"
       ]
     },
+    "data-table": {
+      "type": "component",
+      "files": [
+        "components/data-table/data-table.ts",
+        "components/data-table/data-table-texts.ts",
+        "components/data-table/index.ts"
+      ],
+      "registryDependencies": [
+        "checkbox",
+        "chip",
+        "dropdown-menu",
+        "input",
+        "pagination",
+        "toggle-group",
+        "utils/cn"
+      ]
+    },
     "input-mask": {
       "type": "component",
       "files": [
@@ -334,6 +351,20 @@
         "utils/cn"
       ]
     },
+    "sortable-list": {
+      "type": "component",
+      "files": [
+        "components/sortable-list/sortable-list.ts",
+        "components/sortable-list/sortable-list-texts.ts",
+        "components/sortable-list/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/cdk": "^22.2.4"
+      },
+      "registryDependencies": [
+        "utils/cn"
+      ]
+    },
     "slider": {
       "type": "component",
       "files": [
@@ -374,6 +405,22 @@
         "utils/overlay"
       ]
     },
+    "command": {
+      "type": "component",
+      "files": [
+        "components/command/command.ts",
+        "components/command/command-texts.ts",
+        "components/command/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/aria": "^22.2.4"
+      },
+      "registryDependencies": [
+        "dialog",
+        "option-list",
+        "utils/cn"
+      ]
+    },
     "calendar": {
       "type": "component",
       "files": [
@@ -655,6 +702,22 @@
         "utils/overlay"
       ]
     },
+    "tree": {
+      "type": "component",
+      "files": [
+        "components/tree/tree.ts",
+        "components/tree/tree-texts.ts",
+        "components/tree/index.ts"
+      ],
+      "peerDependencies": {
+        "@angular/cdk": "^22.2.4",
+        "@angular/forms": "^22.0.0"
+      },
+      "registryDependencies": [
+        "checkbox",
+        "utils/cn"
+      ]
+    },
     "textarea": {
       "type": "component",
       "files": [
@@ -670,6 +733,140 @@
         "utils/control-styles",
         "utils/field-state"
       ]
+    },
+    "login-01": {
+      "type": "block",
+      "kind": "page",
+      "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",
+      "kind": "page",
+      "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",
+      "kind": "page",
+      "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",
+      "kind": "page",
+      "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",
+      "kind": "page",
+      "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"
+      ]
+    },
+    "table-01": {
+      "type": "block",
+      "kind": "page",
+      "files": [
+        "blocks/table-01/table-01.ts",
+        "blocks/table-01/table-01.html",
+        "blocks/table-01/index.ts"
+      ],
+      "registryDependencies": [
+        "badge",
+        "button",
+        "checkbox",
+        "data-table",
+        "input",
+        "utils/cn"
+      ]
+    },
+    "pricing-01": {
+      "type": "block",
+      "kind": "section",
+      "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>