valtech-components 2.0.877 → 2.0.879

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

@@ -6,39 +6,69 @@
  *
  * Original spec: `assets/Valtech Pattern System.html` (single-page demo).
  * Cada motif es función `(fill: string) => string` que devuelve SVG inner
- * markup. Tile es 100×100 unidades; el motif se renderiza dentro de un `<g
+ * markup. Tile es 100x100 unidades; el motif se renderiza dentro de un `<g
  * transform="translate(col*100 row*100)">` con un `<rect width=100 height=100
  * fill=bg/>` de fondo.
  */
-export type PatternMotifKey = 'chev-r' | 'chev-l' | 'chev-d' | 'chev-u' | 'tri-tl' | 'tri-tr' | 'tri-bl' | 'tri-br' | 'solid' | 'diamond' | 'small-r' | 'small-l' | 'arrow-r' | 'arrow-l' | 'house-d' | 'half-l' | 'half-t';
+export type PatternMotifKey = 'chev-r' | 'chev-l' | 'chev-d' | 'chev-u' | 'tri-tl' | 'tri-tr' | 'tri-bl' | 'tri-br' | 'solid' | 'diamond' | 'small-r' | 'small-l' | 'arrow-r' | 'arrow-l' | 'house-d' | 'half-l' | 'half-t' | 'circle' | 'circle-sm' | 'dot' | 'cross' | 'x-mark' | 'slash-r' | 'slash-l' | 'corner-tl' | 'corner-tr' | 'corner-bl' | 'corner-br' | 'underscore' | 'num-0' | 'num-1' | 'num-2' | 'num-3' | 'num-4' | 'num-5' | 'num-6' | 'num-7' | 'num-8' | 'num-9';
 export declare const PATTERN_MOTIFS: Record<PatternMotifKey, (fg: string) => string>;
 export declare const MOTIF_KEYS: PatternMotifKey[];
-/** Chevron family — orientations + size variants + arrows. */
+/** Chevron family — orientaciones + variantes pequeñas. */
 export declare const CHEV_KEYS: PatternMotifKey[];
+/** Stroke family — líneas, cruces y el guión bajo del logo `>_`. */
+export declare const STROKE_KEYS: PatternMotifKey[];
+/** Numeric family — dígitos 0-9 en monospace bold. */
+export declare const NUM_KEYS: PatternMotifKey[];
+/** Circle / dot family — formas curvas centradas. */
+export declare const CIRCLE_KEYS: PatternMotifKey[];
+/** Diamond solo — forma geométrica angular centrada. */
+export declare const SHAPE_KEYS: PatternMotifKey[];
 /** Triangle / half-fill family. */
 export declare const TRI_KEYS: PatternMotifKey[];
-/** Center shape family (currently solo diamond). */
-export declare const SHAPE_KEYS: PatternMotifKey[];
-/** No-foreground tiles — solo el rect de fondo. */
+/** Corner arc family — mezcla suave con triangles. */
+export declare const CORNER_KEYS: PatternMotifKey[];
+/** No-foreground tiles — solo rect de fondo. */
 export declare const SOLID_KEYS: PatternMotifKey[];
-/** Built-in palettes — dark → light (8 colors). */
-export type PatternPaletteKey = 'purple' | 'ink' | 'lavender';
+/** Built-in palettes — 8 colores dark → light. */
+export type PatternPaletteKey = 'purple' | 'ink' | 'lavender' | 'midnight' | 'ember' | 'forest' | 'rose' | 'gold' | 'mono';
 export declare const PATTERN_PALETTES: Record<PatternPaletteKey, string[]>;
 /**
- * Mulberry32 seeded RNG — devuelve función `()=>[0,1)`.
- * Deterministic: mismo seed → misma secuencia. Útil para patrones reproducibles.
+ * Preset de composición del patrón. Controla qué familias predominan.
+ *
+ * - `branded`   → Chevrons dominantes (identidad Valtech `>_`). Default.
+ * - `geometric` → Triángulos, esquinas y círculos. Más arquitectónico.
+ * - `minimal`   → Espacios sólidos con trazos sutiles. Limpio, corporativo.
+ * - `dense`     → Mezcla rica de todas las familias. Máxima textura.
+ * - `code`      → Números, underscore y chevrons. Look de terminal.
  */
-export declare function mulberry32(seed: number): () => number;
+export type PatternStyleKey = 'branded' | 'geometric' | 'minimal' | 'dense' | 'code';
+export interface PatternDensityConfig {
+    /** Probabilidad de chevron family. */
+    chev: number;
+    /** Probabilidad de stroke family (cross, x, slash, underscore). */
+    stroke: number;
+    /** Probabilidad de círculos. */
+    circle: number;
+    /** Probabilidad de diamond. */
+    shape: number;
+    /** Probabilidad de solid (espacio vacío). */
+    solid: number;
+    /** Probabilidad de numeric family (0-9). Default: 0. */
+    num?: number;
+}
+export declare const PATTERN_STYLE_CONFIGS: Record<PatternStyleKey, PatternDensityConfig>;
 /**
- * Densidad de chevrons (0..1). El resto se reparte entre solid (20%), shape
- * (15%) y tri (resto), proporcional al gap left después del threshold.
+ * Mulberry32 seeded RNG — devuelve función `()=>[0,1)`.
+ * Deterministic: mismo seed → misma secuencia.
  */
+export declare function mulberry32(seed: number): () => number;
 export interface PatternGenConfig {
     cols: number;
     rows: number;
     seed: number;
     palette: string[];
     chevronDensity?: number;
+    style?: PatternStyleKey;
 }
 export interface PatternTile {
     motif: PatternMotifKey;
@@ -46,15 +76,13 @@ export interface PatternTile {
     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.
+ * Genera UN tile respetando densidades de familia + contraste de palette.
+ * Acepta un config opcional de densidades (de PatternStyleKey o chevronDensity legacy).
  */
-export declare function generateRandomTile(palette: string[], chevronDensity?: number, rng?: () => number): PatternTile;
-/** Genera matriz de tiles aplicando densidades + reglas de contraste. */
+export declare function generateRandomTile(palette: string[], chevronDensity?: number, rng?: () => number, densityConfig?: PatternDensityConfig): PatternTile;
+/** Genera matriz completa de tiles. */
 export declare function generatePatternTiles(cfg: PatternGenConfig): PatternTile[];
 /**
  * Renderiza el inner SVG (sin el `<svg>` root) para una matriz de tiles.
- * Caller wraps en `<svg viewBox="0 0 {cols*100} {rows*100}" preserveAspectRatio="xMidYMid slice">`.
  */
 export declare function renderPatternSvgInner(tiles: PatternTile[], cols: number, baseColor: string): string;

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

@@ -37,14 +37,12 @@ export declare class PatternComponent implements OnDestroy {
     private readonly seed;
     private readonly paletteRef;
     private readonly chevronDensity;
+    private readonly patternStyle;
     private readonly preserveAspect;
     private readonly animated;
-    /** ms entre reshuffles (modo animated). Default 8000ms — "de vez en cuando". */
     private readonly reshuffleInterval;
-    /** Tiles a cambiar por tick. 0 → reseed grid completo (default). >0 → staggered. */
     private readonly tilesPerTick;
     private timer?;
-    /** Object-first input. Cambios disparan re-render por signals. */
     set props(value: PatternMetadata | undefined);
     /**
      * Tiles signal — mutable. Se regenera completa cuando cambia seed/cols/rows/

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

@@ -1,4 +1,4 @@
-import { PatternPaletteKey } from './motifs';
+import { PatternPaletteKey, PatternStyleKey } from './motifs';
 /**
  * Configuración del componente `val-pattern`.
  *
@@ -7,22 +7,39 @@ import { PatternPaletteKey } from './motifs';
  * <val-pattern [props]="{ palette: 'purple', cols: 12, rows: 4, seed: 42 }" />
  * ```
  *
- * @example Animated whole-grid reshuffle (cada 8s — default):
+ * @example Animated whole-grid reshuffle (cada 10s):
  * ```html
- * <val-pattern [props]="{ palette: 'ink', cols: 16, rows: 8, animated: true }" />
+ * <val-pattern [props]="{ palette: 'midnight', cols: 14, rows: 5, animated: true, reshuffleInterval: 10000 }" />
  * ```
  *
  * @example Animated staggered (2 tiles cada 800ms — sutil):
  * ```html
  * <val-pattern [props]="{ animated: true, reshuffleInterval: 800, tilesPerTick: 2 }" />
  * ```
+ *
+ * @example Preset geométrico con paleta ember:
+ * ```html
+ * <val-pattern [props]="{ palette: 'ember', style: 'geometric', cols: 10, rows: 4 }" />
+ * ```
  */
 export interface PatternMetadata {
     /**
-     * Palette built-in (`'purple' | 'ink' | 'lavender'`) o array custom de 8
-     * colores dark → light. Default: `'purple'`.
+     * Palette built-in o array custom de 8 colores dark → light.
+     * Built-ins: `'purple' | 'ink' | 'lavender' | 'midnight' | 'ember' | 'forest' | 'rose' | 'gold' | 'mono'`.
+     * Default: `'purple'`.
      */
     palette?: PatternPaletteKey | string[];
+    /**
+     * Preset de composición de familias de motifs.
+     * - `branded`   → Chevrons dominantes (identidad Valtech). Default.
+     * - `geometric` → Triángulos, esquinas redondeadas y círculos.
+     * - `minimal`   → Mayoría sólido con trazos sutiles. Look corporativo limpio.
+     * - `dense`     → Mezcla rica de todas las familias. Máxima textura.
+     * - `code`      → Números, underscore `_` y chevrons. Look de terminal/código.
+     *
+     * Cuando se usa `style`, sobreescribe `chevronDensity`.
+     */
+    style?: PatternStyleKey;
     /** Columnas del grid. Default: 12. */
     cols?: number;
     /** Filas del grid. Default: 4. */
@@ -33,29 +50,31 @@ export interface PatternMetadata {
      */
     seed?: number;
     /**
-     * Densidad de chevrons (0..1). El resto se reparte entre solid/shape/tri.
+     * Densidad de chevrons (0..1). Ignorado si se pasa `style`.
      * Default: `0.55`.
      */
     chevronDensity?: number;
     /**
-     * Si `true`, el patrón hace **staggered reshuffle**: cada `reshuffleInterval`
-     * ms se reemplazan `tilesPerTick` tiles random — NO la grid entera.
+     * Si `true`, el patrón anima tiles periódicamente.
+     * Con `tilesPerTick: 0` (default): reseed completo de la grid.
+     * Con `tilesPerTick > 0`: reshuffle parcial (staggered — más sutil).
      * Default: `false`.
      */
     animated?: boolean;
     /**
-     * ms entre updates individuales de tiles (modo animated).
-     * Default: `1200` (~1 tile cada 1.2s con `tilesPerTick: 1`).
+     * ms entre updates (modo animated).
+     * Default: `8000`.
      */
     reshuffleInterval?: number;
     /**
-     * Cuántos tiles cambiar por tick (modo animated). Default: `1` (cambio sutil).
-     * Subir a 2-4 para efecto más vivo.
+     * Cuántos tiles cambiar por tick (modo animated).
+     * `0` → reseed grid completa. `1-N` → staggered sutil.
+     * Default: `0`.
      */
     tilesPerTick?: number;
     /**
-     * `slice` (default) — el patrón cubre todo el contenedor manteniendo aspect,
-     * cropeando si necesario. `meet` — fit completo sin crop, deja espacio.
+     * `slice` (default) — cubre todo el contenedor con crop si necesario.
+     * `meet` — fit completo sin crop.
      */
     preserveAspect?: 'slice' | 'meet';
 }

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.877";
+export declare const VERSION = "2.0.879";

package/package.json

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