@mimi-ng/cli 0.1.1 → 0.2.0

package/dist/templates/theme/types.ts

@@ -1,7 +1,8 @@
 /**
  * Preset tipado del tema (spec 6.3). Cada propiedad se convierte en una variable --mimi-*
- * de theme-base.css. Los derivados con color-mix (primary-hover, ring-soft, switch-off…)
- * no están aquí: se recalculan solos a partir de los colores.
+ * de theme-base.css. Los derivados con color-mix (primary-hover, ring-soft, switch-off y los
+ * <tono>-soft, <tono>-hover y <tono>-ring) no están aquí: se recalculan solos a partir de los
+ * colores.
  */
 
 /** Colores. `colors` se aplica en claro y `darkColors` en oscuro. */
@@ -25,9 +26,29 @@ export interface MimiColorTokens {
   border?: string;
   input?: string;
   inputBackground?: string;
+  /** Borde de un campo con el puntero encima (por defecto, mezcla de foreground e input). */
+  inputHover?: string;
   ring?: string;
   /** Fondo que oscurece la página detrás de paneles y diálogos. */
   overlay?: string;
+  success?: string;
+  successForeground?: string;
+  /** Texto sobre el fondo suave de success. */
+  successSoftForeground?: string;
+  warning?: string;
+  warningForeground?: string;
+  warningSoftForeground?: string;
+  info?: string;
+  infoForeground?: string;
+  infoSoftForeground?: string;
+  destructiveSoftForeground?: string;
+  /** Cuánto tono lleva cada fondo suave (-soft), en porcentaje: '12%'. */
+  softMix?: string;
+  tooltip?: string;
+  tooltipForeground?: string;
+  /** Fondo translúcido de las píldoras flotantes (mimi-toolbar, Pagination). */
+  glass?: string;
+  glassBorder?: string;
 }
 
 /** Sombras (`box-shadow` completo). `shadows` en claro y `darkShadows` en oscuro. */
@@ -41,12 +62,28 @@ export interface MimiShadowTokens {
   neutralHover?: string;
   /** Pulgar del Switch. */
   thumb?: string;
+  success?: string;
+  successHover?: string;
+  warning?: string;
+  warningHover?: string;
+  info?: string;
+  infoHover?: string;
+  /** Menús, diálogos, toasts y píldoras flotantes. */
+  popover?: string;
+  /** Glow (opción glow): van a --mimi-glow y --mimi-glow-<tono>, sin el prefijo shadow-. */
+  glow?: string;
+  glowPrimary?: string;
+  glowSuccess?: string;
+  glowWarning?: string;
+  glowInfo?: string;
+  glowDestructive?: string;
 }
 
 /** Radios fijos. Si no se definen, sm y card se calculan a partir de `radius`. */
 export interface MimiRadiusTokens {
   sm?: string;
   card?: string;
+  /** @deprecated Usa components.badge.radius (la misma variable). Sigue hasta la 1.0. */
   badge?: string;
 }
 
@@ -71,9 +108,41 @@ export interface MimiControlSizeTokens {
   heightLg?: string;
 }
 
+/**
+ * Tokens compartidos por todos los controles (spec 13, nivel 2). Las alturas van a
+ * --mimi-control-height*; el resto, sin prefijo: focusRing → --mimi-focus-ring.
+ */
+export interface MimiSharedTokens extends MimiControlSizeTokens {
+  /** Halo de foco en campos y botones (box-shadow). */
+  focusRing?: string;
+  /** Contorno de foco con teclado (outline). */
+  focusOutline?: string;
+  focusOffset?: string;
+  disabledOpacity?: string | number;
+  iconSize?: string;
+  iconSizeSm?: string;
+}
+
+/**
+ * Efectos que no son movimiento ni controles: desenfoques (y, más adelante, los de Mimi
+ * Effects). Iguales en claro y oscuro.
+ */
+export interface MimiEffectTokens {
+  /** Desenfoque del fondo detrás de Dialog y Sheet. */
+  overlayBlur?: string;
+  /** Desenfoque de las píldoras translúcidas. */
+  glassBlur?: string;
+}
+
 /** Tokens por componente. Cada componente los lee con la cascada de la spec 6.2. */
 export interface MimiControlTokens extends MimiControlSizeTokens {
   radius?: string;
+  /** Padding horizontal del tamaño default: --mimi-<prefijo>-px. */
+  px?: string;
+  /**
+   * @deprecated Nombre de la 0.1.0 (--mimi-<prefijo>-padding-x): usa `px`. Sigue funcionando
+   * hasta la 1.0 (spec 12).
+   */
   paddingX?: string;
   fontSize?: string;
   borderWidth?: string;
@@ -82,11 +151,19 @@ export interface MimiControlTokens extends MimiControlSizeTokens {
 
 /** paddingX y fontSize se aplican al tamaño default; sm y lg usan los valores del diseño. */
 export interface MimiButtonTokens extends MimiControlTokens {
+  /** Espacio entre ícono y texto del tamaño default. */
+  gap?: string;
+  /** Escala al presionar; si no, --mimi-press-scale. Con movimiento reducido vale 1. */
+  pressScale?: string | number;
   fontWeight?: string | number;
   letterSpacing?: string;
 }
 
 export interface MimiInputTokens extends MimiControlTokens {
+  /**
+   * @deprecated Es un color: cámbialo en el CSS con --mimi-input-placeholder (spec 6.2). Sigue
+   * funcionando hasta la 1.0.
+   */
   placeholderColor?: string;
   disabledOpacity?: string | number;
 }
@@ -95,16 +172,212 @@ export interface MimiCardTokens {
   radius?: string;
   borderWidth?: string;
   shadow?: string;
+  /** Padding exterior de las partes (1.5rem); los paddingHeader/Content/Footer lo detallan. */
+  padding?: string;
   paddingHeader?: string;
   paddingContent?: string;
   paddingFooter?: string;
 }
 
+export interface MimiAvatarTokens {
+  size?: string;
+  sizeSm?: string;
+  sizeLg?: string;
+  radius?: string;
+}
+
+export interface MimiSwitchTokens {
+  /** Ancho de la pista. El pulgar se desplaza ancho − alto. */
+  width?: string;
+  /** Alto de la pista. El pulgar mide alto − 4px. */
+  height?: string;
+}
+
+export interface MimiCheckboxTokens {
+  size?: string;
+  radius?: string;
+}
+
+/** FormField (prefijo field). */
+export interface MimiFieldTokens {
+  gap?: string;
+  labelSize?: string;
+  labelWeight?: string | number;
+}
+
+export interface MimiSeparatorTokens {
+  /** Grosor de la línea. */
+  size?: string;
+}
+
+export interface MimiSkeletonTokens {
+  radius?: string;
+  /** Duración del pulso: '1.6s'. */
+  duration?: string;
+}
+
+export interface MimiBadgeTokens {
+  height?: string;
+  px?: string;
+  fontSize?: string;
+  fontWeight?: string | number;
+  /** --mimi-badge-radius (el mismo que radii.badge de la 0.1.0). */
+  radius?: string;
+}
+
+/** Textarea: si no se definen, usa los de Input y después los compartidos. */
+export interface MimiTextareaTokens {
+  radius?: string;
+  minHeight?: string;
+  lineHeight?: string;
+  py?: string;
+}
+
+/** Popover. Fondo, borde y sombra van en el CSS (`--mimi-popover-bg`, `-border`, `-shadow`). */
+export interface MimiPopoverTokens {
+  radius?: string;
+  /** Padding del panel (16px). */
+  padding?: string;
+  /** Lado de la flecha (10px). */
+  arrow?: string;
+}
+
+/** Tooltip. Fondo y texto van en el CSS (`--mimi-tooltip-bg`, `--mimi-tooltip-fg`). */
+export interface MimiTooltipTokens {
+  radius?: string;
+  fontSize?: string;
+  /** Lado de la flecha (8px). */
+  arrow?: string;
+  /** Retraso al abrir (300ms). `mimiTooltipDelay` lo cambia en un tooltip. */
+  delay?: string;
+}
+
+/**
+ * Dropdown Menu y Context Menu. Fondo, borde, sombra, hover, atajo y tono de peligro van en el CSS
+ * (`--mimi-menu-bg`, `-border`, `-shadow`, `-item-hover`, `-shortcut`, `-danger`, `-danger-hover`).
+ */
+export interface MimiMenuTokens {
+  radius?: string;
+  /** Ancho del panel (240px). */
+  width?: string;
+  /** Alto de cada ítem (32px). */
+  itemHeight?: string;
+  itemRadius?: string;
+}
+
+/**
+ * Select. Fondos, borde, sombra y opción activa van en el CSS (`--mimi-select-trigger-bg`,
+ * `-border`, `-menu-bg`, `-menu-shadow`, `-option-hover`).
+ */
+export interface MimiSelectTokens {
+  /** Radio del disparador y del panel. */
+  radius?: string;
+  /** Alto del disparador (el de los controles). */
+  height?: string;
+  /** Alto de cada opción (34px). */
+  optionHeight?: string;
+  optionRadius?: string;
+}
+
+/**
+ * Dialog. El fondo oscurecido, el fondo del panel y la sombra van en el CSS
+ * (`--mimi-dialog-overlay`, `-bg`, `-shadow`).
+ */
+export interface MimiDialogTokens {
+  radius?: string;
+  /** Ancho del panel (420px). */
+  width?: string;
+  /** Relleno a los lados del encabezado, el cuerpo y el pie (24px). */
+  padding?: string;
+  /** Tamaño de la X (32px). */
+  closeSize?: string;
+  /** Desenfoque del fondo (el global `effects.overlayBlur`). */
+  overlayBlur?: string;
+}
+
+/**
+ * Confirm. Los colores del círculo del tono danger van en el CSS (`--mimi-confirm-icon-bg`,
+ * `-icon-fg`).
+ */
+export interface MimiConfirmTokens {
+  /** Ancho del panel (380px). */
+  width?: string;
+}
+
+/**
+ * Toast. El fondo, el borde y la sombra van en el CSS (`--mimi-toast-bg`, `-border`, `-shadow`).
+ */
+export interface MimiToastTokens {
+  radius?: string;
+  /** Ancho de la pila (340px). */
+  width?: string;
+  /** Separación de la pila con el borde de la pantalla (16px). */
+  offset?: string;
+  /** Cuánto asoma cada toast de atrás con la pila colapsada (12px). */
+  stackGap?: string;
+}
+
+/**
+ * Tabs. Los colores (pestañas, indicador y píldora) van en el CSS (`--mimi-tabs-fg`,
+ * `-active-fg`, `-indicator`, `-pill-bg`, `-pill-active`).
+ */
+export interface MimiTabsTokens {
+  /** Alto de las pestañas subrayadas (44px). */
+  height?: string;
+  /** Curva del indicador (`cubic-bezier(.3, 1.35, .5, 1)`). */
+  spring?: string;
+}
+
+/**
+ * mimi-toolbar. Fondo, borde, sombra, disco activo, anillo y presionado van en el CSS
+ * (`--mimi-toolbar-bg`, `-border`, `-shadow`, `-active-bg`, `-active-fg`, `-ring`, `-pressed-bg`).
+ */
+export interface MimiToolbarTokens {
+  /** Tamaño de cada botón (40px). */
+  itemSize?: string;
+  /** Desenfoque del fondo (el global `effects.glassBlur`). */
+  blur?: string;
+}
+
+/**
+ * Pagination. Fondo, borde, sombra flotante y error van en el CSS (`--mimi-pagination-bg`,
+ * `-border`, `-shadow`, `-error`).
+ */
+export interface MimiPaginationTokens {
+  /** Tamaño de ← y → y alto del selector (el alto de control: sm 32px, md 40px). */
+  itemSize?: string;
+  /** Ancho del campo de página (sm 44px, md 52px). */
+  inputWidth?: string;
+  /** Desenfoque del fondo (el global `effects.glassBlur`). */
+  blur?: 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).
+ */
 export interface MimiComponentTokens {
   button?: MimiButtonTokens;
   input?: MimiInputTokens;
   card?: MimiCardTokens;
-  // select y dialog se agregan en la Fase 4
+  avatar?: MimiAvatarTokens;
+  switch?: MimiSwitchTokens;
+  checkbox?: MimiCheckboxTokens;
+  formField?: MimiFieldTokens;
+  separator?: MimiSeparatorTokens;
+  skeleton?: MimiSkeletonTokens;
+  badge?: MimiBadgeTokens;
+  textarea?: MimiTextareaTokens;
+  popover?: MimiPopoverTokens;
+  tooltip?: MimiTooltipTokens;
+  menu?: MimiMenuTokens;
+  select?: MimiSelectTokens;
+  dialog?: MimiDialogTokens;
+  confirm?: MimiConfirmTokens;
+  toast?: MimiToastTokens;
+  tabs?: MimiTabsTokens;
+  toolbar?: MimiToolbarTokens;
+  pagination?: MimiPaginationTokens;
 }
 
 export interface MimiThemePreset {
@@ -119,6 +392,7 @@ export interface MimiThemePreset {
   darkShadows?: MimiShadowTokens;
   fonts?: MimiFontTokens;
   motion?: MimiMotionTokens;
-  controls?: MimiControlSizeTokens;
+  effects?: MimiEffectTokens;
+  controls?: MimiSharedTokens;
   components?: MimiComponentTokens;
 }

package/dist/templates/utils/cn.ts

@@ -5,7 +5,7 @@ import { extendTailwindMerge } from 'tailwind-merge';
  * tailwind-merge solo reconoce tallas (sm, md, lg…) en las escalas de sombra y radio.
  * Sin registrar los tokens de Mimi, `shadow-card` se tomaría como color de sombra y
  * `rounded-card` no se fusionaría con otros `rounded-*`; lo mismo `animate-mimi-pulse` con
- * `animate-none`. Los colores no hace falta registrarlos: la escala de color acepta cualquier
+ * `animate-none` y `backdrop-blur-glass` con otros `backdrop-blur-*`. Los colores no hace falta registrarlos: la escala de color acepta cualquier
  * nombre.
  */
 const twMerge = extendTailwindMerge({
@@ -20,8 +20,22 @@ const twMerge = extendTailwindMerge({
         'neutral',
         'neutral-hover',
         'thumb',
+        'success',
+        'success-hover',
+        'warning',
+        'warning-hover',
+        'info',
+        'info-hover',
+        'popover',
+        'glow',
+        'glow-primary',
+        'glow-success',
+        'glow-warning',
+        'glow-info',
+        'glow-destructive',
       ],
       radius: ['card', 'badge'],
+      blur: ['glass', 'overlay'],
       animate: ['mimi-pulse'],
     },
     classGroups: {

package/dist/templates/utils/control-styles.ts

@@ -19,9 +19,9 @@ export const fieldFocusStyles =
 export const controlDisabledStyles =
   'disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50';
 
-/** Inválido: borde destructive fijo y halo destructive-soft solo al enfocar. */
+/** Inválido: borde destructive fijo y halo destructive-ring solo al enfocar. */
 export const controlInvalidStyles =
-  'aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-destructive-soft';
+  'aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-destructive-ring';
 
 /** Transición y escala al hacer clic. Solo botones. */
 export const controlPressStyles = 'mimi-transition active:scale-(--mimi-press-scale)';

package/dist/templates/utils/overlay.ts

@@ -0,0 +1,140 @@
+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 };
+}
+
+/**
+ * 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.
+ */
+export function mimiConnectedPositions(
+  side: MimiOverlaySide,
+  align: MimiOverlayAlign,
+  offset: number,
+): ConnectedPosition[] {
+  const others: MimiOverlaySide[] =
+    side === 'top' || side === 'bottom' ? ['right', 'left'] : ['bottom', 'top'];
+  return [
+    connectedPosition(side, align, offset),
+    connectedPosition(OPPOSITE[side], align, 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,
+  );
+}