@mks2508/better-logger 0.14.0-alpha.2 → 0.18.2-alpha.2

package/dist/chunks/styling-Cel2wPRy.cjs

@@ -0,0 +1,1645 @@
+//#region src/styling/StyleBuilder.ts
+/**
+* @fileoverview StyleBuilder — constructor fluido de estilos CSS para
+* `%c`-formatting del console. Basis de todos los gradientes, badges,
+* presets y estilos por nivel del logger.
+*/
+/**
+* Constructor fluido de estilos CSS orientado al `%c`-formatting del
+* DevTools console.
+*
+* Cada método empuja una declaración CSS a un buffer interno y retorna
+* `this`, lo que permite encadenar llamadas para componer un estilo
+* completo en una sola expresión. El string final se materializa con
+* {@link StyleBuilder.build}, que une todas las declaraciones con `"; "`
+* — exactamente el formato que espera `console.log("%c...", style)`.
+*
+* Está pensado como bloque base de la capa de styling del logger: los
+* {@link StylePresets} se construyen con esta clase, y el proxy exportado
+* `$` no es más que una instancia fresca expuesta vía `Proxy` para
+* usarse ad-hoc sin instanciar manualmente.
+*
+* @example
+* // Estilo inline para un solo log
+* const banner = new StyleBuilder()
+*   .bg('linear-gradient(135deg, #667eea 0%, #764ba2 100%)')
+*   .color('#ffffff')
+*   .padding('4px 8px')
+*   .rounded('4px')
+*   .bold()
+*   .build();
+* console.log('%c MiApp ', banner);
+*
+* @example
+* // Clonar + variar sin mutar el builder original (útil para
+* // compartir una base entre variantes de badge)
+* const base = new StyleBuilder().padding('2px 6px').rounded('3px');
+* const ok = base.clone().color('#00b894').build();
+* const warn = base.clone().color('#fdcb6e').build();
+*
+* @see {@link StylePresets} para presets listos (success, error, warning, ...).
+* @see {@link $} para el proxy global reutilizable sin instanciar.
+*/
+var StyleBuilder = class StyleBuilder {
+	styles = [];
+	/**
+	* Crea un builder opcionalmente inicializado con una declaración CSS
+	* base (p.ej. un fragmento de estilo compartido del que arrancar).
+	*
+	* @param {string} [baseStyle] - Declaración CSS inicial en formato
+	* `"prop: value"`. Si se omite, el builder arranca vacío y se rellena
+	* vía los métodos chainable.
+	*
+	* @example
+	* const sb = new StyleBuilder('color: #333');
+	* sb.bg('#eee').build(); // => "color: #333; background: #eee"
+	*/
+	constructor(baseStyle = "") {
+		if (baseStyle) this.styles.push(baseStyle);
+	}
+	/**
+	* Define el `background` del estilo. Acepta tanto colores planos
+	* (`#1e1e1e`) como gradientes CSS completos (`linear-gradient(...)`),
+	* que es lo que da el efecto "badge con color" característico del
+	* logger por nivel.
+	*
+	* @param {string} background - Valor crudo para la propiedad CSS
+	* `background` (color, gradiente o shorthand).
+	* @returns {StyleBuilder} `this` para encadenar más reglas.
+	*
+	* @example
+	* new StyleBuilder().bg('linear-gradient(135deg, #00b894, #00a085)');
+	*/
+	bg(background) {
+		this.styles.push(`background: ${background}`);
+		return this;
+	}
+	/**
+	* Define el `color` (color del texto). Es el principal contraste
+	* contra el `background`: en badges con gradiente se suele usar
+	* `#ffffff`, mientras que en logs "muted" se rebaja la opacidad o
+	* se usa un gris (`#6c757d`).
+	*
+	* @param {string} color - Valor CSS de color (hex, rgb, named, ...).
+	* @returns {StyleBuilder} `this` para encadenar más reglas.
+	*
+	* @example
+	* new StyleBuilder().bg('#1e1e1e').color('#00ffff');
+	*/
+	color(color) {
+		this.styles.push(`color: ${color}`);
+		return this;
+	}
+	/**
+	* Define el shorthand `border`. Útil para tags tipo "outline" sobre
+	* fondos neutros (ver preset `accent`) donde un borde sutil
+	* (`1px solid #dee2e6`) separa el badge del contenido sin saturar.
+	*
+	* @param {string} border - Shorthand CSS `border` completo
+	* (`"1px solid #dee2e6"`, `"2px dashed #e84393"`, ...).
+	* @returns {StyleBuilder} `this` para encadenar más reglas.
+	*
+	* @example
+	* new StyleBuilder().border('1px solid #dee2e6').padding('2px 6px');
+	*/
+	border(border) {
+		this.styles.push(`border: ${border}`);
+		return this;
+	}
+	/**
+	* Define el `box-shadow`. Se usa sobre todo para efectos neón o de
+	* glow (preset `neon`), donde una sombra con alfa baja
+	* (`0 0 10px rgba(0,255,255,0.5)`) genera el halo alrededor del
+	* badge sin necesidad de animaciones.
+	*
+	* @param {string} shadow - Shorthand CSS `box-shadow`.
+	* @returns {StyleBuilder} `this` para encadenar más reglas.
+	*
+	* @example
+	* new StyleBuilder().shadow('0 0 10px rgba(0, 255, 255, 0.5)');
+	*/
+	shadow(shadow) {
+		this.styles.push(`box-shadow: ${shadow}`);
+		return this;
+	}
+	/**
+	* Define el `padding` interno del badge. El valor típico en los
+	* presets del logger es `'4px 8px'` (vertical/horizontal), lo justo
+	* para que el texto respire sin engordar demasiado la línea de log.
+	*
+	* @param {string} padding - Shorthand CSS `padding`.
+	* @returns {StyleBuilder} `this` para encadenar más reglas.
+	*
+	* @example
+	* new StyleBuilder().padding('4px 8px').rounded('4px');
+	*/
+	padding(padding) {
+		this.styles.push(`padding: ${padding}`);
+		return this;
+	}
+	/**
+	* Define el `margin` externo. Rara vez se usa en estilos de console
+	* (el flujo del DevTools no respeta margin igual que el DOM), pero
+	* queda expuesto para casos donde se quiera separar visualmente un
+	* bloque de logs contiguos.
+	*
+	* @param {string} margin - Shorthand CSS `margin`.
+	* @returns {StyleBuilder} `this` para encadenar más reglas.
+	*
+	* @example
+	* new StyleBuilder().margin('0 0 4px 0');
+	*/
+	margin(margin) {
+		this.styles.push(`margin: ${margin}`);
+		return this;
+	}
+	/**
+	* Define el `border-radius`. Redondea las esquinas del badge para
+	* darle acabado de "pill" / "chip" en lugar de bloque recto.
+	*
+	* @param {string} [radius='4px'] - Valor CSS de `border-radius`.
+	* @returns {StyleBuilder} `this` para encadenar más reglas.
+	*
+	* @example
+	* new StyleBuilder().rounded('999px'); // pill completo
+	*/
+	rounded(radius = "4px") {
+		this.styles.push(`border-radius: ${radius}`);
+		return this;
+	}
+	/**
+	* Aplica `font-weight: bold`. Marca el texto del badge como enfatizado:
+	* los presets por nivel (`success`, `error`, ...) lo incluyen para que
+	* el severity destaque sobre el resto de la línea de log.
+	*
+	* @returns {StyleBuilder} `this` para encadenar más reglas.
+	*
+	* @example
+	* new StyleBuilder().bg('#e84393').color('#fff').bold();
+	*/
+	bold() {
+		this.styles.push("font-weight: bold");
+		return this;
+	}
+	/**
+	* Define el `font-family`. Recibe el stack completo (coma-incluido)
+	* tal cual se inyecta en CSS. Para stacks ya probados en DevTools,
+	* preferir los atajos {@link StyleBuilder.mono} y
+	* {@link StyleBuilder.system} en lugar de escribir el stack a mano.
+	*
+	* @param {string} font - Stack de `font-family` CSS.
+	* @returns {StyleBuilder} `this` para encadenar más reglas.
+	*
+	* @example
+	* new StyleBuilder().font('"JetBrains Mono", monospace');
+	*/
+	font(font) {
+		this.styles.push(`font-family: ${font}`);
+		return this;
+	}
+	/**
+	* Atajo de {@link StyleBuilder.font} con un stack monospace portable
+	* (`Monaco, Consolas, "Courier New", monospace`). Es el stack que usa
+	* el preset `muted` para logs de detalle/auxiliares, donde la
+	* alineación monoespaciada ayuda a escanear tablas y pares k=v.
+	*
+	* @returns {StyleBuilder} `this` para encadenar más reglas.
+	*
+	* @example
+	* new StyleBuilder().mono().size('12px').color('#6c757d');
+	*/
+	mono() {
+		return this.font("Monaco, Consolas, \"Courier New\", monospace");
+	}
+	/**
+	* Atajo de {@link StyleBuilder.font} con el stack "system-ui" nativo
+	* del SO del usuario. Útil cuando se quiere que el log se integre
+	* visualmente con la UI nativa en lugar de marcar como "técnico".
+	*
+	* @returns {StyleBuilder} `this` para encadenar más reglas.
+	*
+	* @example
+	* new StyleBuilder().system().size('14px');
+	*/
+	system() {
+		return this.font("system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif");
+	}
+	/**
+	* Define el `font-size`. El valor por defecto del DevTools suele ser
+	* suficiente; este método se usa para logs auxiliares (preset `muted`
+	* baja a `12px`) o para encabezados tipo banner donde se sube a
+	* `18px`-`24px`.
+	*
+	* @param {string} size - Valor CSS de `font-size` (`'12px'`, `'1.1em'`).
+	* @returns {StyleBuilder} `this` para encadenar más reglas.
+	*
+	* @example
+	* new StyleBuilder().size('20px').bold();
+	*/
+	size(size) {
+		this.styles.push(`font-size: ${size}`);
+		return this;
+	}
+	/**
+	* Define el `line-height`. Aplicable cuando un badge envuelve varias
+	* líneas o cuando se quiere controlar la altura visual del bloque de
+	* log para que no "salte" respecto al texto adyacente.
+	*
+	* @param {string} height - Valor CSS de `line-height` (`'1.4'`, `'20px'`).
+	* @returns {StyleBuilder} `this` para encadenar más reglas.
+	*
+	* @example
+	* new StyleBuilder().lineHeight('1.5').padding('8px');
+	*/
+	lineHeight(height) {
+		this.styles.push(`line-height: ${height}`);
+		return this;
+	}
+	/**
+	* Aplica `text-decoration: underline`. Útil para resaltar un token
+	* concreto dentro del mensaje (p.ej. un ID o un path) cuando el
+	* `color` por sí solo no basta para marcar jerarquía visual.
+	*
+	* @returns {StyleBuilder} `this` para encadenar más reglas.
+	*
+	* @example
+	* new StyleBuilder().underline().color('#0984e3');
+	*/
+	underline() {
+		this.styles.push("text-decoration: underline");
+		return this;
+	}
+	/**
+	* Aplica `text-transform: uppercase`. Convierte el texto a mayúsculas
+	* sin mutar el string original: ideal para tags cortos como severity
+	* (`INFO`, `WARN`) o siglas que conviene leer en bloque.
+	*
+	* @returns {StyleBuilder} `this` para encadenar más reglas.
+	*
+	* @example
+	* new StyleBuilder().uppercase().bold().padding('2px 6px');
+	*/
+	uppercase() {
+		this.styles.push("text-transform: uppercase");
+		return this;
+	}
+	/**
+	* Define la `opacity` global del estilo (0 a 1). Es el mecanismo
+	* recomendado para "apagar" un log sin tener que oscurecer el color
+	* a mano: sobre fondo oscuro, bajar opacity a `0.6` da el efecto
+	* muted sin perder legibilidad del hue.
+	*
+	* @param {number} value - Valor de opacidad entre `0` (invisible) y
+	* `1` (opaco).
+	* @returns {StyleBuilder} `this` para encadenar más reglas.
+	*
+	* @example
+	* new StyleBuilder().opacity(0.5).color('#999');
+	*/
+	opacity(value) {
+		this.styles.push(`opacity: ${value}`);
+		return this;
+	}
+	/**
+	* Define la propiedad `display`. Expuesta por completitud: en la
+	* mayoría de estilos de console el `display` del badge es controlado
+	* por el propio DevTools y este setter no tiene efecto visible, pero
+	* queda disponible para casos de render en contenedores DOM reales
+	* (preview components, overlays de playground).
+	*
+	* @param {string} value - Valor CSS de `display` (`'inline-block'`,
+	* `'flex'`, ...).
+	* @returns {StyleBuilder} `this` para encadenar más reglas.
+	*
+	* @example
+	* new StyleBuilder().display('inline-block').padding('4px 8px');
+	*/
+	display(value) {
+		this.styles.push(`display: ${value}`);
+		return this;
+	}
+	/**
+	* Define la propiedad `position`. Mismo alcance que
+	* {@link StyleBuilder.display}: no afecta al flujo normal del
+	* DevTools console, pero queda disponible para estilos que se
+	* reutilizan fuera del console (playground DOM, tests visuales).
+	*
+	* @param {string} value - Valor CSS de `position` (`'relative'`,
+	* `'absolute'`, ...).
+	* @returns {StyleBuilder} `this` para encadenar más reglas.
+	*
+	* @example
+	* new StyleBuilder().position('relative').display('inline-block');
+	*/
+	position(value) {
+		this.styles.push(`position: ${value}`);
+		return this;
+	}
+	/**
+	* Define la propiedad `transform`. Permite aplicar traslaciones,
+	* escalados o rotaciones al estilo. Útil en el playground DOM para
+	* micro-interacciones (hover scale, énfasis de banner); en el console
+	* crudo el soporte varía según navegador.
+	*
+	* @param {string} value - Valor CSS de `transform` (`'scale(1.1)'`,
+	* `'translateY(-2px)'`, ...).
+	* @returns {StyleBuilder} `this` para encadenar más reglas.
+	*
+	* @example
+	* new StyleBuilder().transform('scale(1.05)');
+	*/
+	transform(value) {
+		this.styles.push(`transform: ${value}`);
+		return this;
+	}
+	/**
+	* Define la propiedad `animation`. Aplica keyframes definidos en el
+	* contexto de render; en el DevTools console el soporte de animaciones
+	* es limitado y solo se materializa en el playground DOM o en
+	* overlays HTML, no en el flujo plano de logs.
+	*
+	* @param {string} value - Shorthand CSS `animation`.
+	* @returns {StyleBuilder} `this` para encadenar más reglas.
+	*
+	* @example
+	* new StyleBuilder().animation('pulse 1s ease-in-out infinite');
+	*/
+	animation(value) {
+		this.styles.push(`animation: ${value}`);
+		return this;
+	}
+	/**
+	* Define la propiedad `transition`. Mismo alcance que
+	* {@link StyleBuilder.animation}: pensado para el playground DOM,
+	* donde los estilos del logger se reutilizan en elementos que sí
+	* soportan transiciones (hover, focus, state changes).
+	*
+	* @param {string} value - Shorthand CSS `transition`.
+	* @returns {StyleBuilder} `this` para encadenar más reglas.
+	*
+	* @example
+	* new StyleBuilder().transition('background 200ms ease');
+	*/
+	transition(value) {
+		this.styles.push(`transition: ${value}`);
+		return this;
+	}
+	/**
+	* Define la propiedad `cursor`. Aplicable cuando el estilo se reutiliza
+	* en elementos interactivos del playground (chips clicables, badges con
+	* tooltip) donde se quiere sugerir affordance de click.
+	*
+	* @param {string} value - Valor CSS de `cursor` (`'pointer'`,
+	* `'help'`, ...).
+	* @returns {StyleBuilder} `this` para encadenar más reglas.
+	*
+	* @example
+	* new StyleBuilder().cursor('pointer').rounded('4px');
+	*/
+	cursor(value) {
+		this.styles.push(`cursor: ${value}`);
+		return this;
+	}
+	/**
+	* Escape hatch para cualquier propiedad CSS que no tenga método
+	* dedicado. Empuja la declaración `property: value` tal cual al
+	* buffer, sin validación — útil para props modernas
+	* (`backdrop-filter`, `clip-path`, `text-shadow`) o vendor prefixes.
+	*
+	* @param {string} property - Nombre de la propiedad CSS.
+	* @param {string} value - Valor crudo de la propiedad.
+	* @returns {StyleBuilder} `this` para encadenar más reglas.
+	*
+	* @example
+	* new StyleBuilder().custom('backdrop-filter', 'blur(8px)');
+	*/
+	custom(property, value) {
+		this.styles.push(`${property}: ${value}`);
+		return this;
+	}
+	/**
+	* Alias de {@link StyleBuilder.custom}. Mismo comportamiento exacto,
+	* expuesto solo porque `css(prop, val)` lee mejor como DSL inline
+	* cuando se está encadenando mucho.
+	*
+	* @param {string} property - Nombre de la propiedad CSS.
+	* @param {string} value - Valor crudo de la propiedad.
+	* @returns {StyleBuilder} `this` para encadenar más reglas.
+	*
+	* @example
+	* new StyleBuilder().css('letter-spacing', '0.5px');
+	*/
+	css(property, value) {
+		return this.custom(property, value);
+	}
+	/**
+	* Materializa el string CSS final uniendo todas las declaraciones
+	* acumuladas con `"; "`. Es el formato exacto que espera el segundo
+	* argumento de `console.log("%c…", style)` — el resultado se puede
+	* pasar directo al logger o al DevTools.
+	*
+	* @returns {string} String CSS listo para `%c`-formatting.
+	*
+	* @example
+	* const css = new StyleBuilder().bg('#000').color('#0ff').build();
+	* console.log('%c DEBUG ', css);
+	*/
+	build() {
+		return this.styles.join("; ");
+	}
+	/**
+	* Vacía el buffer de estilos y reinicia el builder al estado inicial.
+	* Útil cuando se reutiliza la misma instancia en un bucle para
+	* generar variantes (p.ej. render de N badges con estilo derivado)
+	* sin pagar el costo de instanciar un builder nuevo en cada pasada.
+	*
+	* @returns {StyleBuilder} `this` ya vaciado, listo para reutilizar.
+	*
+	* @example
+	* const sb = new StyleBuilder();
+	* for (const lvl of ['info', 'warn', 'error']) {
+	*   sb.clear().bg(COLORS[lvl]).color('#fff').build();
+	* }
+	*/
+	clear() {
+		this.styles = [];
+		return this;
+	}
+	/**
+	* Devuelve una copia independiente del builder con los mismos estilos
+	* acumulados. La clave para variar un estilo base sin mutar el
+	* original: el clone comparte las declaraciones hasta el momento del
+	* `clone()`, pero a partir de ahí cada uno acumula por su lado.
+	*
+	* @returns {StyleBuilder} Nuevo builder con el mismo buffer de estilos.
+	*
+	* @example
+	* const base = new StyleBuilder().padding('2px 6px').rounded('3px');
+	* const ok = base.clone().color('#00b894').build();
+	* const err = base.clone().color('#e84393').build();
+	*/
+	clone() {
+		const cloned = new StyleBuilder();
+		cloned.styles = [...this.styles];
+		return cloned;
+	}
+	/**
+	* Anexa las declaraciones de otro builder al final del buffer actual.
+	* Útil para componer un estilo a partir de capas (p.ej. base común +
+	* override por tema) sin perder la trazabilidad de quién aportó qué.
+	*
+	* No deduplica: si ambos builders setean `color`, el resultado tendrá
+	* dos declaraciones y el navegador se queda con la última.
+	*
+	* @param {StyleBuilder} other - Builder cuyas declaraciones se anexan.
+	* @returns {StyleBuilder} `this` con los estilos mergueados.
+	*
+	* @example
+	* const base = new StyleBuilder().padding('4px 8px');
+	* const theme = new StyleBuilder().bg('#222').color('#eee');
+	* base.merge(theme).build();
+	*/
+	merge(other) {
+		this.styles.push(...other.styles);
+		return this;
+	}
+};
+/**
+* Construye el `Proxy` que envuelve un {@link StyleBuilder} fresco para
+* exponer una instancia "always-on" sin necesidad de instanciar la clase
+* a mano. El handler bindea cada método al builder interno al primer
+* acceso, de forma que las llamadas encadenadas (`$.bg(...).color(...)`)
+* operan sobre la misma instancia subyacente.
+*
+* @internal Helper del proxy exportado {@link $}; no es API pública.
+* @returns Instancia proxy sobre un `StyleBuilder`.
+*/
+function createStyler() {
+	const builder = new StyleBuilder();
+	return new Proxy(builder, { get(target, prop) {
+		if (prop in target) {
+			const method = target[prop];
+			if (typeof method === "function") return method.bind(target);
+			return method;
+		}
+	} });
+}
+createStyler();
+/**
+* Catálogo de factories de estilos pre-armados para los casos de uso más
+* comunes en logging: un preset por severity (`success`/`error`/`warning`/
+* `info`/`debug`), uno para texto secundario (`muted`), uno para tags
+* neutros (`accent`) y uno decorativo (`neon`).
+*
+* Cada preset es una función zero-arg que devuelve un {@link StyleBuilder}
+* nuevo, ya configurado y listo para `.build()` o para extender con más
+* reglas antes del build. El patrón factory evita compartir estado entre
+* llamadas: cada invocación es independiente.
+*
+* @example
+* // Usar un preset tal cual
+* console.log('%c OK ', StylePresets.success().build());
+*
+* @example
+* // Extender un preset con reglas extra antes de materializar
+* const css = StylePresets.info()
+*   .custom('text-shadow', '0 1px 0 rgba(0,0,0,0.3)')
+*   .build();
+*
+* @see {@link StyleBuilder} para la API completa de reglas encadenables.
+*/
+const StylePresets = {
+	/**
+	* Preset para severity "success" (operación completada OK). Gradiente
+	* verde → verde oscuro, texto blanco, badge con padding/bold/radius
+	* estándar.
+	*
+	* @returns {StyleBuilder} Estilo verde de éxito.
+	*
+	* @example
+	* console.log('%c LOGIN OK ', StylePresets.success().build());
+	*/
+	success: () => new StyleBuilder().bg("linear-gradient(135deg, #00b894 0%, #00a085 100%)").color("#ffffff").padding("4px 8px").rounded("4px").bold(),
+	/**
+	* Preset para severity "error" (fallo que requiere atención). Gradiente
+	* rosa → rojo intenso, texto blanco, badge bold para destacar sobre
+	* el resto de la línea.
+	*
+	* @returns {StyleBuilder} Estilo rojo de error.
+	*
+	* @example
+	* console.log('%c DB DOWN ', StylePresets.error().build());
+	*/
+	error: () => new StyleBuilder().bg("linear-gradient(135deg, #e84393 0%, #d63031 100%)").color("#ffffff").padding("4px 8px").rounded("4px").bold(),
+	/**
+	* Preset para severity "warning" (situación recuperable pero a vigilar).
+	* Gradiente ámbar → naranja cálido, texto oscuro (`#2d3436`) para
+	* mantener contraste sobre fondo claro.
+	*
+	* @returns {StyleBuilder} Estilo ámbar de advertencia.
+	*
+	* @example
+	* console.log('%c RATE LIMIT ', StylePresets.warning().build());
+	*/
+	warning: () => new StyleBuilder().bg("linear-gradient(135deg, #fdcb6e 0%, #e17055 100%)").color("#2d3436").padding("4px 8px").rounded("4px").bold(),
+	/**
+	* Preset para severity "info" (mensaje informativo, flujo normal).
+	* Gradiente azul claro → azul medio, texto blanco, badge estándar.
+	*
+	* @returns {StyleBuilder} Estilo azul informativo.
+	*
+	* @example
+	* console.log('%c USER LOGIN ', StylePresets.info().build());
+	*/
+	info: () => new StyleBuilder().bg("linear-gradient(135deg, #74b9ff 0%, #0984e3 100%)").color("#ffffff").padding("4px 8px").rounded("4px").bold(),
+	/**
+	* Preset para severity "debug" (traza de diagnóstico, normalmente
+	* oculta en producción). Gradiente índigo → púrpura, distinto del
+	* azul de `info` para que se distinga visualmente.
+	*
+	* @returns {StyleBuilder} Estilo púrpura de debug.
+	*
+	* @example
+	* console.log('%c CACHE MISS ', StylePresets.debug().build());
+	*/
+	debug: () => new StyleBuilder().bg("linear-gradient(135deg, #667eea 0%, #764ba2 100%)").color("#ffffff").padding("4px 8px").rounded("4px").bold(),
+	/**
+	* Preset para texto secundario (timestamps, metadatos, contexto
+	* auxiliar). Sin fondo, color gris y font monospace pequeño (`12px`):
+	* pensado para que el ojo lo lea como "de apoyo" y no compita con el
+	* severity principal.
+	*
+	* @returns {StyleBuilder} Estilo gris monoespaciado y reducido.
+	*
+	* @example
+	* console.log('%c 2026-01-01T12:00:00Z ', StylePresets.muted().build());
+	*/
+	muted: () => new StyleBuilder().color("#6c757d").font("Monaco, Consolas, monospace").size("12px"),
+	/**
+	* Preset para tags neutros sobre fondo claro (categorías, IDs, labels
+	* que no son severity). Fondo gris muy claro, texto gris medio, borde
+	* sutil y padding más ajustado que los presets de severity para que
+	* conviva visualmente con ellos.
+	*
+	* @returns {StyleBuilder} Estilo "chip" neutro con borde.
+	*
+	* @example
+	* console.log('%c svc:auth ', StylePresets.accent().build());
+	*/
+	accent: () => new StyleBuilder().bg("#f8f9fa").color("#495057").padding("2px 6px").rounded("3px").border("1px solid #dee2e6"),
+	/**
+	* Preset decorativo neón (gradiente azul oscuro → rojo coral con halo
+	* cyan). Pensado para banners o highlights puntuales que quieren llamar
+	* la atención por estética, no por severity. El `box-shadow` con alfa
+	* baja genera el glow característico.
+	*
+	* @returns {StyleBuilder} Estilo neón con sombra glow.
+	*
+	* @example
+	* console.log('%c ★ BANNER ★ ', StylePresets.neon().build());
+	*/
+	neon: () => new StyleBuilder().bg("linear-gradient(135deg, #0f3460 0%, #e94560 100%)").color("#00ffff").padding("4px 8px").rounded("4px").bold().shadow("0 0 10px rgba(0, 255, 255, 0.5)")
+};
+//#endregion
+//#region src/styling/themes.ts
+/**
+* Catálogo de themes visuales para los badges de cada log level.
+*
+* Cada {@link ThemeVariant} mapea a un record de {@link LevelStyleConfig}
+* indexado por nivel (`debug`, `info`, `warn`, `error`, `success`,
+* `critical`). El {@link StyleManager} consume este mappeo para resolver
+* los estilos CSS del badge que rodea al label del nivel en la consola
+* del navegador.
+*
+* Un {@link LevelStyleConfig} por nivel define seis campos visuales:
+*  - `emoji`      — glyph que precede al label (vacío en themes minimal).
+*  - `label`      — texto en mayúsculas renderizado dentro del badge.
+*  - `background` — CSS background (típicamente un `linear-gradient`).
+*  - `color`      — color del texto interior del badge.
+*  - `border`     — CSS border completo (`<width> <style> <color>`).
+*  - `shadow`     — box-shadow alrededor del badge; `'none'` lo desactiva.
+*
+* Themes disponibles: `default` (gradientes vivos), `dark` (paleta oscura
+* para DevTools oscuro), `neon` (glow neón sobre fondo oscuro), `minimal`
+* (badges planos sin sombras ni emojis), `light` (paleta pastel para
+* DevTools claro) y `cyberpunk` (cian/magenta con sombras extendidas).
+*
+* @example
+* ```ts
+* import { THEME_PRESETS } from '@mks2508/better-logger/styles';
+*
+* // Inspeccionar el badge `error` del theme `neon`
+* const { emoji, label, background, color } = THEME_PRESETS.neon.error;
+* console.log(`${emoji} ${label} → ${background}`);
+* ```
+*
+* @example
+* ```ts
+* // Aplicar un theme al logger entero
+* import logger from '@mks2508/better-logger';
+* logger.configure({ theme: 'cyberpunk' });
+* logger.error('Algo se rompió'); // badge con glow magenta
+* ```
+*
+* @see {@link ThemeVariant} para la lista de claves válidas.
+* @see {@link LevelStyleConfig} para la shape exacta de cada entrada.
+*/
+const THEME_PRESETS = {
+	default: {
+		trace: {
+			emoji: "🔬",
+			label: "TRACE",
+			background: "linear-gradient(135deg, #b2bec3 0%, #636e72 100%)",
+			color: "#ffffff",
+			border: "1px solid #b2bec3",
+			shadow: "0 1px 2px rgba(178, 190, 195, 0.3)"
+		},
+		debug: {
+			emoji: "🐞",
+			label: "DEBUG",
+			background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+			color: "#ffffff",
+			border: "1px solid #667eea",
+			shadow: "0 2px 4px rgba(102, 126, 234, 0.3)"
+		},
+		info: {
+			emoji: "ℹ️",
+			label: "INFO",
+			background: "linear-gradient(135deg, #74b9ff 0%, #0984e3 100%)",
+			color: "#ffffff",
+			border: "1px solid #74b9ff",
+			shadow: "0 2px 4px rgba(116, 185, 255, 0.3)"
+		},
+		warn: {
+			emoji: "⚠️",
+			label: "WARN",
+			background: "linear-gradient(135deg, #fdcb6e 0%, #e17055 100%)",
+			color: "#2d3436",
+			border: "1px solid #fdcb6e",
+			shadow: "0 2px 4px rgba(253, 203, 110, 0.3)"
+		},
+		error: {
+			emoji: "❌",
+			label: "ERROR",
+			background: "linear-gradient(135deg, #e84393 0%, #d63031 100%)",
+			color: "#ffffff",
+			border: "1px solid #e84393",
+			shadow: "0 2px 4px rgba(232, 67, 147, 0.3)"
+		},
+		success: {
+			emoji: "✅",
+			label: "SUCCESS",
+			background: "linear-gradient(135deg, #00b894 0%, #00a085 100%)",
+			color: "#ffffff",
+			border: "1px solid #00b894",
+			shadow: "0 2px 4px rgba(0, 184, 148, 0.3)"
+		},
+		critical: {
+			emoji: "🔥",
+			label: "CRITICAL",
+			background: "linear-gradient(135deg, #ff3838 0%, #ff1744 100%)",
+			color: "#ffffff",
+			border: "2px solid #ff3838",
+			shadow: "0 4px 8px rgba(255, 56, 56, 0.5)"
+		}
+	},
+	dark: {
+		trace: {
+			emoji: "🔬",
+			label: "TRACE",
+			background: "linear-gradient(135deg, #4a5568 0%, #2d3748 100%)",
+			color: "#cbd5e0",
+			border: "1px solid #4a5568",
+			shadow: "0 1px 3px rgba(74, 85, 104, 0.8)"
+		},
+		debug: {
+			emoji: "🌙",
+			label: "DEBUG",
+			background: "linear-gradient(135deg, #2d3748 0%, #4a5568 100%)",
+			color: "#e2e8f0",
+			border: "1px solid #4a5568",
+			shadow: "0 2px 4px rgba(45, 55, 72, 0.8)"
+		},
+		info: {
+			emoji: "💡",
+			label: "INFO",
+			background: "linear-gradient(135deg, #1a202c 0%, #2d3748 100%)",
+			color: "#90cdf4",
+			border: "1px solid #3182ce",
+			shadow: "0 2px 4px rgba(26, 32, 44, 0.8)"
+		},
+		warn: {
+			emoji: "⚡",
+			label: "WARN",
+			background: "linear-gradient(135deg, #744210 0%, #975a16 100%)",
+			color: "#faf089",
+			border: "1px solid #d69e2e",
+			shadow: "0 2px 4px rgba(116, 66, 16, 0.8)"
+		},
+		error: {
+			emoji: "💀",
+			label: "ERROR",
+			background: "linear-gradient(135deg, #742a2a 0%, #9b2c2c 100%)",
+			color: "#feb2b2",
+			border: "1px solid #e53e3e",
+			shadow: "0 2px 4px rgba(116, 42, 42, 0.8)"
+		},
+		success: {
+			emoji: "🎯",
+			label: "SUCCESS",
+			background: "linear-gradient(135deg, #276749 0%, #2f855a 100%)",
+			color: "#9ae6b4",
+			border: "1px solid #38a169",
+			shadow: "0 2px 4px rgba(39, 103, 73, 0.8)"
+		},
+		critical: {
+			emoji: "💥",
+			label: "CRITICAL",
+			background: "linear-gradient(135deg, #1a1a1a 0%, #ff0000 100%)",
+			color: "#ffffff",
+			border: "2px solid #ff0000",
+			shadow: "0 4px 8px rgba(255, 0, 0, 0.9)"
+		}
+	},
+	neon: {
+		trace: {
+			emoji: "🔬",
+			label: "TRACE",
+			background: "linear-gradient(135deg, #16213e 0%, #0a0a23 100%)",
+			color: "#00ffff",
+			border: "1px solid #00ffff",
+			shadow: "0 0 10px rgba(0, 255, 255, 0.5)"
+		},
+		debug: {
+			emoji: "⚡",
+			label: "DEBUG",
+			background: "linear-gradient(135deg, #0f3460 0%, #e94560 100%)",
+			color: "#00ffff",
+			border: "1px solid #00ffff",
+			shadow: "0 0 10px rgba(0, 255, 255, 0.5)"
+		},
+		info: {
+			emoji: "🔮",
+			label: "INFO",
+			background: "linear-gradient(135deg, #16213e 0%, #0f3460 100%)",
+			color: "#00ff41",
+			border: "1px solid #00ff41",
+			shadow: "0 0 10px rgba(0, 255, 65, 0.5)"
+		},
+		warn: {
+			emoji: "⚠️",
+			label: "WARN",
+			background: "linear-gradient(135deg, #533a03 0%, #e94560 100%)",
+			color: "#ffff00",
+			border: "1px solid #ffff00",
+			shadow: "0 0 10px rgba(255, 255, 0, 0.5)"
+		},
+		error: {
+			emoji: "💥",
+			label: "ERROR",
+			background: "linear-gradient(135deg, #5c0a0a 0%, #ff073a 100%)",
+			color: "#ff073a",
+			border: "1px solid #ff073a",
+			shadow: "0 0 10px rgba(255, 7, 58, 0.8)"
+		},
+		success: {
+			emoji: "✨",
+			label: "SUCCESS",
+			background: "linear-gradient(135deg, #0a5c0a 0%, #39ff14 100%)",
+			color: "#39ff14",
+			border: "1px solid #39ff14",
+			shadow: "0 0 10px rgba(57, 255, 20, 0.8)"
+		},
+		critical: {
+			emoji: "🌟",
+			label: "CRITICAL",
+			background: "linear-gradient(135deg, #000000 0%, #ff0080 100%)",
+			color: "#ff0080",
+			border: "2px solid #ff0080",
+			shadow: "0 0 20px rgba(255, 0, 128, 1)"
+		}
+	},
+	minimal: {
+		trace: {
+			emoji: "",
+			label: "TRACE",
+			background: "#fafafa",
+			color: "#9e9e9e",
+			border: "1px solid #eeeeee",
+			shadow: "none"
+		},
+		debug: {
+			emoji: "",
+			label: "DEBUG",
+			background: "#f7fafc",
+			color: "#4a5568",
+			border: "1px solid #e2e8f0",
+			shadow: "none"
+		},
+		info: {
+			emoji: "",
+			label: "INFO",
+			background: "#ebf8ff",
+			color: "#2b6cb0",
+			border: "1px solid #bee3f8",
+			shadow: "none"
+		},
+		warn: {
+			emoji: "",
+			label: "WARN",
+			background: "#fffbf0",
+			color: "#c05621",
+			border: "1px solid #fed7aa",
+			shadow: "none"
+		},
+		error: {
+			emoji: "",
+			label: "ERROR",
+			background: "#fef5f5",
+			color: "#c53030",
+			border: "1px solid #fca5a5",
+			shadow: "none"
+		},
+		success: {
+			emoji: "",
+			label: "SUCCESS",
+			background: "#f0fff4",
+			color: "#2f855a",
+			border: "1px solid #9ae6b4",
+			shadow: "none"
+		},
+		critical: {
+			emoji: "",
+			label: "CRITICAL",
+			background: "#fef5f5",
+			color: "#e53e3e",
+			border: "2px solid #f56565",
+			shadow: "none"
+		}
+	},
+	light: {
+		trace: {
+			emoji: "🔬",
+			label: "TRACE",
+			background: "linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%)",
+			color: "#616161",
+			border: "1px solid #bdbdbd",
+			shadow: "0 1px 3px rgba(189, 189, 189, 0.2)"
+		},
+		debug: {
+			emoji: "🔍",
+			label: "DEBUG",
+			background: "linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%)",
+			color: "#1565c0",
+			border: "1px solid #90caf9",
+			shadow: "0 1px 3px rgba(33, 150, 243, 0.2)"
+		},
+		info: {
+			emoji: "ℹ️",
+			label: "INFO",
+			background: "linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%)",
+			color: "#7b1fa2",
+			border: "1px solid #ce93d8",
+			shadow: "0 1px 3px rgba(156, 39, 176, 0.2)"
+		},
+		warn: {
+			emoji: "⚠️",
+			label: "WARN",
+			background: "linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%)",
+			color: "#f57c00",
+			border: "1px solid #ffcc02",
+			shadow: "0 1px 3px rgba(255, 152, 0, 0.2)"
+		},
+		error: {
+			emoji: "❌",
+			label: "ERROR",
+			background: "linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%)",
+			color: "#d32f2f",
+			border: "1px solid #f44336",
+			shadow: "0 1px 3px rgba(244, 67, 54, 0.2)"
+		},
+		success: {
+			emoji: "✅",
+			label: "SUCCESS",
+			background: "linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%)",
+			color: "#388e3c",
+			border: "1px solid #4caf50",
+			shadow: "0 1px 3px rgba(76, 175, 80, 0.2)"
+		},
+		critical: {
+			emoji: "🚨",
+			label: "CRITICAL",
+			background: "linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%)",
+			color: "#c2185b",
+			border: "2px solid #e91e63",
+			shadow: "0 2px 6px rgba(233, 30, 99, 0.3)"
+		}
+	},
+	cyberpunk: {
+		trace: {
+			emoji: "🔬",
+			label: "TRACE",
+			background: "linear-gradient(135deg, #1b263b 0%, #0d1b2a 100%)",
+			color: "#48bfe3",
+			border: "1px solid #48bfe3",
+			shadow: "0 0 15px rgba(72, 191, 227, 0.4)"
+		},
+		debug: {
+			emoji: "🤖",
+			label: "DEBUG",
+			background: "linear-gradient(135deg, #0d1b2a 0%, #415a77 100%)",
+			color: "#00d4aa",
+			border: "1px solid #00d4aa",
+			shadow: "0 0 15px rgba(0, 212, 170, 0.4)"
+		},
+		info: {
+			emoji: "🔗",
+			label: "INFO",
+			background: "linear-gradient(135deg, #1b263b 0%, #0d1b2a 100%)",
+			color: "#00b4d8",
+			border: "1px solid #00b4d8",
+			shadow: "0 0 15px rgba(0, 180, 216, 0.4)"
+		},
+		warn: {
+			emoji: "⚡",
+			label: "WARN",
+			background: "linear-gradient(135deg, #f72585 0%, #b5179e 100%)",
+			color: "#ffff3f",
+			border: "1px solid #ffff3f",
+			shadow: "0 0 15px rgba(255, 255, 63, 0.4)"
+		},
+		error: {
+			emoji: "💀",
+			label: "ERROR",
+			background: "linear-gradient(135deg, #7209b7 0%, #480ca8 100%)",
+			color: "#ff006e",
+			border: "1px solid #ff006e",
+			shadow: "0 0 15px rgba(255, 0, 110, 0.6)"
+		},
+		success: {
+			emoji: "⚡",
+			label: "SUCCESS",
+			background: "linear-gradient(135deg, #003566 0%, #001d3d 100%)",
+			color: "#00f5ff",
+			border: "1px solid #00f5ff",
+			shadow: "0 0 15px rgba(0, 245, 255, 0.4)"
+		},
+		critical: {
+			emoji: "💥",
+			label: "CRITICAL",
+			background: "linear-gradient(135deg, #000000 0%, #ff0040 100%)",
+			color: "#ff0040",
+			border: "2px solid #ff0040",
+			shadow: "0 0 25px rgba(255, 0, 64, 0.8)"
+		}
+	}
+};
+//#endregion
+//#region src/styling/banners.ts
+/**
+* Catálogo de variantes del banner de inicialización del logger.
+*
+* Cada variante es un par `{ text, style }` listo para pasar a
+* `console.log(\`%c${text}\`, style)`. Las variantes escalan en complejidad
+* visual según las capacidades del navegador:
+*  - `simple`   — una sola línea con gradiente.
+*  - `ascii`    — ASCII art multiníveles (Safari, sin SVG).
+*  - `unicode`  — caja Unicode con gradiente de fondo.
+*  - `svg`      — `background-image` SVG con texto vectorial.
+*  - `animated` — gradiente animado vía `@keyframes gradientShift`.
+*
+* La función {@link detectBannerCapabilities} elige automáticamente la
+* variante más rica soportada por el entorno actual.
+*
+* @example
+* ```ts
+* import { BANNER_VARIANTS } from '@mks2508/better-logger/styles';
+*
+* const { text, style } = BANNER_VARIANTS.unicode;
+* console.log(`%c${text}`, style);
+* ```
+*
+* @see {@link BannerType} para la unión de claves válidas.
+* @see {@link displayInitBanner} para pintar el banner auto-detectado.
+*/
+const BANNER_VARIANTS = {
+	simple: {
+		text: "🚀 ADVANCED LOGGER v2.0.0 - State-of-the-art Console Styling 🚀",
+		style: "background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 12px 20px; border-radius: 8px; font-weight: bold; font-size: 14px;"
+	},
+	ascii: {
+		text: `
+   ___     ____  _   __   ___     _   __  _____ _____ ____     __     ___    _____ _____ _____ ____  
+  / _ \\   / __ \\| | / /  / _ \\   | \\ | |/ ____| ____|  _ \\   |  |   / _ \\  / ____|  ___|  _  |  _ \\ 
+ / /_\\ \\ / / _\` | |/ /  / /_\\ \\  |  \\| | |   | |__  | | | |  |  |  / / \\ \\| |  __| |_  | |_| | |_) |
+ |  _  || | (_| |   <   |  _  |  | . \` | |   |  __| | | | |  |  | | |   | | | |_ |  _| |    /|  _ < 
+ | | | |\\ \\__,_|_|\\_\\  | | | |  | |\\  | |___| |____| |_| |  |  |__\\ \\_/ /| |__| | |___| |\\ \\| |_) |
+ \\_| |_/ \\____/        \\_| |_/  |_| \\_|\\_____|______|____/   |_____/\\___/  \\_____|_____|_| \\_|____/
+
+                            Advanced Logger v2.0.0 - Console Excellence`,
+		style: "font-family: \"Courier New\", Consolas, Monaco, monospace; color: #667eea; font-size: 11px; line-height: 1.2;"
+	},
+	unicode: {
+		text: `
+╔══════════════════════════════════════════════════════════════════════════╗
+║                         🚀 ADVANCED LOGGER v2.0.0                       ║
+║                      State-of-the-art Console Styling                    ║  
+╚══════════════════════════════════════════════════════════════════════════╝`,
+		style: "font-family: \"Courier New\", Consolas, Monaco, monospace; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px; border-radius: 8px; font-size: 12px; line-height: 1.3;"
+	},
+	svg: {
+		text: "                    ",
+		style: `
+            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80'><defs><linearGradient id='grad' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:%23667eea'/><stop offset='100%' style='stop-color:%23764ba2'/></linearGradient></defs><rect width='100%' height='100%' fill='url(%23grad)' rx='8'/><text x='200' y='30' text-anchor='middle' fill='white' font-family='monospace' font-size='14' font-weight='bold'>🚀 ADVANCED LOGGER</text><text x='200' y='50' text-anchor='middle' fill='white' font-family='monospace' font-size='12'>State-of-the-art Console Styling</text><text x='200' y='65' text-anchor='middle' fill='white' font-family='monospace' font-size='10'>v2.0.0</text></svg>");
+            background-repeat: no-repeat;
+            background-size: 400px 80px;
+            padding: 40px 200px;
+            color: transparent;
+            display: inline-block;
+            border-radius: 8px;
+        `
+	},
+	animated: {
+		text: "         🚀 ADVANCED LOGGER v2.0.0         ",
+		style: `
+            background: linear-gradient(-45deg, #667eea, #764ba2, #667eea, #764ba2);
+            background-size: 400% 400%;
+            color: white;
+            padding: 15px 25px;
+            border-radius: 10px;
+            font-weight: bold;
+            font-size: 14px;
+            font-family: monospace;
+            animation: gradientShift 3s ease infinite;
+            display: inline-block;
+        `
+	}
+};
+/**
+* Banners de inicialización específicos por {@link ThemeVariant}.
+*
+* Cada theme trae su propio par `{ simple, style }` (banner de una línea
+* + CSS) que combina con la paleta del theme. El texto del banner es
+* siempre una sola línea (sin ASCII art), por lo que es la variante
+* usada por defecto cuando el logger arranca con un theme concreto.
+*
+* @example
+* ```ts
+* import { THEME_BANNERS } from '@mks2508/better-logger/styles';
+*
+* const { simple, style } = THEME_BANNERS.cyberpunk;
+* console.log(`%c${simple}`, style);
+* ```
+*
+* @see {@link THEME_PRESETS} para los estilos de badge por nivel de cada theme.
+* @see {@link ThemeVariant} para la lista de themes disponibles.
+*/
+const THEME_BANNERS = {
+	default: {
+		simple: "🚀 ADVANCED LOGGER v2.0.0 - State-of-the-art Console Styling 🚀",
+		style: "background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 12px 20px; border-radius: 8px; font-weight: bold;"
+	},
+	dark: {
+		simple: "🌙 ADVANCED LOGGER v2.0.0 - Dark Mode Console Excellence 🌙",
+		style: "background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); color: #e2e8f0; padding: 12px 20px; border-radius: 8px; font-weight: bold; border: 1px solid #4a5568;"
+	},
+	neon: {
+		simple: "⚡ ADVANCED LOGGER v2.0.0 - Cyberpunk Console Experience ⚡",
+		style: "background: linear-gradient(135deg, #0f3460 0%, #e94560 100%); color: #00ffff; padding: 12px 20px; border-radius: 8px; font-weight: bold; text-shadow: 0 0 10px #00ffff;"
+	},
+	minimal: {
+		simple: "ADVANCED LOGGER v2.0.0 - Clean Console Styling",
+		style: "background: #f7fafc; color: #2d3748; padding: 8px 16px; border: 1px solid #e2e8f0; border-radius: 4px; font-weight: 500;"
+	},
+	light: {
+		simple: "☀️ ADVANCED LOGGER v2.0.0 - Bright Console Styling ☀️",
+		style: "background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); color: #495057; padding: 12px 20px; border-radius: 8px; font-weight: bold; border: 1px solid #dee2e6;"
+	},
+	cyberpunk: {
+		simple: "🤖 ADVANCED LOGGER v2.0.0 - Neural Console Interface 🤖",
+		style: "background: linear-gradient(135deg, #0d1b2a 0%, #415a77 100%); color: #00d4aa; padding: 12px 20px; border-radius: 8px; font-weight: bold; text-shadow: 0 0 10px #00d4aa; border: 1px solid #00d4aa;"
+	}
+};
+/**
+* Detecta la variante de banner más rica que el entorno puede renderizar.
+*
+* Usa `navigator.userAgent` y probes sobre `document` para decidir entre
+* `animated` (Chrome con CSS animations), `svg` (Chrome/Firefox con SVG),
+* `unicode` (Chrome/Firefox fallback), `ascii` (Safari) o `simple`
+* (todo lo demás). En entornos sin `navigator` o `document` retorna
+* `'simple'` inmediatamente (Node, SSR, Web Workers).
+*
+* @returns {BannerType} Variante de banner recomendada para el entorno.
+*
+* @example
+* ```ts
+* import { detectBannerCapabilities } from '@mks2508/better-logger/styles';
+*
+* const capable = detectBannerCapabilities();
+* console.log(`Best banner for this env: ${capable}`);
+* ```
+*
+* @see {@link BANNER_VARIANTS} para el catálogo que indexa este resultado.
+*/
+function detectBannerCapabilities() {
+	if (typeof navigator === "undefined" || typeof document === "undefined") return "simple";
+	const userAgent = navigator.userAgent;
+	const isChrome = /Chrome/.test(userAgent);
+	const isFirefox = /Firefox/.test(userAgent);
+	const isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent);
+	const supportsSVG = !!document.createElementNS && !!document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGRect;
+	if ("animationName" in document.createElement("div").style && isChrome) return "animated";
+	else if (supportsSVG && (isChrome || isFirefox)) return "svg";
+	else if (isChrome || isFirefox) return "unicode";
+	else if (isSafari) return "ascii";
+	return "simple";
+}
+/**
+* Pinta el banner de inicialización del logger en la consola del navegador.
+*
+* Si no se pasa `bannerType`, se auto-detecta vía
+* {@link detectBannerCapabilities}. Además del banner, abre un
+* `console.group` con la lista de features soportadas (styling, stack
+* traces, performance timers, handlers, ...).
+*
+* No-op cuando `document` no está disponible (Node, SSR, Web Workers),
+* para evitar referencias a APIs inexistentes.
+*
+* @param {BannerType} [bannerType] - Variante de banner a pintar. Si se
+*   omite, se detecta automáticamente la mejor soportada.
+* @returns {void}
+*
+* @example
+* ```ts
+* import { displayInitBanner } from '@mks2508/better-logger/styles';
+*
+* displayInitBanner();          // auto-detecta
+* displayInitBanner('ascii');   // fuerza ASCII art
+* ```
+*
+* @see {@link BANNER_VARIANTS} para las variantes disponibles.
+* @see {@link THEME_BANNERS} para banners específicos por theme.
+*/
+function displayInitBanner(bannerType) {
+	if (typeof document === "undefined") return;
+	const selectedType = bannerType || detectBannerCapabilities();
+	const banner = BANNER_VARIANTS[selectedType];
+	if (selectedType === "animated") {
+		const style = document.createElement("style");
+		style.textContent = `
+            @keyframes gradientShift {
+                0% { background-position: 0% 50%; }
+                50% { background-position: 100% 50%; }
+                100% { background-position: 0% 50%; }
+            }
+        `;
+		document.head.appendChild(style);
+	}
+	console.log(`%c${banner.text}`, banner.style);
+	const features = [
+		"🎨 Advanced CSS Console Styling",
+		"📍 Automatic Stack Trace Parsing",
+		"🔧 Scoped Loggers & Prefixes",
+		"⚡ Performance Timers",
+		"🎯 Verbosity Filtering",
+		"🔌 Extensible Handlers",
+		"📱 Modern TypeScript Patterns",
+		"📤 Export & Clipboard Support"
+	];
+	console.group(`%c✨ Features`, "background: #f8f9fa; color: #495057; padding: 4px 8px; border-radius: 4px; font-weight: bold;");
+	features.forEach((feature) => {
+		console.log(`%c${feature}`, "color: #6c757d; font-size: 13px;");
+	});
+	console.groupEnd();
+	console.log("");
+}
+//#endregion
+//#region src/styling/SmartPresets.ts
+/**
+* Catálogo de smart presets que configuran el layout completo de un log.
+*
+* A diferencia de {@link THEME_PRESETS} — que solo controla los colores
+* y emojis del badge del nivel — los smart presets controlan la
+* composición entera del output: timestamp, badge de nivel, prefix,
+* mensaje, location, fuentes, padding/spacing y efectos visuales
+* (blur, transparency). Cada clave es un {@link LogStyles} completo.
+*
+* Presets disponibles:
+*  - `default`       — adaptativo (claro/oscuro según DevTools), legible.
+*  - `cyberpunk`     — neón, glow, fondo oscuro, location oculta.
+*  - `glassmorphism` — blur + transparencia, layout spacious.
+*  - `minimal`       — sin timestamp, sin location, badges flat.
+*  - `debug`         — monospace, todo visible, compacto para dev.
+*  - `production`    — solo lo esencial: timestamp + level + mensaje.
+*
+* Los presets son ortogonales a los themes: pueden combinarse (por
+* ejemplo, `theme: 'dark'` + `preset: 'debug'` aplica el layout debug
+* sobre la paleta oscura).
+*
+* @example
+* ```ts
+* import logger from '@mks2508/better-logger';
+*
+* logger.preset('glassmorphism');
+* logger.info('Vidrio esmerilado en DevTools');
+* ```
+*
+* @example
+* ```ts
+* // Componer: theme custom + preset de layout
+* logger.configure({ theme: 'dark' });
+* logger.preset('debug');
+* logger.warn('Layout debug sobre theme dark');
+* ```
+*
+* @see {@link getSmartPreset} para resolver un preset por nombre.
+* @see {@link LogStyles} para la shape completa de un preset.
+*/
+const SMART_PRESETS = {
+	/**
+	* Preset por defecto — funciona out-of-the-box.
+	* Limpio, legible, adaptativo a themes claro/oscuro.
+	*/
+	default: {
+		layout: {
+			spacing: "normal",
+			innerPadding: "2px",
+			outerMargin: "1px"
+		},
+		timestamp: {
+			show: true,
+			color: "auto",
+			font: "Monaco, Consolas, monospace",
+			size: "11px"
+		},
+		level: {
+			show: true,
+			style: "badge",
+			uppercase: false,
+			padding: "2px 8px"
+		},
+		prefix: {
+			show: true,
+			style: "dark",
+			padding: "2px 6px"
+		},
+		message: {
+			show: true,
+			color: "auto",
+			font: "system-ui, -apple-system, sans-serif",
+			size: "14px"
+		},
+		location: {
+			show: true,
+			color: "auto",
+			font: "Monaco, Consolas, monospace",
+			size: "11px"
+		}
+	},
+	/**
+	* Preset cyberpunk — neón, glow y fondo oscuro.
+	*/
+	cyberpunk: {
+		layout: {
+			spacing: "compact",
+			innerPadding: "1px",
+			outerMargin: "0px"
+		},
+		timestamp: {
+			show: true,
+			color: "#00ffff",
+			font: "Monaco, Consolas, monospace",
+			size: "10px",
+			style: "neon"
+		},
+		level: {
+			show: true,
+			style: "glowing",
+			uppercase: true,
+			padding: "2px 8px"
+		},
+		prefix: {
+			show: true,
+			color: "#ff0080",
+			background: "rgba(255, 0, 128, 0.1)",
+			border: "1px solid #ff0080",
+			style: "neon"
+		},
+		message: {
+			show: true,
+			color: "#00ff41",
+			font: "Monaco, Consolas, monospace",
+			size: "13px"
+		},
+		location: { show: false },
+		backdrop: "blur(2px)",
+		transparency: .9
+	},
+	/**
+	* Preset glassmorphism — blur moderno y transparencia.
+	*/
+	glassmorphism: {
+		layout: {
+			spacing: "spacious",
+			innerPadding: "4px",
+			outerMargin: "2px"
+		},
+		timestamp: {
+			show: true,
+			color: "auto",
+			font: "system-ui, sans-serif",
+			size: "11px",
+			style: "glassmorphic"
+		},
+		level: {
+			show: true,
+			style: "glassmorphic",
+			uppercase: false,
+			padding: "4px 12px"
+		},
+		prefix: {
+			show: true,
+			style: "glassmorphic",
+			padding: "3px 8px"
+		},
+		message: {
+			show: true,
+			color: "auto",
+			font: "system-ui, sans-serif",
+			size: "14px"
+		},
+		location: {
+			show: true,
+			color: "auto",
+			font: "system-ui, sans-serif",
+			size: "11px",
+			style: "glassmorphic"
+		},
+		backdrop: "blur(10px)",
+		transparency: .8
+	},
+	/**
+	* Preset minimal — limpio, sin decoraciones, máxima legibilidad.
+	*/
+	minimal: {
+		layout: {
+			spacing: "compact",
+			innerPadding: "0px",
+			outerMargin: "0px"
+		},
+		timestamp: { show: false },
+		level: {
+			show: true,
+			style: "flat",
+			uppercase: true,
+			padding: "0px 4px",
+			border: "none",
+			background: "transparent"
+		},
+		prefix: {
+			show: true,
+			style: "flat",
+			padding: "0px 4px",
+			border: "none",
+			background: "transparent"
+		},
+		message: {
+			show: true,
+			color: "auto",
+			font: "system-ui, sans-serif",
+			size: "14px"
+		},
+		location: { show: false }
+	},
+	/**
+	* Preset debug — monospace, detallado, compacto para desarrollo.
+	*/
+	debug: {
+		layout: {
+			spacing: "compact",
+			innerPadding: "1px",
+			outerMargin: "0px"
+		},
+		timestamp: {
+			show: true,
+			color: "auto",
+			font: "Monaco, Consolas, monospace",
+			size: "10px"
+		},
+		level: {
+			show: true,
+			style: "compact",
+			uppercase: true,
+			padding: "1px 4px",
+			font: "Monaco, Consolas, monospace",
+			size: "10px"
+		},
+		prefix: {
+			show: true,
+			style: "compact",
+			padding: "1px 4px",
+			font: "Monaco, Consolas, monospace",
+			size: "10px"
+		},
+		message: {
+			show: true,
+			color: "auto",
+			font: "Monaco, Consolas, monospace",
+			size: "12px"
+		},
+		location: {
+			show: true,
+			color: "auto",
+			font: "Monaco, Consolas, monospace",
+			size: "10px",
+			style: "clickable"
+		}
+	},
+	/**
+	* Preset production — limpio, solo info esencial.
+	*/
+	production: {
+		layout: {
+			spacing: "normal",
+			innerPadding: "2px",
+			outerMargin: "1px"
+		},
+		timestamp: {
+			show: true,
+			color: "auto",
+			font: "system-ui, sans-serif",
+			size: "11px"
+		},
+		level: {
+			show: true,
+			style: "badge",
+			uppercase: false,
+			padding: "2px 6px"
+		},
+		prefix: { show: false },
+		message: {
+			show: true,
+			color: "auto",
+			font: "system-ui, sans-serif",
+			size: "14px"
+		},
+		location: { show: false }
+	}
+};
+/**
+* Resuelve un smart preset por nombre desde {@link SMART_PRESETS}.
+*
+* @param {string} name - Nombre del preset (`'default'`, `'cyberpunk'`,
+*   `'glassmorphism'`, `'minimal'`, `'debug'`, `'production'`).
+* @returns {LogStyles | null} El preset encontrado, o `null` si el nombre
+*   no existe en el catálogo.
+*
+* @example
+* ```ts
+* import { getSmartPreset } from '@mks2508/better-logger/styles';
+*
+* const preset = getSmartPreset('cyberpunk');
+* if (preset) {
+*   console.log(preset.level?.style); // 'glowing'
+* }
+* ```
+*
+* @see {@link hasPreset} para un check booleano sin traer el objeto.
+*/
+function getSmartPreset(name) {
+	return SMART_PRESETS[name] || null;
+}
+/**
+* Lista los nombres de todos los smart presets registrados.
+*
+* Útil para alimentar menús de configuración, CLIs o help text.
+*
+* @returns {string[]} Array con las claves de {@link SMART_PRESETS}.
+*
+* @example
+* ```ts
+* import { getAvailablePresets } from '@mks2508/better-logger/styles';
+*
+* console.log(getAvailablePresets());
+* // ['default', 'cyberpunk', 'glassmorphism', 'minimal', 'debug', 'production']
+* ```
+*/
+function getAvailablePresets() {
+	return Object.keys(SMART_PRESETS);
+}
+/**
+* Comprueba si un smart preset existe en el catálogo.
+*
+* @param {string} name - Nombre del preset a verificar.
+* @returns {boolean} `true` si el preset está registrado, `false` en caso contrario.
+*
+* @example
+* ```ts
+* import { hasPreset, getSmartPreset } from '@mks2508/better-logger/styles';
+*
+* const name = 'glassmorphism';
+* const preset = hasPreset(name) ? getSmartPreset(name) : null;
+* ```
+*
+* @see {@link getSmartPreset} para resolver el preset (retorna `null` si no existe).
+*/
+function hasPreset(name) {
+	return name in SMART_PRESETS;
+}
+//#endregion
+Object.defineProperty(exports, "BANNER_VARIANTS", {
+	enumerable: true,
+	get: function() {
+		return BANNER_VARIANTS;
+	}
+});
+Object.defineProperty(exports, "StyleBuilder", {
+	enumerable: true,
+	get: function() {
+		return StyleBuilder;
+	}
+});
+Object.defineProperty(exports, "StylePresets", {
+	enumerable: true,
+	get: function() {
+		return StylePresets;
+	}
+});
+Object.defineProperty(exports, "THEME_BANNERS", {
+	enumerable: true,
+	get: function() {
+		return THEME_BANNERS;
+	}
+});
+Object.defineProperty(exports, "THEME_PRESETS", {
+	enumerable: true,
+	get: function() {
+		return THEME_PRESETS;
+	}
+});
+Object.defineProperty(exports, "displayInitBanner", {
+	enumerable: true,
+	get: function() {
+		return displayInitBanner;
+	}
+});
+Object.defineProperty(exports, "getAvailablePresets", {
+	enumerable: true,
+	get: function() {
+		return getAvailablePresets;
+	}
+});
+Object.defineProperty(exports, "getSmartPreset", {
+	enumerable: true,
+	get: function() {
+		return getSmartPreset;
+	}
+});
+Object.defineProperty(exports, "hasPreset", {
+	enumerable: true,
+	get: function() {
+		return hasPreset;
+	}
+});
+
+//# sourceMappingURL=styling-Cel2wPRy.cjs.map