valtech-components 2.0.773 → 2.0.774

package/lib/components/atoms/pattern/motifs.d.ts

@@ -45,6 +45,12 @@ export interface PatternTile {
     bg: string;
     fg: string;
 }
+/**
+ * Genera UN tile con motif/bg/fg respetando densidades + contraste.
+ * Caller pasa rng (Math.random o seeded) — útil para reshuffle individual de
+ * tiles en `val-pattern` sin regenerar la grid completa.
+ */
+export declare function generateRandomTile(palette: string[], chevronDensity?: number, rng?: () => number): PatternTile;
 /** Genera matriz de tiles aplicando densidades + reglas de contraste. */
 export declare function generatePatternTiles(cfg: PatternGenConfig): PatternTile[];
 /**

package/lib/components/atoms/pattern/pattern.component.d.ts

@@ -39,15 +39,27 @@ export declare class PatternComponent implements OnDestroy {
     private readonly chevronDensity;
     private readonly preserveAspect;
     private readonly animated;
+    /** ms entre updates individuales de tiles (modo animated). Default 1200ms. */
     private readonly reshuffleInterval;
+    /** Cuántos tiles cambiar por tick (default 1 → cambio sutil). */
+    private readonly tilesPerTick;
     private timer?;
     /** Object-first input. Cambios disparan re-render por signals. */
     set props(value: PatternMetadata | undefined);
-    /** Tiles computed — se regenera cuando cambia seed/cols/rows/palette/density. */
+    /**
+     * Tiles signal — mutable. Se regenera completa cuando cambia seed/cols/rows/
+     * palette/density. En modo animated, tiles individuales se sobrescriben sin
+     * tocar el resto (efecto staggered).
+     */
     private readonly tiles;
     /** SVG completo como string sanitized para `[innerHTML]`. */
     readonly svgHtml: import("@angular/core").Signal<SafeHtml>;
     constructor();
+    /**
+     * Reemplaza `count` tiles random del grid actual con tiles nuevos generados.
+     * Usado por el modo animated para staggered reshuffle.
+     */
+    private mutateRandomTiles;
     ngOnDestroy(): void;
     private resolvePalette;
     private randomSeed;

package/lib/components/atoms/pattern/types.d.ts

@@ -7,10 +7,15 @@ import { PatternPaletteKey } from './motifs';
  * <val-pattern [props]="{ palette: 'purple', cols: 12, rows: 4, seed: 42 }" />
  * ```
  *
- * @example Animated (reshuffle cada 8s):
+ * @example Animated staggered (1 tile cada 1.2s, sutil):
  * ```html
  * <val-pattern [props]="{ palette: 'ink', cols: 16, rows: 8, animated: true }" />
  * ```
+ *
+ * @example Animated más activo (2 tiles cada 800ms):
+ * ```html
+ * <val-pattern [props]="{ animated: true, reshuffleInterval: 800, tilesPerTick: 2 }" />
+ * ```
  */
 export interface PatternMetadata {
     /**
@@ -33,12 +38,21 @@ export interface PatternMetadata {
      */
     chevronDensity?: number;
     /**
-     * Si `true`, el patrón se reshuffles automáticamente con fade entre seeds.
+     * Si `true`, el patrón hace **staggered reshuffle**: cada `reshuffleInterval`
+     * ms se reemplazan `tilesPerTick` tiles random — NO la grid entera.
      * Default: `false`.
      */
     animated?: boolean;
-    /** Intervalo en ms entre reshuffles (solo si `animated: true`). Default: `8000`. */
+    /**
+     * ms entre updates individuales de tiles (modo animated).
+     * Default: `1200` (~1 tile cada 1.2s con `tilesPerTick: 1`).
+     */
     reshuffleInterval?: number;
+    /**
+     * Cuántos tiles cambiar por tick (modo animated). Default: `1` (cambio sutil).
+     * Subir a 2-4 para efecto más vivo.
+     */
+    tilesPerTick?: number;
     /**
      * `slice` (default) — el patrón cubre todo el contenedor manteniendo aspect,
      * cropeando si necesario. `meet` — fit completo sin crop, deja espacio.

package/lib/version.d.ts

@@ -2,4 +2,4 @@
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-export declare const VERSION = "2.0.773";
+export declare const VERSION = "2.0.774";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.773",
+  "version": "2.0.774",
   "private": false,
   "bin": {
     "valtech-firebase-config": "./src/lib/services/firebase/scripts/generate-sw-config.js"