@mimi-ng/cli 0.1.1 → 0.3.0

package/dist/templates/utils/overlay.ts

@@ -0,0 +1,153 @@
+import type { ConnectedPosition } from '@angular/cdk/overlay';
+
+/*
+ * Posición, flecha y animación compartidas por los overlays de Mimi (Popover, Tooltip…). Usa
+ * tipos de @angular/cdk/overlay: impórtalo siempre con su archivo concreto
+ * (`@/components/ui/utils/overlay`), nunca desde el índice de utils, que no lo reexporta para no
+ * arrastrar el CDK a quien no lo usa.
+ */
+
+export type MimiOverlaySide = 'top' | 'right' | 'bottom' | 'left';
+export type MimiOverlayAlign = 'start' | 'center' | 'end';
+
+/** Distancia mínima de un overlay al borde de la pantalla (no está en el diseño: spec 13, plan D6). */
+export const MIMI_VIEWPORT_MARGIN = 8;
+
+const OPPOSITE: Record<MimiOverlaySide, MimiOverlaySide> = {
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left',
+};
+
+function connectedPosition(
+  side: MimiOverlaySide,
+  align: MimiOverlayAlign,
+  offset: number,
+): ConnectedPosition {
+  if (side === 'top' || side === 'bottom') {
+    return side === 'bottom'
+      ? { originX: align, originY: 'bottom', overlayX: align, overlayY: 'top', offsetY: offset }
+      : { originX: align, originY: 'top', overlayX: align, overlayY: 'bottom', offsetY: -offset };
+  }
+  const y = align === 'start' ? 'top' : align === 'end' ? 'bottom' : 'center';
+  return side === 'right'
+    ? { originX: 'end', originY: y, overlayX: 'start', overlayY: y, offsetX: offset }
+    : { 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 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,
+  align: MimiOverlayAlign,
+  offset: number,
+): ConnectedPosition[] {
+  const others: MimiOverlaySide[] =
+    side === 'top' || side === 'bottom' ? ['right', 'left'] : ['bottom', 'top'];
+  const aligns = [align, ...FALLBACK_ALIGNS[align]];
+  return [
+    ...aligns.map((a) => connectedPosition(side, a, offset)),
+    ...aligns.map((a) => connectedPosition(OPPOSITE[side], a, offset)),
+    ...others.map((other) => connectedPosition(other, 'center', offset)),
+  ];
+}
+
+/**
+ * Posiciones para abrir en un punto (el puntero, en Context Menu): la esquina superior izquierda
+ * del panel en el punto; si no cabe, se voltea a la izquierda del punto, hacia arriba o ambas.
+ */
+export function mimiPointPositions(): ConnectedPosition[] {
+  return [
+    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'top' },
+    { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top' },
+    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+    { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
+  ];
+}
+
+/** Lado en el que quedó el overlay, según la posición que eligió el CDK. */
+export function mimiPlacedSide({
+  originX,
+  originY,
+  overlayX,
+  overlayY,
+}: ConnectedPosition): MimiOverlaySide {
+  if (originY === 'bottom' && overlayY === 'top') return 'bottom';
+  if (originY === 'top' && overlayY === 'bottom') return 'top';
+  return originX === 'end' && overlayX === 'start' ? 'right' : 'left';
+}
+
+/**
+ * Dónde va la flecha para que apunte al centro del trigger: distancia desde el borde del panel
+ * (izquierdo arriba/abajo, superior a los lados), dentro del panel. null si aún no hay medidas.
+ */
+export function mimiArrowOffset(
+  trigger: DOMRect,
+  panel: DOMRect,
+  side: MimiOverlaySide,
+): string | null {
+  if (panel.width === 0 || panel.height === 0) return null;
+  const vertical = side === 'top' || side === 'bottom';
+  const offset = vertical
+    ? trigger.left + trigger.width / 2 - panel.left
+    : trigger.top + trigger.height / 2 - panel.top;
+  const size = vertical ? panel.width : panel.height;
+  return `${Math.min(Math.max(offset, 0), size)}px`;
+}
+
+/**
+ * Entrada y salida de los overlays, para el `styles` del componente. Valores de
+ * --mimi-transition (spec 6.6): 0.15s cubic-bezier(.2,.8,.2,1), escala desde --mimi-press-scale.
+ * Sin animación con movimiento reducido. El panel lleva `data-mimi-overlay-panel` y `data-state`.
+ */
+export const MIMI_OVERLAY_ANIMATION = `
+  @keyframes mimi-overlay-in {
+    from {
+      opacity: 0;
+      scale: var(--mimi-press-scale);
+    }
+  }
+  @keyframes mimi-overlay-out {
+    to {
+      opacity: 0;
+      scale: var(--mimi-press-scale);
+    }
+  }
+  [data-mimi-overlay-panel][data-state='open'] {
+    animation: mimi-overlay-in 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+  [data-mimi-overlay-panel][data-state='closed'] {
+    animation: mimi-overlay-out 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [data-mimi-overlay-panel] {
+      animation: none !important;
+    }
+  }
+`;
+
+/**
+ * Se resuelve cuando terminan las animaciones del elemento (la de salida). Sin animaciones
+ * (movimiento reducido, o un entorno sin Web Animations), enseguida.
+ */
+export function mimiWaitForExit(element: HTMLElement | undefined): Promise<void> {
+  const animations = element?.getAnimations?.() ?? [];
+  return Promise.allSettled(animations.map((animation) => animation.finished)).then(
+    () => undefined,
+  );
+}

package/dist/ui/index.js

@@ -4,6 +4,8 @@ exports.AVAILABLE = void 0;
 exports.ui = ui;
 const schematics_1 = require("@angular-devkit/schematics");
 const utility_1 = require("@schematics/angular/utility");
+const css_1 = require("../init/css");
+const items_1 = require("../init/items");
 const paths_1 = require("../init/paths");
 const registry_1 = require("../registry");
 const project_1 = require("../utils/project");
@@ -17,8 +19,10 @@ exports.AVAILABLE = Object.entries(registry_1.registry.items)
  * `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).
  *
- * Requiere init (mimi.json). Archivos existentes: igual → nada; distinto → se omite con aviso;
- * --overwrite → se reemplaza. Guarda la copia original en .mimi/base/ y la versión de cada
+ * Requiere init (mimi.json). Revisa también el tema y lo que copia init, y lo actualiza si el
+ * usuario no lo modificó. Todo o nada por componente (ver writeTemplates): si el usuario modificó
+ * un archivo de una versión anterior, ese componente y los que dependen de él no se tocan, con
+ * un aviso; --overwrite reemplaza. Guarda la copia original en .mimi/base/ y la versión de cada
  * componente en mimi.json. Instala las dependencias que falten con el gestor del proyecto.
  */
 function ui(options) {
@@ -27,13 +31,15 @@ function ui(options) {
         const report = (0, write_files_1.emptyReport)();
         return (0, schematics_1.chain)([
             (0, write_files_1.writeTemplates)({
-                files: plan.items.flatMap((item) => registry_1.registry.items[item].files),
+                items: [...plan.items, ...plan.implicit],
+                implicit: plan.implicit,
                 componentsDir: plan.componentsDir,
                 overwrite: options.overwrite ?? false,
                 version: registry_1.registry.version,
                 report,
             }),
             updateMimiConfig(plan, report),
+            updateGlobalCss(plan),
             ...Object.entries(plan.newPackages).map(([name, version]) => (0, utility_1.addDependency)(name, version, {
                 type: utility_1.DependencyType.Default,
                 existing: utility_1.ExistingBehavior.Skip,
@@ -82,11 +88,134 @@ function inspect(tree, options) {
         for (const [name, version] of Object.entries(registry_1.registry.items[item].peerDependencies ?? {})) {
             if (installed[name])
                 continue;
-            newPackages[name] = name.startsWith('@angular/') && angularRange ? angularRange : version;
+            newPackages[name] =
+                name === '@angular/aria'
+                    ? ariaVersion(tree, installed, version)
+                    : name.startsWith('@angular/') && angularRange
+                        ? angularRange
+                        : version;
         }
     }
+    // aria necesita el cdk (bidi, a11y, platform). Un ítem que solo importa aria (Tabs) no declara
+    // el cdk como peer; sin otro ítem que lo traiga, va con la misma versión que aria.
+    if (newPackages['@angular/aria'] && !installed['@angular/cdk'] && !newPackages['@angular/cdk']) {
+        newPackages['@angular/cdk'] = newPackages['@angular/aria'];
+    }
+    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, newPackages };
+    const outdated = outdatedPeers(tree, items, installed, newPackages);
+    const updatable = PEERS_WITH_MINIMUM.filter((name) => installed[name] || newPackages[name]);
+    return { componentsDir, config, items, implicit, newPackages, outdated, updatable };
+}
+// ── 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
+ * está instalado, aria va en esa versión (de `node_modules`, que el árbol del schematic lee del
+ * disco); si está declarado pero sin instalar, con su mismo rango; si no hay cdk, con el rango de
+ * `@angular/core`, igual que el cdk que se agrega junto con él (lo declare otro ítem o no).
+ */
+function ariaVersion(tree, installed, fallback) {
+    const cdk = tree.read('node_modules/@angular/cdk/package.json');
+    if (cdk) {
+        const { version } = JSON.parse(cdk.toString('utf-8'));
+        if (version)
+            return version;
+    }
+    return installed['@angular/cdk'] ?? installed['@angular/core'] ?? fallback;
 }
 /** El componente más parecido (distancia de edición ≤ 2, o que empiece igual). */
 function closest(name) {
@@ -115,15 +244,19 @@ function editDistance(a, b) {
 // ── mimi.json ─────────────────────────────────────────────────────────────────────────
 /**
  * Registra la versión de cada componente cuyos archivos quedaron iguales a la plantilla. Si
- * alguno se omitió por estar modificado, se conserva lo que había.
+ * alguno se omitió por estar modificado, o el componente no se escribió (bloqueado), se conserva
+ * lo que había (y uno que no se agregó no aparece).
  */
 function updateMimiConfig(plan, report) {
     return (tree) => {
         const skipped = new Set(report.skipped);
+        const blocked = new Set(report.blocked.map((b) => b.item));
         const components = { ...plan.config.components };
         for (const item of plan.items) {
             if (registry_1.registry.items[item].type !== 'component')
                 continue;
+            if (blocked.has(item))
+                continue;
             if (registry_1.registry.items[item].files.some((file) => skipped.has(file)))
                 continue;
             components[item] = { version: registry_1.registry.version };
@@ -134,6 +267,38 @@ function updateMimiConfig(plan, report) {
             tree.overwrite('mimi.json', text);
     };
 }
+// ── CSS global ────────────────────────────────────────────────────────────────────────
+/**
+ * Agrega los `cssImports` de los ítems (p. ej. `@angular/cdk/overlay-prebuilt.css`, que pide la
+ * guía del CDK) al CSS global de mimi.json, una sola vez. Van después del `@import` del tema (o
+ * del de Tailwind): los `@import` tienen que ir antes que cualquier otra regla, y así quedan
+ * junto a los de Mimi. Si no se encuentra el archivo, se explica cómo agregarlos a mano.
+ */
+function updateGlobalCss(plan) {
+    return (tree, context) => {
+        const imports = [
+            ...new Set(plan.items.flatMap((item) => registry_1.registry.items[item].cssImports ?? [])),
+        ];
+        if (imports.length === 0)
+            return;
+        const cssPath = plan.config.tailwind?.css;
+        const css = cssPath && tree.exists(cssPath) ? tree.readText(cssPath) : null;
+        const missing = imports.filter((path) => !css || !(0, css_1.hasDirective)(css, '@import', path));
+        if (missing.length === 0)
+            return;
+        const lines = missing.map((path) => `@import "${path}";`);
+        const updated = css === null ? null : (0, css_1.insertAfterTheme)(css, lines);
+        if (!cssPath || updated === null) {
+            context.logger.warn(`No se encontró el CSS global${cssPath ? ` (${cssPath})` : ''} con el @import de ` +
+                `Tailwind. Agrega a mano, después del tema de Mimi:\n${lines.map((l) => `  ${l}`).join('\n')}`);
+            return;
+        }
+        tree.overwrite(cssPath, updated);
+        context.logger.info(`Agregado a ${cssPath}:`);
+        for (const line of lines)
+            context.logger.info(`  ${line}`);
+    };
+}
 // ── Mensaje final ─────────────────────────────────────────────────────────────────────
 function summary(plan, report) {
     return (_tree, context) => {
@@ -149,13 +314,17 @@ function summary(plan, report) {
             for (const file of report.overwritten)
                 log.info(`  ~ ${path(file)}`);
         }
-        const itemOf = (file) => plan.items.find((item) => registry_1.registry.items[item].files.includes(file)) ?? file;
+        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 file of report.skipped) {
             log.warn(`Omitido: ${path(file)} ya existe con otro contenido (usa --overwrite para reemplazarlo).`);
         }
-        if (!(0, write_files_1.hasFileChanges)(report) && report.skipped.length === 0) {
+        for (const message of (0, write_files_1.blockedMessages)(report, plan.componentsDir, registry_1.registry.version)) {
+            log.warn(message);
+        }
+        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.');
         }
         const packages = Object.entries(plan.newPackages);
@@ -164,6 +333,13 @@ 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 ((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.');

package/dist/ui/schema.json

@@ -31,6 +31,10 @@
             "value": "button",
             "label": "button"
           },
+          {
+            "value": "calendar",
+            "label": "calendar"
+          },
           {
             "value": "card",
             "label": "card"
@@ -39,6 +43,42 @@
             "value": "checkbox",
             "label": "checkbox"
           },
+          {
+            "value": "color-picker",
+            "label": "color-picker"
+          },
+          {
+            "value": "combobox",
+            "label": "combobox"
+          },
+          {
+            "value": "confirm",
+            "label": "confirm"
+          },
+          {
+            "value": "context-menu",
+            "label": "context-menu"
+          },
+          {
+            "value": "date-picker",
+            "label": "date-picker"
+          },
+          {
+            "value": "date-range",
+            "label": "date-range"
+          },
+          {
+            "value": "dialog",
+            "label": "dialog"
+          },
+          {
+            "value": "dropdown-menu",
+            "label": "dropdown-menu"
+          },
+          {
+            "value": "file-upload",
+            "label": "file-upload"
+          },
           {
             "value": "form-field",
             "label": "form-field"
@@ -47,6 +87,38 @@
             "value": "input",
             "label": "input"
           },
+          {
+            "value": "input-mask",
+            "label": "input-mask"
+          },
+          {
+            "value": "input-otp",
+            "label": "input-otp"
+          },
+          {
+            "value": "number-input",
+            "label": "number-input"
+          },
+          {
+            "value": "pagination",
+            "label": "pagination"
+          },
+          {
+            "value": "password",
+            "label": "password"
+          },
+          {
+            "value": "popover",
+            "label": "popover"
+          },
+          {
+            "value": "progress",
+            "label": "progress"
+          },
+          {
+            "value": "select",
+            "label": "select"
+          },
           {
             "value": "separator",
             "label": "separator"
@@ -55,13 +127,41 @@
             "value": "skeleton",
             "label": "skeleton"
           },
+          {
+            "value": "slider",
+            "label": "slider"
+          },
           {
             "value": "switch",
             "label": "switch"
           },
+          {
+            "value": "tabs",
+            "label": "tabs"
+          },
+          {
+            "value": "tags-input",
+            "label": "tags-input"
+          },
           {
             "value": "textarea",
             "label": "textarea"
+          },
+          {
+            "value": "toast",
+            "label": "toast"
+          },
+          {
+            "value": "toggle-group",
+            "label": "toggle-group"
+          },
+          {
+            "value": "toolbar",
+            "label": "toolbar"
+          },
+          {
+            "value": "tooltip",
+            "label": "tooltip"
           }
         ]
       }