@mimi-ng/cli 0.2.0 → 0.4.0

package/dist/templates/theme/types.ts

@@ -352,6 +352,209 @@ export interface MimiPaginationTokens {
   blur?: string;
 }
 
+/**
+ * Toggle Group. Fondo, textos, indicador y su sombra van en el CSS (`--mimi-toggle-group-bg`,
+ * `-fg`, `-active-fg`, `-indicator`, `-indicator-shadow`).
+ */
+export interface MimiToggleGroupTokens {
+  /** Radio de cada ítem y del indicador (el global `radius`); el del grupo es radio + relleno. */
+  radius?: string;
+  /** Relleno del grupo (3px). */
+  padding?: string;
+  /** Separación entre ítems (2px). */
+  gap?: string;
+  /** Alto de cada ítem (32px). */
+  itemHeight?: string;
+  /** Relleno horizontal de cada ítem (12px). */
+  itemPx?: string;
+  /** Ancho mínimo de un ítem (el de uno solo con ícono, 44px). */
+  iconWidth?: string;
+  /** Tamaño de texto (13.5px). */
+  fontSize?: string;
+  /** Curva del indicador (`cubic-bezier(.3, 1.35, .5, 1)`, la de Tabs). */
+  spring?: string;
+}
+
+/**
+ * Progress. La pista y la parte llena van en el CSS (`--mimi-progress-track`, `-fill`).
+ */
+export interface MimiProgressTokens {
+  /** Grosor de la barra (8px). */
+  height?: string;
+  /** Tamaño del círculo `default` (76px). */
+  circleSize?: string;
+  /** Grosor del trazo del círculo `default`, en unidades del viewBox de 36 (3). */
+  circleWidth?: string | number;
+}
+
+/**
+ * Number Input. El fondo del botón en hover va en el CSS (`--mimi-number-button-hover`); el
+ * borde, el fondo y los anillos son los de Input (globales).
+ */
+export interface MimiNumberInputTokens {
+  /** Altura (el alto de control). */
+  height?: string;
+  /** Radio de la caja (el global `radius`). */
+  radius?: string;
+  /** Relleno horizontal de la caja (4px). */
+  px?: string;
+  /** Tamaño de los botones − y + (30px). */
+  buttonSize?: string;
+  /** Radio de los botones (el global `radius-sm`). */
+  buttonRadius?: string;
+}
+
+/**
+ * Password. El hover del botón y la pista del medidor van en el CSS
+ * (`--mimi-password-toggle-hover`, `-meter-track`); los colores de los niveles son los globales
+ * `--mimi-strength-*`.
+ */
+export interface MimiPasswordTokens {
+  /** Botón de mostrar u ocultar (32px). */
+  toggleSize?: string;
+  /** Radio del botón (el global `radius-sm`). */
+  toggleRadius?: string;
+  /** Alto de cada barra del medidor (6px). */
+  meterHeight?: string;
+  /** Separación entre barras (4px). */
+  meterGap?: string;
+}
+
+/**
+ * Input Mask. El color del marcador y el fondo del prefijo van en el CSS
+ * (`--mimi-mask-placeholder`, `-prefix-bg`); la caja usa los tokens de Input.
+ */
+export interface MimiInputMaskTokens {
+  /** Separación entre el prefijo, el ícono y el texto (8px). */
+  gap?: string;
+  /** Alto del prefijo (26px). */
+  prefixHeight?: string;
+  /** Radio del prefijo (el global `radius-sm`). */
+  prefixRadius?: string;
+}
+
+/**
+ * Input OTP. Fondo, borde, separador y cursor van en el CSS (`--mimi-otp-bg`, `-border`,
+ * `-separator`, `-caret`).
+ */
+export interface MimiInputOtpTokens {
+  /** Ancho de la casilla (46px). */
+  width?: string;
+  /** Alto de la casilla (54px). */
+  height?: string;
+  /** Separación entre casillas (8px). */
+  gap?: string;
+  /** Radio (el global `radius`). */
+  radius?: string;
+  /** Tamaño del carácter (22px). */
+  fontSize?: string;
+}
+
+/** Chip (Tags Input y Combobox). Los colores van en el CSS (`--mimi-chip-bg`, `-fg`). */
+export interface MimiChipTokens {
+  /** Alto (26px). */
+  height?: string;
+  /** Radio (el global `badge-radius`). */
+  radius?: string;
+  /** Tamaño de texto (13px). */
+  fontSize?: string;
+  /** Botón de quitar (18px). */
+  removeSize?: string;
+}
+
+/** Tags Input. El borde con el límite alcanzado va en el CSS (`--mimi-tags-full-border`). */
+export interface MimiTagsInputTokens {
+  /** Separación entre chips (6px). */
+  gap?: string;
+  /** Relleno de la caja (`5px 10px 5px 6px`). */
+  padding?: string;
+  /** Ancho mínimo del campo de texto (120px). */
+  inputMinWidth?: string;
+}
+
+/**
+ * Slider. Pista, relleno, pulgar y su sombra van en el CSS (`--mimi-slider-track`, `-fill`,
+ * `-thumb`, `-thumb-shadow`); la burbuja usa los colores de Tooltip.
+ */
+export interface MimiSliderTokens {
+  /** Grosor de la pista (6px). */
+  height?: string;
+  /** Tamaño del pulgar (20px). */
+  thumbSize?: string;
+}
+
+/**
+ * Combobox. El fondo y la sombra del panel y la opción activa van en el CSS
+ * (`--mimi-combobox-menu-bg`, `-menu-shadow`, `-option-hover`).
+ */
+export interface MimiComboboxTokens {
+  /** Alto del campo (el global `control-height`). */
+  height?: string;
+  /** Radio del campo y del panel (el global `radius`). */
+  radius?: string;
+  /** Alto máximo del panel (228px). */
+  menuMaxHeight?: string;
+  /** Alto mínimo de cada opción (34px). */
+  optionHeight?: string;
+  /** Radio de cada opción (el global `radius-sm`). */
+  optionRadius?: string;
+}
+
+/**
+ * Calendario, Date Picker y Date Range (una tabla, decidido por defecto en la G2.9). Los colores
+ * van en el CSS (`--mimi-date-cell-hover`, `-selected-bg`, `-selected-fg`, `-range`,
+ * `-today-ring`, `-menu-bg`, `-menu-shadow`).
+ */
+export interface MimiDateTokens {
+  /** Tamaño de cada día (36px). */
+  cellSize?: string;
+  /** Radio de cada día (el global `radius-sm`). */
+  cellRadius?: string;
+  /** Relleno del panel (12px). */
+  padding?: string;
+  /** Ancho de la columna de atajos del rango (130px). */
+  presetsWidth?: string;
+}
+
+/**
+ * File Upload. Fondos y bordes de la zona van en el CSS (`--mimi-upload-bg`, `-border`,
+ * `-active-bg`, `-active-border`).
+ */
+export interface MimiFileUploadTokens {
+  /** Radio de la zona (el global `radius-card`). */
+  radius?: string;
+  /** Alto mínimo de la zona (176px). */
+  height?: string;
+  /** Círculo del ícono (44px). */
+  iconSize?: string;
+  /** Radio de cada fila (el global `radius`). */
+  itemRadius?: string;
+  /** Miniatura de cada fila (44px). */
+  thumbSize?: string;
+}
+
+/**
+ * Color Picker. Fondo, sombra, el borde y la sombra de los pulgares y el borde de las muestras
+ * van en el CSS (`--mimi-color-picker-bg`, `-shadow`, `-thumb-border`, `-thumb-shadow`,
+ * `-swatch-border`).
+ */
+export interface MimiColorPickerTokens {
+  /** Radio del panel (el global `radius`). */
+  radius?: string;
+  /** Ancho del panel (280px). */
+  width?: string;
+  /** Relleno y separación (12px). */
+  padding?: string;
+  /** Alto del área de saturación (150px). */
+  areaHeight?: string;
+  /** Radio del área (el global `radius-sm`). */
+  areaRadius?: string;
+  /** Alto de la barra de tono (12px). */
+  hueHeight?: string;
+  /** Separación de las muestras (6px). */
+  swatchGap?: string;
+}
+
 /**
  * Tokens por componente (spec 13). Solo los que no dependen del modo: los colores de los
  * componentes (`--mimi-<prefijo>-bg`, `-fg`, `-border`…) se cambian en el CSS (spec 6.2).
@@ -378,6 +581,19 @@ export interface MimiComponentTokens {
   tabs?: MimiTabsTokens;
   toolbar?: MimiToolbarTokens;
   pagination?: MimiPaginationTokens;
+  toggleGroup?: MimiToggleGroupTokens;
+  progress?: MimiProgressTokens;
+  numberInput?: MimiNumberInputTokens;
+  password?: MimiPasswordTokens;
+  inputMask?: MimiInputMaskTokens;
+  inputOtp?: MimiInputOtpTokens;
+  chip?: MimiChipTokens;
+  tagsInput?: MimiTagsInputTokens;
+  slider?: MimiSliderTokens;
+  combobox?: MimiComboboxTokens;
+  date?: MimiDateTokens;
+  fileUpload?: MimiFileUploadTokens;
+  colorPicker?: MimiColorPickerTokens;
 }
 
 export interface MimiThemePreset {

package/dist/templates/utils/overlay.ts

@@ -36,9 +36,21 @@ function connectedPosition(
     : { originX: 'start', originY: y, overlayX: 'end', overlayY: y, offsetX: -offset };
 }
 
+/** Las otras alineaciones, en orden de preferencia (la opuesta antes que el centro). */
+const FALLBACK_ALIGNS: Record<MimiOverlayAlign, MimiOverlayAlign[]> = {
+  start: ['end', 'center'],
+  end: ['start', 'center'],
+  center: ['start', 'end'],
+};
+
 /**
- * Posiciones para el CDK, en orden de preferencia: el lado y la alineación pedidos, el lado
- * opuesto y, por último, los otros dos lados centrados. `offset` es la separación con el trigger.
+ * Posiciones para el CDK, en orden de preferencia: el lado pedido con la alineación pedida y
+ * después con las otras dos; el lado opuesto, igual; y, por último, los otros dos lados
+ * centrados. `offset` es la separación con el trigger.
+ *
+ * Las otras alineaciones del mismo lado (5.17a) evitan que en una pantalla chica el panel se
+ * salga por un costado: en 360px, un menú de 240px alineado al inicio de un trigger cercano al
+ * borde derecho no cabía en ninguna de las cuatro posiciones de antes y el CDK lo dejaba fuera.
  */
 export function mimiConnectedPositions(
   side: MimiOverlaySide,
@@ -47,9 +59,10 @@ export function mimiConnectedPositions(
 ): ConnectedPosition[] {
   const others: MimiOverlaySide[] =
     side === 'top' || side === 'bottom' ? ['right', 'left'] : ['bottom', 'top'];
+  const aligns = [align, ...FALLBACK_ALIGNS[align]];
   return [
-    connectedPosition(side, align, offset),
-    connectedPosition(OPPOSITE[side], align, offset),
+    ...aligns.map((a) => connectedPosition(side, a, offset)),
+    ...aligns.map((a) => connectedPosition(OPPOSITE[side], a, offset)),
     ...others.map((other) => connectedPosition(other, 'center', offset)),
   ];
 }

package/dist/ui/index.js

@@ -9,12 +9,17 @@ const items_1 = require("../init/items");
 const paths_1 = require("../init/paths");
 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");
-/** Componentes que se pueden agregar: los ítems `component` del registro. */
-exports.AVAILABLE = Object.entries(registry_1.registry.items)
-    .filter(([, item]) => item.type === 'component')
+const namesOf = (type) => Object.entries(registry_1.registry.items)
+    .filter(([, item]) => item.type === type)
     .map(([name]) => name)
     .sort();
+/**
+ * Lo que se puede agregar: los ítems `component` del registro y, después, los `block` (B.1-c;
+ * el mismo orden que el x-prompt).
+ */
+exports.AVAILABLE = [...namesOf('component'), ...namesOf('block')];
 /**
  * `ng g mimi button input form-field`: copia los componentes y sus dependencias del registro a la
  * carpeta de mimi.json. Sin nombres, pregunta (x-prompt de selección múltiple).
@@ -34,12 +39,14 @@ function ui(options) {
                 items: [...plan.items, ...plan.implicit],
                 implicit: plan.implicit,
                 componentsDir: plan.componentsDir,
+                blocksDir: plan.blocksDir,
                 overwrite: options.overwrite ?? false,
                 version: registry_1.registry.version,
                 report,
             }),
             updateMimiConfig(plan, report),
             updateGlobalCss(plan),
+            addBlocksSource(plan),
             ...Object.entries(plan.newPackages).map(([name, version]) => (0, utility_1.addDependency)(name, version, {
                 type: utility_1.DependencyType.Default,
                 existing: utility_1.ExistingBehavior.Skip,
@@ -56,6 +63,7 @@ function inspect(tree, options) {
         throw new schematics_1.SchematicsException('Mimi no está configurado en este proyecto (falta mimi.json). Ejecuta primero:\n' +
             '  ng add @mimi-ng/cli');
     }
+    (0, project_1.assertAliases)(config);
     const requested = [...new Set((options.components ?? []).map((name) => name.trim()))].filter(Boolean);
     if (requested.length === 0) {
         throw new schematics_1.SchematicsException(`Indica qué componentes agregar, por ejemplo: ng g mimi button\nDisponibles: ${exports.AVAILABLE.join(', ')}.`);
@@ -64,7 +72,7 @@ function inspect(tree, options) {
     if (unknown.length > 0) {
         const lines = unknown.map((name) => {
             const suggestion = closest(name);
-            return `"${name}" no es un componente de Mimi.${suggestion ? ` ¿Quisiste decir ${suggestion}?` : ''}`;
+            return `"${name}" no es un componente ni un Block de Mimi.${suggestion ? ` ¿Quisiste decir ${suggestion}?` : ''}`;
         });
         throw new schematics_1.SchematicsException(`${lines.join('\n')}\nDisponibles: ${exports.AVAILABLE.join(', ')}.`);
     }
@@ -103,7 +111,132 @@ function inspect(tree, options) {
     }
     const implicit = [...new Set(items_1.INIT_ITEMS.flatMap((item) => (0, registry_1.resolveItems)(item)))].filter((item) => !items.includes(item));
     const componentsDir = (0, paths_1.normalizePath)(config.aliases?.components ?? 'src/app/components/ui');
-    return { componentsDir, config, items, implicit, newPackages };
+    const blocksDir = (0, paths_1.normalizePath)(config.aliases?.blocks ?? (0, project_1.defaultBlocksDir)(componentsDir));
+    const outdated = outdatedPeers(tree, items, installed, newPackages);
+    const updatable = PEERS_WITH_MINIMUM.filter((name) => installed[name] || newPackages[name]);
+    const missingExclusion = mimiExclusion(tree, config, installed);
+    return {
+        componentsDir,
+        blocksDir,
+        config,
+        items,
+        implicit,
+        newPackages,
+        outdated,
+        updatable,
+        missingExclusion,
+    };
+}
+/**
+ * Sin `@source not` hacia `.mimi/`, Tailwind escanea las copias originales (van en git) y genera
+ * sus clases aunque el usuario ya las haya cambiado en sus componentes. Proyectos de la 0.3.0 o
+ * anteriores no la tienen: se avisa para que no tengan que volver a ejecutar ng add. Con
+ * Tailwind 4.0 no se avisa aquí (no la entiende; init ya lo explicó).
+ */
+function mimiExclusion(tree, config, installed) {
+    const cssPath = config.tailwind?.css;
+    if (!cssPath || !tree.exists(cssPath))
+        return null;
+    if (!(0, tailwind_1.tailwindSupportsSourceNot)(tree, installed['tailwindcss']))
+        return null;
+    if (!(0, tailwind_1.missingMimiExclusion)(tree.readText(cssPath), cssPath))
+        return null;
+    return { cssPath, line: (0, tailwind_1.mimiSourceNotLine)(cssPath) };
+}
+// ── Versiones mínimas de cdk y aria (M.4) ─────────────────────────────────────────────
+/**
+ * Paquetes cuya versión mínima se vigila. La CLI no los cambia si el proyecto ya los tiene (se
+ * actualizan con `ng update`, junto con el resto de Angular), pero avisa si quedan por debajo de
+ * lo que pide el registro: con aria y cdk 22.2.3, Combobox y Select lanzan NG0950 (spec 4,
+ * «#33974»).
+ */
+const PEERS_WITH_MINIMUM = ['@angular/cdk', '@angular/aria'];
+const RANGE = /^\s*(\^|~|>=|=)?\s*v?(\d+)\.(\d+)\.(\d+)\s*$/;
+function parseRange(range) {
+    const match = RANGE.exec(range);
+    if (!match)
+        return null;
+    return { op: match[1] ?? '=', version: [+match[2], +match[3], +match[4]] };
+}
+function compare(a, b) {
+    return a[0] - b[0] || a[1] - b[1] || a[2] - b[2];
+}
+/**
+ * Si un rango puede instalar `required` o una posterior. Lo que no se entiende (`*`, `latest`,
+ * `22.2.x`, `workspace:`…) cuenta como que sí: el aviso no da falsas alarmas.
+ */
+function canReach(range, required) {
+    const parsed = parseRange(range);
+    if (!parsed)
+        return true;
+    if (parsed.op === '>=' || compare(parsed.version, required) >= 0)
+        return true;
+    // Por debajo del mínimo: llega solo si el tope del rango (exclusivo) queda por encima.
+    const [major, minor, patch] = parsed.version;
+    const upper = parsed.op === '^'
+        ? major > 0
+            ? [major + 1, 0, 0]
+            : minor > 0
+                ? [0, minor + 1, 0]
+                : [0, 0, patch + 1]
+        : parsed.op === '~'
+            ? [major, minor + 1, 0]
+            : null;
+    return upper !== null && compare(required, upper) < 0;
+}
+/** El mínimo que piden los ítems para cada paquete vigilado (aria implica el mismo cdk). */
+function requiredMinimums(items) {
+    const minimums = new Map();
+    for (const item of items) {
+        const { dependencies = {}, peerDependencies = {} } = registry_1.registry.items[item];
+        for (const [name, range] of Object.entries({ ...dependencies, ...peerDependencies })) {
+            if (!PEERS_WITH_MINIMUM.includes(name))
+                continue;
+            const version = parseRange(range)?.version;
+            if (!version)
+                continue;
+            const names = name === '@angular/aria' ? [name, '@angular/cdk'] : [name];
+            for (const target of names) {
+                const known = minimums.get(target);
+                if (!known || compare(version, known) > 0)
+                    minimums.set(target, version);
+            }
+        }
+    }
+    return minimums;
+}
+function outdatedPeers(tree, items, installed, newPackages) {
+    const outdated = [];
+    for (const [name, required] of requiredMinimums(items)) {
+        const declared = installed[name] ?? newPackages[name];
+        if (!declared)
+            continue;
+        // Si ya está instalado, manda la versión de node_modules (la que corre de verdad).
+        const onDisk = installed[name] ? installedVersion(tree, name) : null;
+        const version = onDisk ? parseRange(onDisk)?.version : null;
+        const ok = version ? compare(version, required) >= 0 : canReach(declared, required);
+        if (!ok) {
+            outdated.push({
+                name,
+                current: onDisk ?? declared,
+                source: onDisk ? 'installed' : installed[name] ? 'declared' : 'added',
+                required: required.join('.'),
+            });
+        }
+    }
+    return outdated.sort((a, b) => a.name.localeCompare(b.name));
+}
+const SOURCE_TEXT = {
+    installed: (current) => `${current} instalada`,
+    declared: (current) => `"${current}" en package.json`,
+    added: (current) => `"${current}", que se agrega ahora`,
+};
+function installedVersion(tree, name) {
+    const file = tree.read(`node_modules/${name}/package.json`);
+    if (!file)
+        return null;
+    const { version } = JSON.parse(file.toString('utf-8'));
+    return version ?? null;
 }
 /**
  * @angular/aria pide como peer la versión exacta de @angular/cdk (22.1.7 → cdk 22.1.7). Si el cdk
@@ -155,16 +288,25 @@ function updateMimiConfig(plan, report) {
         const skipped = new Set(report.skipped);
         const blocked = new Set(report.blocked.map((b) => b.item));
         const components = { ...plan.config.components };
+        const blocks = { ...plan.config.blocks };
         for (const item of plan.items) {
-            if (registry_1.registry.items[item].type !== 'component')
+            const { type, files } = registry_1.registry.items[item];
+            if (type !== 'component' && type !== 'block')
                 continue;
             if (blocked.has(item))
                 continue;
-            if (registry_1.registry.items[item].files.some((file) => skipped.has(file)))
+            if (files.some((file) => skipped.has(file)))
                 continue;
-            components[item] = { version: registry_1.registry.version };
+            (type === 'block' ? blocks : components)[item] = { version: registry_1.registry.version };
         }
         const next = { ...plan.config, components };
+        if (Object.keys(blocks).length > 0) {
+            next.blocks = blocks;
+            // Proyectos de la 0.3.0 o anteriores: la carpeta queda escrita la primera vez (B.1-a).
+            if (!plan.config.aliases?.blocks) {
+                next.aliases = { ...plan.config.aliases, blocks: plan.blocksDir };
+            }
+        }
         const text = `${JSON.stringify(next, null, 2)}\n`;
         if (tree.readText('mimi.json') !== text)
             tree.overwrite('mimi.json', text);
@@ -202,11 +344,58 @@ function updateGlobalCss(plan) {
             context.logger.info(`  ${line}`);
     };
 }
+/**
+ * G1: con `@import "tailwindcss" source(none)`, Tailwind no escanea la carpeta de los Blocks y
+ * la pantalla queda sin sus estilos. Si se copia un Block, se agrega su `@source` (una vez).
+ */
+function addBlocksSource(plan) {
+    return (tree, context) => {
+        if (!plan.items.some((item) => registry_1.registry.items[item].type === 'block'))
+            return;
+        const cssPath = plan.config.tailwind?.css;
+        if (!cssPath || !tree.exists(cssPath))
+            return;
+        const result = (0, tailwind_1.withBlocksSource)(tree.readText(cssPath), cssPath, plan.componentsDir, plan.blocksDir);
+        if (!result)
+            return;
+        tree.overwrite(cssPath, result.css);
+        context.logger.info(`Agregado a ${cssPath} (tu @import de Tailwind usa source(none), así que Tailwind solo ` +
+            `escanea las carpetas que indicas):\n  ${result.line}`);
+    };
+}
 // ── Mensaje final ─────────────────────────────────────────────────────────────────────
+/**
+ * M1: un componente que se actualizó y que usa un Block instalado (en `mimi.json → blocks`) que
+ * no se actualizó en esta ejecución (porque el usuario lo modificó, o porque no se pidió). Solo
+ * avisa: la pantalla es del usuario y puede necesitar cambios con la API nueva.
+ */
+function blocksUsingUpdated(plan, report, itemOf) {
+    const updated = new Set(report.updated.map(({ file }) => itemOf(file)));
+    const messages = [];
+    for (const block of Object.keys(plan.config.blocks ?? {}).sort()) {
+        if (updated.has(block) || registry_1.registry.items[block]?.type !== 'block')
+            continue;
+        const used = (0, registry_1.resolveItems)(block).filter((item) => updated.has(item) && registry_1.registry.items[item].type === 'component');
+        if (used.length === 0)
+            continue;
+        const list = used.join(', ');
+        messages.push(`Tu Block ${block} usa ${list}, que se actualizó a ${registry_1.registry.version}; revisa el ` +
+            'CHANGELOG por si tu pantalla necesita algún cambio.');
+    }
+    return messages;
+}
+/**
+ * Cómo se importa un Block desde `app.routes.ts` (en `src/app/`): `src/app/blocks` →
+ * `./blocks/login-01`. Si la carpeta no está dentro de `app/`, la ruta del workspace.
+ */
+function routesImport(blocksDir, item) {
+    const at = `/${blocksDir}`.lastIndexOf('/app/');
+    return at >= 0 ? `./${`/${blocksDir}`.slice(at + 5)}/${item}` : `${blocksDir}/${item}`;
+}
 function summary(plan, report) {
     return (_tree, context) => {
         const log = context.logger;
-        const path = (file) => `${plan.componentsDir}/${(0, write_files_1.projectPathOf)(file)}`;
+        const path = (file) => (0, write_files_1.targetPathOf)(file, plan.componentsDir, plan.blocksDir);
         if (report.created.length > 0) {
             log.info('Agregado:');
             for (const file of report.created)
@@ -216,17 +405,38 @@ function summary(plan, report) {
             log.info('Reemplazado (--overwrite):');
             for (const file of report.overwritten)
                 log.info(`  ~ ${path(file)}`);
+            // Un Block es una pantalla del usuario: --overwrite la reemplaza entera (B.1, trampas).
+            const screens = [
+                ...new Set(report.overwritten.filter(write_files_1.isBlockFile).map((file) => file.split('/')[1])),
+            ];
+            for (const block of screens) {
+                log.warn(`--overwrite reemplazó tu pantalla ${block} (${plan.blocksDir}/${block}/) por la de ` +
+                    `Mimi ${registry_1.registry.version}. Si tenías cambios, recupéralos de git.`);
+            }
         }
         const itemOf = (file) => [...plan.items, ...plan.implicit].find((item) => registry_1.registry.items[item].files.includes(file)) ??
             file;
         for (const message of (0, write_files_1.updatedMessages)(report, itemOf, registry_1.registry.version))
             log.info(message);
+        for (const message of blocksUsingUpdated(plan, report, itemOf))
+            log.warn(message);
         for (const file of report.skipped) {
             log.warn(`Omitido: ${path(file)} ya existe con otro contenido (usa --overwrite para reemplazarlo).`);
         }
-        for (const message of (0, write_files_1.blockedMessages)(report, plan.componentsDir, registry_1.registry.version)) {
+        for (const message of (0, write_files_1.blockedMessages)(report, plan.componentsDir, registry_1.registry.version, plan.blocksDir)) {
             log.warn(message);
         }
+        // Un Block nuevo es una página: se enruta (B.1, «API pública»).
+        const created = new Set(report.created);
+        for (const item of plan.items) {
+            const { type, files } = registry_1.registry.items[item];
+            if (type !== 'block' || !files.some((file) => created.has(file)))
+                continue;
+            const className = item.replace(/(^|-)([a-z0-9])/g, (_, _dash, c) => c.toUpperCase());
+            log.info(`${item} es una pantalla: agrégala a tus rutas, por ejemplo ` +
+                `{ path: '${item.split('-')[0]}', component: ${className} } ` +
+                `(import { ${className} } from '${routesImport(plan.blocksDir, item)}').`);
+        }
         if (!(0, write_files_1.hasFileChanges)(report) && report.skipped.length === 0 && report.blocked.length === 0) {
             log.info('Nada que hacer: los archivos ya están al día.');
         }
@@ -236,6 +446,18 @@ function summary(plan, report) {
             for (const [name, version] of packages)
                 log.info(`  ${name}@${version}`);
         }
+        if (plan.outdated.length > 0) {
+            const required = [...new Set(plan.outdated.map((peer) => peer.required))].join(', ');
+            const lines = plan.outdated.map((peer) => `  ${peer.name}: ${SOURCE_TEXT[peer.source](peer.current)}`);
+            log.warn(`Mimi necesita @angular/cdk y @angular/aria ${required} o posterior (las anteriores ` +
+                `tienen errores conocidos con sus componentes) y tu proyecto tiene:\n${lines.join('\n')}\n` +
+                `Actualízalos con:\n  ng update ${plan.updatable.join(' ')}`);
+        }
+        if (plan.missingExclusion) {
+            const { cssPath, line } = plan.missingExclusion;
+            log.warn(`Tailwind escanea ${write_files_1.BASE_DIR}/ (las copias originales de Mimi) y genera CSS de clases que ` +
+                `quizá ya no usas. Agrega a ${cssPath}, después de @import "tailwindcss":\n  ${line}`);
+        }
         if ((0, write_files_1.hasFileChanges)(report)) {
             log.info(`Guarda la carpeta ${write_files_1.BASE_DIR.split('/')[0]}/ en git: Mimi la usa para actualizar tus ` +
                 'componentes sin perder tus cambios.');