@mimi-ng/cli 0.2.0 → 0.3.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

@@ -103,7 +103,104 @@ 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 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
@@ -236,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,14 @@
             "value": "checkbox",
             "label": "checkbox"
           },
+          {
+            "value": "color-picker",
+            "label": "color-picker"
+          },
+          {
+            "value": "combobox",
+            "label": "combobox"
+          },
           {
             "value": "confirm",
             "label": "confirm"
@@ -47,6 +59,14 @@
             "value": "context-menu",
             "label": "context-menu"
           },
+          {
+            "value": "date-picker",
+            "label": "date-picker"
+          },
+          {
+            "value": "date-range",
+            "label": "date-range"
+          },
           {
             "value": "dialog",
             "label": "dialog"
@@ -55,6 +75,10 @@
             "value": "dropdown-menu",
             "label": "dropdown-menu"
           },
+          {
+            "value": "file-upload",
+            "label": "file-upload"
+          },
           {
             "value": "form-field",
             "label": "form-field"
@@ -63,14 +87,34 @@
             "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"
@@ -83,6 +127,10 @@
             "value": "skeleton",
             "label": "skeleton"
           },
+          {
+            "value": "slider",
+            "label": "slider"
+          },
           {
             "value": "switch",
             "label": "switch"
@@ -91,6 +139,10 @@
             "value": "tabs",
             "label": "tabs"
           },
+          {
+            "value": "tags-input",
+            "label": "tags-input"
+          },
           {
             "value": "textarea",
             "label": "textarea"
@@ -99,6 +151,10 @@
             "value": "toast",
             "label": "toast"
           },
+          {
+            "value": "toggle-group",
+            "label": "toggle-group"
+          },
           {
             "value": "toolbar",
             "label": "toolbar"

package/dist/utils/write-files.js

@@ -61,7 +61,8 @@ function readManifest(tree) {
  * - si no, se crean los que faltan y se actualizan los que el usuario no tocó. Los modificados
  *   sobre esta versión se conservan (`skipped`).
  *
- * Con `overwrite`, todo se reemplaza y nada se bloquea. Los ítems `implicit` (el tema y lo que
+ * Con `overwrite`, todo se reemplaza y nada se bloquea, también un archivo igual a su base de la
+ * misma versión (`formatted`; M.11). Los ítems `implicit` (el tema y lo que
  * copia init, que `ng g mimi` revisa aunque no se pidan) solo se escriben si hay que
  * actualizarlos: un cambio del usuario sobre la versión actual se respeta en silencio, también
  * con `overwrite`, y no bloquean a otros ítems.
@@ -172,7 +173,16 @@ function writeTemplates(options) {
                         writeBase(file, content);
                         break;
                     case 'formatted':
-                        options.report.unchanged.push(file);
+                        // Con --overwrite se reemplaza siempre, también con la misma versión (M.11): sin él,
+                        // un archivo distinto de la plantilla con la misma versión no se podía reponer.
+                        if (options.overwrite && !implicit.has(item)) {
+                            tree.overwrite(target, content);
+                            options.report.overwritten.push(file);
+                            writeBase(file, content);
+                        }
+                        else {
+                            options.report.unchanged.push(file);
+                        }
                         break;
                     case 'old':
                         tree.overwrite(target, content);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mimi-ng/cli",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Angular + Tailwind CSS 4 UI components that a CLI copies into your project, so you own the code. Schematics for ng add and ng generate.",
   "keywords": [
     "angular",