@mimi-ng/cli 0.4.0 → 0.5.0

package/README.md

@@ -79,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)
@@ -99,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)
@@ -107,17 +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 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).
+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.
 
-- **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)
+- **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
 
@@ -130,6 +140,18 @@ Pantallas enteras (inicio de sesión, registro, ajustes…) hechas con los compo
 
 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/index.js

@@ -99,6 +99,7 @@ async function inspect(tree, options) {
         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,
@@ -145,6 +146,11 @@ function updateGlobalCss(plan) {
         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.
@@ -249,6 +255,8 @@ function writeMimiConfig(plan) {
                 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/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.4.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": [
@@ -673,6 +736,7 @@
     },
     "login-01": {
       "type": "block",
+      "kind": "page",
       "files": [
         "blocks/login-01/login-01.ts",
         "blocks/login-01/login-01.html",
@@ -694,6 +758,7 @@
     },
     "login-02": {
       "type": "block",
+      "kind": "page",
       "files": [
         "blocks/login-02/login-02.ts",
         "blocks/login-02/login-02.html",
@@ -712,6 +777,7 @@
     },
     "signup-01": {
       "type": "block",
+      "kind": "page",
       "files": [
         "blocks/signup-01/signup-01.ts",
         "blocks/signup-01/signup-01.html",
@@ -731,6 +797,7 @@
     },
     "otp-01": {
       "type": "block",
+      "kind": "page",
       "files": [
         "blocks/otp-01/otp-01.ts",
         "blocks/otp-01/otp-01.html",
@@ -745,6 +812,7 @@
     },
     "settings-01": {
       "type": "block",
+      "kind": "page",
       "files": [
         "blocks/settings-01/settings-01.ts",
         "blocks/settings-01/settings-01.html",
@@ -768,8 +836,26 @@
         "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",

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

@@ -33,9 +33,18 @@ 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.
+ * Es una página: `ng g mimi login-01` la genera en tu carpeta de páginas (`aliases.pages` de
+ * mimi.json; por defecto, `src/app/pages/login/`, u otro nombre con `--name`) junto con su
+ * archivo de rutas (`login.routes.ts`, con la página en carga diferida), y te da la línea para
+ * `app.routes.ts`:
+ *
+ * ```ts
+ * { path: 'login', loadChildren: () => import('./pages/login/login.routes').then((m) => m.LOGIN_ROUTES) },
+ * ```
+ *
+ * El archivo es tuyo: conecta tu autenticación aquí mismo (en `onSubmit`, inyectando tu
+ * servicio), cambia los textos, quita las redes o agrega campos. Si la usas dentro de otra
+ * página, sus entradas y salidas siguen ahí:
  *
  * ```html
  * <mimi-login-01 [loading]="auth.loading()" [error]="auth.error()" (submitted)="auth.signIn($event)" />

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

@@ -26,9 +26,18 @@ let nextId = 0;
  * login-02 (Block de Mimi): inicio de sesión dividido en dos, con el formulario a un lado y una
  * imagen con un testimonio en vidrio al otro. Diseño: docs/design/Block login-02.dc.html.
  *
- * Es una pantalla: ponla en tus rutas (`{ path: 'login', component: Login02 }`). Da tu imagen con
- * `imageSrc` (y `imageAlt` si no es decorativa). El testimonio está escrito en la plantilla:
- * cámbialo ahí.
+ * Es una página: `ng g mimi login-02` la genera en tu carpeta de páginas (`aliases.pages` de
+ * mimi.json; por defecto, `src/app/pages/login/`, u otro nombre con `--name` si ya tienes la de
+ * login-01) junto con su archivo de rutas (`login.routes.ts`, con la página en carga diferida),
+ * y te da la línea para `app.routes.ts`:
+ *
+ * ```ts
+ * { path: 'login', loadChildren: () => import('./pages/login/login.routes').then((m) => m.LOGIN_ROUTES) },
+ * ```
+ *
+ * Da tu imagen con `imageSrc` (y `imageAlt` si no es decorativa). El testimonio está escrito en
+ * la plantilla: cámbialo ahí. Si la usas dentro de otra página, sus entradas y salidas siguen
+ * ahí:
  *
  * ```html
  * <mimi-login-02 imageSrc="/img/login.jpg" [loading]="auth.loading()" (submitted)="auth.signIn($event)" />

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

@@ -29,9 +29,18 @@ let nextId = 0;
  * otp-01 (Block de Mimi): verificación con un código de 6 dígitos, con reenvío y cuenta
  * regresiva. Diseño: docs/design/Block otp-01.dc.html.
  *
- * Es una pantalla: va después del registro o del inicio de sesión. `verify` sale con el código
- * (al completar los dígitos o con el botón, una sola vez por código); tu app lo comprueba y
- * responde con `status`.
+ * Es una página, que va después del registro o del inicio de sesión: `ng g mimi otp-01` la
+ * genera en tu carpeta de páginas (`aliases.pages` de mimi.json; por defecto, `src/app/pages/otp/`,
+ * u otro nombre con `--name`) junto con su archivo de rutas (`otp.routes.ts`, con la página en
+ * carga diferida), y te da la línea para `app.routes.ts`:
+ *
+ * ```ts
+ * { path: 'otp', loadChildren: () => import('./pages/otp/otp.routes').then((m) => m.OTP_ROUTES) },
+ * ```
+ *
+ * `verify` sale con el código (al completar los dígitos o con el botón, una sola vez por
+ * código); tu app lo comprueba y responde con `status`: conéctalo aquí mismo o, si la usas dentro
+ * de otra página, por sus entradas y salidas:
  *
  * ```html
  * <mimi-otp-01 destination="a••••@example.com" [status]="otp.status()" [loading]="otp.checking()"

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

@@ -167,7 +167,7 @@ export class Pricing01 {
 
   protected readonly classes = computed(() =>
     cn(
-      'flex min-h-svh w-full flex-col items-center gap-7 bg-background px-[18px] pt-9 pb-8 text-foreground md:px-10 md:py-14',
+      'flex w-full flex-col items-center gap-7 bg-background px-[18px] pt-9 pb-8 text-foreground md:px-10 md:py-14',
       this.userClass(),
     ),
   );

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

@@ -146,9 +146,19 @@ let nextId = 0;
  * de peligro, facturación y una barra de «cambios sin guardar».
  * Diseño: docs/design/Block settings-01.dc.html.
  *
- * Es una pantalla: ponla en tus rutas y dale tus datos (`profile`, `preferences`, `sessions`,
- * `plan`). Sin datos, muestra los del ejemplo. «Guardar» emite `saved` con el formulario; las
- * acciones (foto, sesiones, borrar la cuenta, cambiar de plan) son salidas: tu app decide.
+ * Es una página: `ng g mimi settings-01` la genera en tu carpeta de páginas (`aliases.pages` de
+ * mimi.json; por defecto, `src/app/pages/settings/`, u otro nombre con `--name`) junto con su
+ * archivo de rutas (`settings.routes.ts`, con la página en carga diferida), y te da la línea
+ * para `app.routes.ts`:
+ *
+ * ```ts
+ * { path: 'settings', loadChildren: () => import('./pages/settings/settings.routes').then((m) => m.SETTINGS_ROUTES) },
+ * ```
+ *
+ * Dale tus datos (`profile`, `preferences`, `sessions`, `plan`) aquí mismo o, si la usas dentro
+ * de otra página, por sus entradas. Sin datos, muestra los del ejemplo. «Guardar» emite `saved`
+ * con el formulario; las acciones (foto, sesiones, borrar la cuenta, cambiar de plan) son
+ * salidas: tu app decide.
  *
  * ```html
  * <mimi-settings-01 [profile]="me()" [saving]="saving()" (saved)="save($event)" (deleteAccount)="confirmDelete()" />

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

@@ -40,8 +40,18 @@ let nextId = 0;
  * contraseña con reglas, confirmación y un botón que dice qué falta.
  * Diseño: docs/design/Block signup-01.dc.html.
  *
- * Es una pantalla: ponla en tus rutas (`{ path: 'signup', component: Signup01 }`). El texto de
- * los beneficios y los mensajes están en la plantilla y en este archivo: cámbialos aquí.
+ * Es una página: `ng g mimi signup-01` la genera en tu carpeta de páginas (`aliases.pages` de
+ * mimi.json; por defecto, `src/app/pages/signup/`, u otro nombre con `--name`) junto con su
+ * archivo de rutas (`signup.routes.ts`, con la página en carga diferida), y te da la línea para
+ * `app.routes.ts`:
+ *
+ * ```ts
+ * { path: 'signup', loadChildren: () => import('./pages/signup/signup.routes').then((m) => m.SIGNUP_ROUTES) },
+ * ```
+ *
+ * El texto de los beneficios y los mensajes están en la plantilla y en este archivo: cámbialos
+ * aquí, y conecta tu registro en `onSubmit`. Si la usas dentro de otra página, sus entradas y
+ * salidas siguen ahí:
  *
  * ```html
  * <mimi-signup-01 [loading]="auth.loading()" [error]="auth.error()" (submitted)="auth.signUp($event)" />

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

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

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

@@ -0,0 +1,214 @@
+<header class="flex items-center justify-between gap-3 px-4 pt-5 pb-3.5 md:px-8 md:pt-7 md:pb-5">
+  <div class="min-w-0">
+    <h1 class="text-2xl font-extrabold tracking-[-0.03em] md:text-[28px]">Customers</h1>
+    <p class="text-sm text-muted-foreground tabular-nums">{{ subtitle() }}</p>
+  </div>
+  <div class="flex shrink-0 items-center gap-2">
+    <button
+      type="button"
+      mimiBtn
+      variant="outline"
+      class="max-md:hidden"
+      (click)="importCsv.emit()"
+    >
+      <svg
+        aria-hidden="true"
+        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"
+      >
+        <!-- Lucide upload (ISC) -->
+        <path d="M12 3v12" />
+        <path d="m17 8-5-5-5 5" />
+        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+      </svg>
+      Import CSV
+    </button>
+    <button type="button" mimiBtn aria-label="New customer" (click)="newCustomer.emit()">
+      <svg
+        aria-hidden="true"
+        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"
+      >
+        <!-- Lucide plus (ISC) -->
+        <path d="M5 12h14" />
+        <path d="M12 5v14" />
+      </svg>
+      <span class="max-md:hidden">New customer</span>
+    </button>
+  </div>
+</header>
+
+<!-- Escritorio: el resumen y la Data Table. -->
+<div class="flex flex-col gap-4 px-8 pb-8 max-md:hidden">
+  <ul class="flex flex-wrap gap-x-7 gap-y-2" aria-label="Customers by status">
+    @for (item of counts(); track item.id) {
+      <li class="flex items-center gap-2 text-sm">
+        <span aria-hidden="true" [class]="'size-2 rounded-full ' + dotClass(item.tone)"></span>
+        <span class="text-muted-foreground">{{ item.plural }}</span>
+        <span class="font-bold tabular-nums">{{ item.count }}</span>
+      </li>
+    }
+  </ul>
+  <mimi-data-table
+    aria-label="Customers"
+    searchPlaceholder="Search customer, email or ID…"
+    selectable
+    [data]="customers()"
+    [columns]="columns()"
+    [(selection)]="selection"
+  >
+    <ng-template mimiTableCell="name" let-row>
+      <span class="flex min-w-0 flex-col leading-[1.3]">
+        <span class="truncate font-semibold">{{ row.name }}</span>
+        <span class="truncate text-[12.5px] text-muted-foreground">{{ row.email }}</span>
+      </span>
+    </ng-template>
+    <ng-template mimiTableCell="status" let-row>
+      <span mimiBadge variant="soft" [tone]="statusOf(row.status).tone">{{
+        statusOf(row.status).label
+      }}</span>
+    </ng-template>
+    <ng-template mimiTableCell="mrr" let-row>
+      <span class="font-semibold">{{ format(row.mrr) }}</span>
+    </ng-template>
+    <ng-template mimiTableBulk let-ids>
+      <button type="button" mimiBtn variant="outline" size="sm" (click)="exported.emit(ids)">
+        Export
+      </button>
+      <button type="button" mimiBtn tone="danger" size="sm" (click)="deleted.emit(ids)">
+        Delete
+      </button>
+    </ng-template>
+  </mimi-data-table>
+  <p class="text-[12.5px] text-muted-foreground">
+    Select rows to see the bulk actions (Export, Delete). Filter by Status or Plan from the header.
+  </p>
+</div>
+
+<!-- Móvil: búsqueda, píldoras de estado y la lista de tarjetas. -->
+<div class="flex flex-col gap-3 px-4 pb-24 md:hidden">
+  <input
+    mimiInput
+    type="search"
+    aria-label="Search customers"
+    placeholder="Search customer…"
+    [value]="query()"
+    (input)="query.set($any($event.target).value)"
+  />
+  <div role="group" aria-label="Filter by status" class="-mx-4 flex gap-2 overflow-x-auto px-4">
+    <button
+      type="button"
+      class="inline-flex h-8 shrink-0 cursor-pointer items-center gap-1.5 rounded-full border border-border bg-card px-3 text-[13px] font-medium mimi-transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring aria-pressed:border-primary aria-pressed:bg-primary aria-pressed:text-primary-foreground"
+      [attr.aria-pressed]="statusFilter() === null"
+      (click)="statusFilter.set(null)"
+    >
+      All <span class="tabular-nums opacity-70">{{ customers().length }}</span>
+    </button>
+    @for (item of counts(); track item.id) {
+      <button
+        type="button"
+        class="inline-flex h-8 shrink-0 cursor-pointer items-center gap-1.5 rounded-full border border-border bg-card px-3 text-[13px] font-medium mimi-transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring aria-pressed:border-primary aria-pressed:bg-primary aria-pressed:text-primary-foreground"
+        [attr.aria-pressed]="statusFilter() === item.id"
+        (click)="pickStatus(item.id)"
+      >
+        {{ item.plural }} <span class="tabular-nums opacity-70">{{ item.count }}</span>
+      </button>
+    }
+  </div>
+  <div class="flex items-center justify-between text-[13px] text-muted-foreground">
+    <label class="flex items-center gap-2.5">
+      <mimi-checkbox
+        aria-label="Select all"
+        [checked]="allState() === 'all'"
+        [indeterminate]="allState() === 'some'"
+        (checkedChange)="toggleAll($event)"
+      />
+      Select all
+    </label>
+    <span class="tabular-nums" role="status">{{ list().length }} results</span>
+  </div>
+  <ul class="flex flex-col gap-2">
+    @for (customer of list(); track customer.id) {
+      <li
+        class="flex items-center gap-3 rounded-[var(--mimi-radius-card)] border bg-card p-3 data-[selected]:border-info/45 data-[selected]:bg-[color-mix(in_oklab,var(--mimi-info)_8%,var(--mimi-card))]"
+        [attr.data-selected]="isSelected(customer.id) ? '' : null"
+      >
+        <mimi-checkbox
+          [aria-label]="'Select ' + customer.name"
+          [checked]="isSelected(customer.id)"
+          (checkedChange)="toggle(customer.id)"
+        />
+        <span class="flex min-w-0 flex-1 flex-col leading-[1.3]">
+          <span class="truncate text-sm font-semibold">{{ customer.name }}</span>
+          <span class="truncate text-[12.5px] text-muted-foreground tabular-nums"
+            >{{ customer.plan }} · {{ format(customer.mrr) }}</span
+          >
+        </span>
+        <span mimiBadge variant="soft" [tone]="statusOf(customer.status).tone">{{
+          statusOf(customer.status).label
+        }}</span>
+      </li>
+    } @empty {
+      <li
+        class="rounded-[var(--mimi-radius-card)] border border-dashed p-6 text-center text-sm text-muted-foreground"
+      >
+        No customers match.
+      </li>
+    }
+  </ul>
+  @if (selection().length) {
+    <div
+      role="toolbar"
+      aria-label="Bulk actions"
+      class="fixed inset-x-3 bottom-3 z-10 flex items-center gap-2 rounded-[var(--mimi-radius-card)] bg-foreground py-2 pr-2 pl-4 text-background shadow-[shadow:var(--mimi-shadow-popover)]"
+    >
+      <span class="flex-1 text-sm font-semibold tabular-nums" role="status">{{
+        selectedText(selection().length)
+      }}</span>
+      <button
+        type="button"
+        mimiBtn
+        variant="ghost"
+        size="sm"
+        class="text-background hover:bg-background/15 hover:text-background"
+        (click)="exported.emit(selection())"
+      >
+        Export
+      </button>
+      <button
+        type="button"
+        mimiBtn
+        variant="ghost"
+        size="sm"
+        class="text-background hover:bg-background/15 hover:text-background"
+        (click)="deleted.emit(selection())"
+      >
+        Delete
+      </button>
+      <button
+        type="button"
+        mimiBtn
+        variant="ghost"
+        size="sm"
+        class="text-background hover:bg-background/15 hover:text-background"
+        (click)="selection.set([])"
+      >
+        Clear
+      </button>
+    </div>
+  }
+</div>