@mimi-ng/cli 0.1.0

package/dist/templates/theme/theme-base.css

@@ -0,0 +1,241 @@
+/* Mimi · tema base (estilo Vivid).
+   Valores tomados de docs/design/tokens-vivid.css. Nombres según docs/spec.md, sección 6.
+   Este archivo no importa Tailwind ni carga fuentes: lo hace la app que lo usa. */
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* ── Claro ─────────────────────────────────────── */
+:root {
+  /* Colores */
+  --mimi-background: oklch(1 0 0);
+  --mimi-foreground: oklch(0.145 0 0);
+  --mimi-card: oklch(1 0 0);
+  --mimi-card-foreground: oklch(0.145 0 0);
+  --mimi-popover: oklch(1 0 0);
+  --mimi-popover-foreground: oklch(0.145 0 0);
+  --mimi-primary: oklch(0.205 0 0);
+  --mimi-primary-foreground: oklch(0.985 0 0);
+  --mimi-secondary: oklch(0.97 0 0);
+  --mimi-secondary-foreground: oklch(0.205 0 0);
+  --mimi-muted: oklch(0.97 0 0);
+  --mimi-muted-foreground: oklch(0.54 0 0);
+  --mimi-accent: oklch(0.97 0 0);
+  --mimi-accent-foreground: oklch(0.205 0 0);
+  --mimi-destructive: oklch(0.577 0.245 27.325);
+  --mimi-destructive-foreground: oklch(0.985 0 0);
+  --mimi-border: oklch(0.922 0 0);
+  --mimi-input: oklch(0.88 0 0);
+  --mimi-input-background: oklch(1 0 0);
+  --mimi-ring: oklch(0.708 0 0);
+  --mimi-overlay: oklch(0 0 0 / 50%);
+
+  /* Fuentes (sin cargar: la app decide si trae Outfit) */
+  --mimi-font-sans: 'Outfit', ui-sans-serif, system-ui, sans-serif;
+  --mimi-font-mono: 'Geist Mono', ui-monospace, monospace;
+
+  /* Forma y tamaños */
+  --mimi-radius: 0.75rem;
+  --mimi-radius-sm: min(calc(var(--mimi-radius) / 2), 6px);
+  --mimi-radius-card: min(calc(var(--mimi-radius) + 4px), 24px);
+  --mimi-badge-radius: 999px;
+  --mimi-control-height: 2.5rem;
+  --mimi-control-height-sm: 2rem;
+  --mimi-control-height-lg: 3rem;
+
+  /* Movimiento. `translate` mueve el pulgar del Switch (y --mimi-lift si se usa). */
+  --mimi-lift: 0px;
+  --mimi-press-scale: 0.975;
+  /* Escala al presionar de Switch y Checkbox (diseño: scale(0.9)) */
+  --mimi-press-scale-sm: 0.9;
+  --mimi-transition:
+    background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.25s ease,
+    scale 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), translate 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
+
+  /* Sombras */
+  --mimi-shadow-card:
+    0 0 0 1px oklch(0 0 0 / 0.02), 0 1px 2px oklch(0 0 0 / 0.04),
+    0 6px 12px -4px oklch(0 0 0 / 0.05), 0 20px 40px -16px oklch(0 0 0 / 0.12);
+  --mimi-shadow-primary:
+    0 1px 2px color-mix(in oklch, var(--mimi-primary) 25%, transparent),
+    0 4px 12px -4px color-mix(in oklch, var(--mimi-primary) 35%, transparent);
+  --mimi-shadow-primary-hover:
+    0 1px 2px color-mix(in oklch, var(--mimi-primary) 30%, transparent),
+    0 8px 18px -6px color-mix(in oklch, var(--mimi-primary) 42%, transparent);
+  --mimi-shadow-destructive:
+    0 1px 2px color-mix(in oklch, var(--mimi-destructive) 25%, transparent),
+    0 4px 12px -4px color-mix(in oklch, var(--mimi-destructive) 35%, transparent);
+  --mimi-shadow-destructive-hover:
+    0 1px 2px color-mix(in oklch, var(--mimi-destructive) 30%, transparent),
+    0 8px 18px -6px color-mix(in oklch, var(--mimi-destructive) 42%, transparent);
+  --mimi-shadow-neutral: 0 1px 2px oklch(0 0 0 / 0.06), 0 4px 10px -4px oklch(0 0 0 / 0.08);
+  --mimi-shadow-neutral-hover: 0 2px 4px oklch(0 0 0 / 0.06), 0 10px 20px -8px oklch(0 0 0 / 0.14);
+  /* Pulgar del Switch (igual en claro y oscuro) */
+  --mimi-shadow-thumb: 0 1px 3px oklch(0 0 0 / 0.2);
+
+  /* Derivados */
+  --mimi-primary-hover: color-mix(in oklch, var(--mimi-primary) 88%, var(--mimi-background));
+  --mimi-secondary-hover: color-mix(in oklch, var(--mimi-secondary) 80%, var(--mimi-foreground) 6%);
+  --mimi-destructive-hover: color-mix(
+    in oklch,
+    var(--mimi-destructive) 88%,
+    var(--mimi-background)
+  );
+  --mimi-ring-soft: color-mix(in oklch, var(--mimi-ring) 32%, transparent);
+  --mimi-destructive-soft: color-mix(in oklch, var(--mimi-destructive) 24%, transparent);
+  --mimi-switch-off: color-mix(in oklch, var(--mimi-foreground) 20%, transparent);
+
+  color-scheme: light;
+}
+
+/* ── Oscuro ────────────────────────────────────── */
+.dark {
+  --mimi-background: oklch(0.145 0 0);
+  --mimi-foreground: oklch(0.985 0 0);
+  --mimi-card: oklch(0.175 0 0);
+  --mimi-card-foreground: oklch(0.985 0 0);
+  --mimi-popover: oklch(0.175 0 0);
+  --mimi-popover-foreground: oklch(0.985 0 0);
+  --mimi-primary: oklch(0.922 0 0);
+  --mimi-primary-foreground: oklch(0.205 0 0);
+  --mimi-secondary: oklch(0.269 0 0);
+  --mimi-secondary-foreground: oklch(0.985 0 0);
+  --mimi-muted: oklch(0.225 0 0);
+  --mimi-muted-foreground: oklch(0.708 0 0);
+  --mimi-accent: oklch(0.269 0 0);
+  --mimi-accent-foreground: oklch(0.985 0 0);
+  --mimi-destructive: oklch(0.704 0.191 22.216);
+  --mimi-destructive-foreground: oklch(0.2 0.04 25);
+  --mimi-border: oklch(1 0 0 / 10%);
+  --mimi-input: oklch(1 0 0 / 15%);
+  --mimi-input-background: oklch(1 0 0 / 4.5%);
+  --mimi-ring: oklch(0.556 0 0);
+  --mimi-overlay: oklch(0 0 0 / 50%);
+
+  --mimi-shadow-card:
+    inset 0 1px 0 oklch(1 0 0 / 0.04), 0 1px 2px oklch(0 0 0 / 0.5),
+    0 20px 40px -16px oklch(0 0 0 / 0.7);
+  --mimi-shadow-primary:
+    0 1px 2px oklch(0 0 0 / 0.5),
+    0 4px 12px -4px color-mix(in oklch, var(--mimi-primary) 30%, transparent);
+  --mimi-shadow-primary-hover:
+    0 1px 2px oklch(0 0 0 / 0.5),
+    0 8px 18px -6px color-mix(in oklch, var(--mimi-primary) 40%, transparent);
+  --mimi-shadow-destructive:
+    0 1px 2px oklch(0 0 0 / 0.5),
+    0 4px 12px -4px color-mix(in oklch, var(--mimi-destructive) 30%, transparent);
+  --mimi-shadow-destructive-hover:
+    0 1px 2px oklch(0 0 0 / 0.5),
+    0 8px 18px -6px color-mix(in oklch, var(--mimi-destructive) 40%, transparent);
+  --mimi-shadow-neutral:
+    inset 0 1px 0 oklch(1 0 0 / 0.05), 0 1px 2px oklch(0 0 0 / 0.5),
+    0 4px 10px -4px oklch(0 0 0 / 0.6);
+  --mimi-shadow-neutral-hover:
+    inset 0 1px 0 oklch(1 0 0 / 0.06), 0 2px 4px oklch(0 0 0 / 0.5),
+    0 10px 20px -8px oklch(0 0 0 / 0.75);
+
+  /* Los derivados se redeclaran para que tomen la paleta oscura */
+  --mimi-primary-hover: color-mix(in oklch, var(--mimi-primary) 88%, var(--mimi-background));
+  --mimi-secondary-hover: color-mix(in oklch, var(--mimi-secondary) 80%, var(--mimi-foreground) 6%);
+  --mimi-destructive-hover: color-mix(
+    in oklch,
+    var(--mimi-destructive) 88%,
+    var(--mimi-background)
+  );
+  --mimi-ring-soft: color-mix(in oklch, var(--mimi-ring) 32%, transparent);
+  --mimi-destructive-soft: color-mix(in oklch, var(--mimi-destructive) 24%, transparent);
+  --mimi-switch-off: color-mix(in oklch, var(--mimi-foreground) 20%, transparent);
+
+  color-scheme: dark;
+}
+
+/* ── Movimiento reducido: sin escala al hacer clic ni transición de scale y translate ── */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --mimi-press-scale: 1;
+    --mimi-press-scale-sm: 1;
+    --mimi-transition:
+      background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.25s ease;
+  }
+}
+
+/* ── Tokens expuestos a Tailwind (inline: los valores son var() y deben resolverse en uso) ── */
+@theme inline {
+  --color-background: var(--mimi-background);
+  --color-foreground: var(--mimi-foreground);
+  --color-card: var(--mimi-card);
+  --color-card-foreground: var(--mimi-card-foreground);
+  --color-popover: var(--mimi-popover);
+  --color-popover-foreground: var(--mimi-popover-foreground);
+  --color-primary: var(--mimi-primary);
+  --color-primary-foreground: var(--mimi-primary-foreground);
+  --color-primary-hover: var(--mimi-primary-hover);
+  --color-secondary: var(--mimi-secondary);
+  --color-secondary-foreground: var(--mimi-secondary-foreground);
+  --color-secondary-hover: var(--mimi-secondary-hover);
+  --color-muted: var(--mimi-muted);
+  --color-muted-foreground: var(--mimi-muted-foreground);
+  --color-accent: var(--mimi-accent);
+  --color-accent-foreground: var(--mimi-accent-foreground);
+  --color-destructive: var(--mimi-destructive);
+  --color-destructive-foreground: var(--mimi-destructive-foreground);
+  --color-destructive-hover: var(--mimi-destructive-hover);
+  --color-destructive-soft: var(--mimi-destructive-soft);
+  --color-border: var(--mimi-border);
+  --color-input: var(--mimi-input);
+  --color-input-background: var(--mimi-input-background);
+  --color-ring: var(--mimi-ring);
+  --color-ring-soft: var(--mimi-ring-soft);
+  --color-overlay: var(--mimi-overlay);
+  --color-switch-off: var(--mimi-switch-off);
+
+  --radius-sm: var(--mimi-radius-sm);
+  --radius-md: calc(var(--mimi-radius) - 2px);
+  --radius-lg: var(--mimi-radius);
+  --radius-xl: calc(var(--mimi-radius) + 4px);
+  --radius-card: var(--mimi-radius-card);
+  --radius-badge: var(--mimi-badge-radius);
+
+  --shadow-card: var(--mimi-shadow-card);
+  --shadow-primary: var(--mimi-shadow-primary);
+  --shadow-primary-hover: var(--mimi-shadow-primary-hover);
+  --shadow-destructive: var(--mimi-shadow-destructive);
+  --shadow-destructive-hover: var(--mimi-shadow-destructive-hover);
+  --shadow-neutral: var(--mimi-shadow-neutral);
+  --shadow-neutral-hover: var(--mimi-shadow-neutral-hover);
+  --shadow-thumb: var(--mimi-shadow-thumb);
+
+  --font-sans: var(--mimi-font-sans);
+  --font-mono: var(--mimi-font-mono);
+
+  --animate-mimi-pulse: mimi-pulse 1.6s ease-in-out infinite;
+}
+
+@utility mimi-transition {
+  transition: var(--mimi-transition);
+}
+
+@layer base {
+  /* Tailwind 4 usa currentColor como color de borde por defecto */
+  *,
+  ::before,
+  ::after {
+    border-color: var(--mimi-border);
+  }
+
+  body {
+    background-color: var(--mimi-background);
+    color: var(--mimi-foreground);
+  }
+}
+
+@keyframes mimi-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes mimi-pulse {
+  50% {
+    opacity: 0.45;
+  }
+}

package/dist/templates/theme/types.ts

@@ -0,0 +1,124 @@
+/**
+ * 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.
+ */
+
+/** Colores. `colors` se aplica en claro y `darkColors` en oscuro. */
+export interface MimiColorTokens {
+  background?: string;
+  foreground?: string;
+  card?: string;
+  cardForeground?: string;
+  popover?: string;
+  popoverForeground?: string;
+  primary?: string;
+  primaryForeground?: string;
+  secondary?: string;
+  secondaryForeground?: string;
+  muted?: string;
+  mutedForeground?: string;
+  accent?: string;
+  accentForeground?: string;
+  destructive?: string;
+  destructiveForeground?: string;
+  border?: string;
+  input?: string;
+  inputBackground?: string;
+  ring?: string;
+  /** Fondo que oscurece la página detrás de paneles y diálogos. */
+  overlay?: string;
+}
+
+/** Sombras (`box-shadow` completo). `shadows` en claro y `darkShadows` en oscuro. */
+export interface MimiShadowTokens {
+  card?: string;
+  primary?: string;
+  primaryHover?: string;
+  destructive?: string;
+  destructiveHover?: string;
+  neutral?: string;
+  neutralHover?: string;
+  /** Pulgar del Switch. */
+  thumb?: string;
+}
+
+/** Radios fijos. Si no se definen, sm y card se calculan a partir de `radius`. */
+export interface MimiRadiusTokens {
+  sm?: string;
+  card?: string;
+  badge?: string;
+}
+
+export interface MimiFontTokens {
+  sans?: string;
+  mono?: string;
+}
+
+export interface MimiMotionTokens {
+  /** Lista de transiciones. Debe animar `scale` y `translate` (pulgar del Switch y `lift`). */
+  transition?: string;
+  pressScale?: string | number;
+  /** Escala al presionar de Switch y Checkbox. */
+  pressScaleSm?: string | number;
+  lift?: string;
+}
+
+/** Alturas compartidas por Button, Input y Textarea (cascada de la spec 6.2). */
+export interface MimiControlSizeTokens {
+  height?: string;
+  heightSm?: string;
+  heightLg?: string;
+}
+
+/** Tokens por componente. Cada componente los lee con la cascada de la spec 6.2. */
+export interface MimiControlTokens extends MimiControlSizeTokens {
+  radius?: string;
+  paddingX?: string;
+  fontSize?: string;
+  borderWidth?: string;
+  focusRingWidth?: string;
+}
+
+/** paddingX y fontSize se aplican al tamaño default; sm y lg usan los valores del diseño. */
+export interface MimiButtonTokens extends MimiControlTokens {
+  fontWeight?: string | number;
+  letterSpacing?: string;
+}
+
+export interface MimiInputTokens extends MimiControlTokens {
+  placeholderColor?: string;
+  disabledOpacity?: string | number;
+}
+
+export interface MimiCardTokens {
+  radius?: string;
+  borderWidth?: string;
+  shadow?: string;
+  paddingHeader?: string;
+  paddingContent?: string;
+  paddingFooter?: string;
+}
+
+export interface MimiComponentTokens {
+  button?: MimiButtonTokens;
+  input?: MimiInputTokens;
+  card?: MimiCardTokens;
+  // select y dialog se agregan en la Fase 4
+}
+
+export interface MimiThemePreset {
+  /** Solo informativo: no genera CSS. */
+  name?: string;
+  /** --mimi-radius */
+  radius?: string;
+  radii?: MimiRadiusTokens;
+  colors?: MimiColorTokens;
+  darkColors?: MimiColorTokens;
+  shadows?: MimiShadowTokens;
+  darkShadows?: MimiShadowTokens;
+  fonts?: MimiFontTokens;
+  motion?: MimiMotionTokens;
+  controls?: MimiControlSizeTokens;
+  components?: MimiComponentTokens;
+}

package/dist/templates/utils/cn.ts

@@ -0,0 +1,36 @@
+import { clsx, type ClassValue } from 'clsx';
+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
+ * nombre.
+ */
+const twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      shadow: [
+        'card',
+        'primary',
+        'primary-hover',
+        'destructive',
+        'destructive-hover',
+        'neutral',
+        'neutral-hover',
+        'thumb',
+      ],
+      radius: ['card', 'badge'],
+      animate: ['mimi-pulse'],
+    },
+    classGroups: {
+      transition: ['mimi-transition'],
+    },
+  },
+});
+
+/** Une clases con clsx y resuelve los conflictos de Tailwind (gana la última). */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}

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

@@ -0,0 +1,27 @@
+/**
+ * Estilos compartidos de Button, Input y Textarea (docs/design, hoja de componentes).
+ * Clases completas y literales para que Tailwind las detecte. Las alturas, el padding y el
+ * tamaño de letra los pone cada componente con su propia cascada de tokens (spec 6.2).
+ */
+
+/** Foco de botones: contorno del color de anillo, separado 2px. */
+export const buttonFocusStyles =
+  'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring';
+
+/** Foco de Input y Textarea: borde de anillo y halo ring-soft de 3px. */
+export const fieldFocusStyles =
+  'outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring-soft';
+
+/**
+ * Deshabilitado. `disabled:` para elementos nativos; `aria-disabled:` para a[mimiBtn],
+ * que además necesita pointer-events-none para no navegar.
+ */
+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. */
+export const controlInvalidStyles =
+  'aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-destructive-soft';
+
+/** Transición y escala al hacer clic. Solo botones. */
+export const controlPressStyles = 'mimi-transition active:scale-(--mimi-press-scale)';

package/dist/templates/utils/field-state.ts

@@ -0,0 +1,164 @@
+import {
+  DestroyRef,
+  InjectionToken,
+  type Signal,
+  afterNextRender,
+  computed,
+  inject,
+  signal,
+} from '@angular/core';
+import { NgControl, type ValidationErrors } from '@angular/forms';
+import { FormField } from '@angular/forms/signals';
+
+/**
+ * Un error del campo, igual para los tres sistemas de formularios.
+ *
+ * - `kind`: la clave del error en minúsculas (`required`, `email`, `minlength`…). Signal Forms
+ *   usa `minLength` / `maxLength`; se normalizan a los nombres de Reactive Forms.
+ * - `message`: el texto que trae el error (Signal Forms, desde el esquema de validación).
+ * - `params`: los datos del error con los nombres de Reactive Forms (`requiredLength`,
+ *   `actualLength`, `min`, `max`, `requiredPattern`…).
+ */
+export interface MimiFieldError {
+  kind: string;
+  message?: string;
+  params: Record<string, unknown>;
+}
+
+/** Estado de un campo de formulario, como signals (spec, sección 8). */
+export interface MimiFieldState {
+  invalid: Signal<boolean>;
+  touched: Signal<boolean>;
+  dirty: Signal<boolean>;
+  disabled: Signal<boolean>;
+  /** Inválido y ya tocado o modificado: el momento de mostrar el error. */
+  showError: Signal<boolean>;
+  /** Errores actuales, en orden. */
+  errors: Signal<readonly MimiFieldError[]>;
+}
+
+/**
+ * Lo que un control le cuenta a `mimi-form-field`: su elemento (para el `id` y el
+ * `aria-describedby`), su estado y si muestra el error (el formulario o `showError` a mano).
+ * Lo proveen Input, Textarea, Switch y Checkbox.
+ */
+export interface MimiFieldControl {
+  readonly controlElement: HTMLElement;
+  readonly fieldState: MimiFieldState;
+  readonly showInvalid: Signal<boolean>;
+}
+
+export const MIMI_FIELD_CONTROL = new InjectionToken<MimiFieldControl>('MIMI_FIELD_CONTROL');
+
+interface Snapshot {
+  invalid: boolean;
+  touched: boolean;
+  dirty: boolean;
+  disabled: boolean;
+  errors: readonly MimiFieldError[];
+}
+
+const EMPTY: Snapshot = {
+  invalid: false,
+  touched: false,
+  dirty: false,
+  disabled: false,
+  errors: [],
+};
+
+/**
+ * Lee el estado del campo del elemento actual, sea cual sea el sistema de formularios:
+ *
+ * - Signal Forms (`[formField]`): usa `FormField.state()`, que ya son signals.
+ * - Reactive Forms (`formControlName`, `[formControl]`) y `[(ngModel)]`: se suscribe a
+ *   `control.events` (los flags de AbstractControl no son signals, CLAUDE.md regla 7).
+ * - Sin formulario: todo en `false`.
+ *
+ * Con `formControlName` / `[formControl]` el control existe recién después de que esa directiva
+ * procesa sus entradas, que puede ser después de crear la nuestra; por eso la suscripción se
+ * intenta enseguida y, si todavía no hay control, después del primer render.
+ *
+ * Debe llamarse en un contexto de inyección (inicializador de una propiedad).
+ */
+export function injectFieldState(): MimiFieldState {
+  const formField = inject(FormField, { optional: true, self: true });
+  if (formField) {
+    const state = computed(() => formField.state());
+    return build(
+      computed<Snapshot>(() => ({
+        invalid: state().invalid(),
+        touched: state().touched(),
+        dirty: state().dirty(),
+        disabled: state().disabled(),
+        errors: state()
+          .errors()
+          .map((error) => fromSignalError(error)),
+      })),
+    );
+  }
+
+  const snapshot = signal<Snapshot>(EMPTY);
+  const ngControl = inject(NgControl, { optional: true, self: true });
+  if (ngControl) {
+    const destroyRef = inject(DestroyRef);
+    let connected = false;
+    const connect = () => {
+      const control = ngControl.control;
+      if (connected || !control) return;
+      connected = true;
+      const read = () =>
+        snapshot.set({
+          invalid: control.invalid,
+          touched: control.touched,
+          dirty: control.dirty,
+          disabled: control.disabled,
+          errors: fromValidationErrors(control.errors),
+        });
+      read();
+      const subscription = control.events.subscribe(read);
+      destroyRef.onDestroy(() => subscription.unsubscribe());
+    };
+    connect();
+    afterNextRender(connect);
+  }
+  return build(snapshot);
+}
+
+/** Estado vacío (sin formulario). Útil para controles que todavía no conocen su formulario. */
+export function emptyFieldState(): MimiFieldState {
+  return build(signal(EMPTY));
+}
+
+function build(snapshot: Signal<Snapshot>): MimiFieldState {
+  return {
+    invalid: computed(() => snapshot().invalid),
+    touched: computed(() => snapshot().touched),
+    dirty: computed(() => snapshot().dirty),
+    disabled: computed(() => snapshot().disabled),
+    showError: computed(() => snapshot().invalid && (snapshot().touched || snapshot().dirty)),
+    errors: computed(() => snapshot().errors, { equal: sameErrors }),
+  };
+}
+
+const sameErrors = (a: readonly MimiFieldError[], b: readonly MimiFieldError[]) =>
+  a.length === b.length && a.every((e, i) => e.kind === b[i].kind && e.message === b[i].message);
+
+/** Error de Signal Forms → MimiFieldError (nombres de Reactive Forms en params). */
+function fromSignalError(error: { kind: string; message?: string }): MimiFieldError {
+  const data = error as unknown as Record<string, unknown>;
+  const kind = error.kind.toLowerCase();
+  const params: Record<string, unknown> = { ...data };
+  if (kind === 'minlength') params['requiredLength'] = data['minLength'];
+  if (kind === 'maxlength') params['requiredLength'] = data['maxLength'];
+  delete params['fieldTree'];
+  return { kind, message: error.message, params };
+}
+
+/** ValidationErrors de Reactive Forms / ngModel → MimiFieldError[], en orden. */
+function fromValidationErrors(errors: ValidationErrors | null): MimiFieldError[] {
+  if (!errors) return [];
+  return Object.entries(errors).map(([key, value]) => ({
+    kind: key.toLowerCase(),
+    params: value && typeof value === 'object' ? (value as Record<string, unknown>) : {},
+  }));
+}