@imontene/mdrender 2.6.0 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Cambios
 
+## 2.7.0 — 2026-10-23
+
+- `--watermark-field` pone ahora dos campos de luz en cada página: arriba a la izquierda (antes
+  arriba a la derecha) y uno nuevo abajo a la derecha. El campo junto al título de la primera
+  página no cambia.
+
+## 2.6.1 — 2026-10-22
+
+- **PDF mucho más livianos con los campos de luz.** Chrome convertía los degradados CSS del
+  campo en varias imágenes por página. Ahora el campo es un SVG que queda en el PDF como
+  sombreado vectorial, con el mismo aspecto:
+  - con `--watermark-field`, el README pasa de 3,0 MB a 0,41 MB (antes unos 290 KB más por
+    página, ahora unos 7 KB en total);
+  - con el tema Anti-Gravity, el campo junto al título ya no añade ~140 KB a cada documento
+    con título (el ejemplo pasa de 332 KB a 195 KB).
+
 ## 2.6.0 — 2026-10-22
 
 - **Marcas de agua** con el degradado Anti-Gravity, solo en el PDF y desactivadas por defecto:

package/README.md

@@ -157,7 +157,7 @@ equipo); `--port` fija el puerto y `--no-open` no abre el navegador.
 | `--font <manrope\|inter>`      | Tipografía del texto (ver abajo)                                                                 | `manrope`             |
 | `--no-justify`                 | Párrafos alineados a la izquierda en el PDF (ver abajo)                                          | justificado           |
 | `--watermark <texto>`          | Marca de agua en diagonal en cada página del PDF, con el degradado Anti-Gravity                  | —                     |
-| `--watermark-field`            | Campo de luz con el degradado en la esquina de cada página del PDF                               | —                     |
+| `--watermark-field`            | Campos de luz con el degradado arriba a la izquierda y abajo a la derecha de cada página del PDF | —                     |
 | `--density <densidad>`         | `normal` o `compact` (menos espacio entre líneas y bloques)                                      | `normal`              |
 | `--font-size <tamaño>`         | Tamaño del texto en `pt` o `px`, de 6 a 24 pt; p. ej. `10pt`                                     | `10.5pt`              |
 | `--theme <tema\|css>`          | `antigravity`, `antigravity-dark`, `light`, `dark` o un `.css` que reemplaza el tema (ver abajo) | `antigravity`         |
@@ -202,7 +202,7 @@ Anti-Gravity, cada una por separado y solo en el PDF:
 
 ```bash
 mdrender informe.md --watermark "Borrador"     # texto en diagonal en cada página
-mdrender informe.md --watermark-field          # campo de luz en la esquina de cada página
+mdrender informe.md --watermark-field          # campos de luz arriba a la izquierda y abajo a la derecha
 ```
 
 También como `watermark: Borrador` y `watermarkField: true` en el front matter o en

package/dist/assets/theme-antigravity-dark.css

@@ -11,7 +11,6 @@
   --ag-hairline-strong: #3a4352;
   --ag-accent: #7ea4ff;
   --ag-accent-soft: #16213b;
-  --ag-opacity-field: 0.22;
   --ag-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.35);
 
   --alert-warning: #e3b341;

package/dist/assets/theme-antigravity.css

@@ -16,10 +16,6 @@
   --ag-hairline-strong: #c9d0db;
   --ag-accent: #2456d3;
   --ag-accent-soft: #ecf1fd;
-  --ag-field-blue: #4f7cff;
-  --ag-field-cyan: #22c3e6;
-  --ag-field-violet: #8c6cf0;
-  --ag-opacity-field: 0.16;
   --ag-shadow-card: 0 1px 2px rgba(15, 20, 25, 0.04), 0 12px 32px rgba(15, 20, 25, 0.06);
 
   /* The variables theme.css is written with */
@@ -152,12 +148,10 @@ h6 {
   right: 0;
   bottom: 0;
   width: 36%;
-  opacity: var(--ag-opacity-field);
   pointer-events: none;
-  background:
-    radial-gradient(28% 38% at 58% 45%, var(--ag-field-blue), transparent),
-    radial-gradient(16% 26% at 78% 58%, var(--ag-field-cyan), transparent),
-    radial-gradient(25% 30% at 40% 32%, var(--ag-field-violet), transparent);
+  /* An SVG image (render/field.ts) set by mdrender, with the theme's opacity: CSS gradients
+     fading to transparent print as heavy bitmaps. */
+  background: var(--ag-field-image) center / 100% 100% no-repeat;
 }
 
 /* Text */

package/dist/cli.js

@@ -66,7 +66,7 @@ function addDocumentOptions(command) {
         .option("--font <font>", "text typeface: manrope or inter (default: manrope)")
         .option("--no-justify", "align paragraphs left in the PDF instead of justifying them")
         .option("--watermark <text>", "text across every PDF page, in the Anti-Gravity gradient")
-        .option("--watermark-field", "a soft field of light in the corner of every PDF page")
+        .option("--watermark-field", "soft fields of light in the top-left and bottom-right corners of every PDF page")
         .option("--density <density>", "normal or compact (tighter spacing) (default: normal)")
         .option("--font-size <size>", "text size, e.g. 10pt or 11pt (default: 10.5pt)")
         .option("--theme <theme>", "antigravity, antigravity-dark, light, dark, or a .css file replacing the theme " +

package/dist/convert.js

@@ -12,7 +12,8 @@ import { BrowserSession } from "./render/browser.js";
 import { DEFAULT_FOOTER, headerFooterTemplate } from "./render/header-footer.js";
 import { fillMermaid, renderMermaid } from "./render/mermaid.js";
 import { SMALL_SCALE } from "./render/mermaid-fit.js";
-import { headerFooterStyle, mermaidThemeVariables } from "./render/antigravity.js";
+import { headerFooterStyle, isAntigravityTheme, mermaidThemeVariables, } from "./render/antigravity.js";
+import { fieldImage } from "./render/field.js";
 import { FONT_FAMILIES, fontStack } from "./render/fonts.js";
 import { WATERMARK_CSS, watermarkHtml } from "./render/watermark.js";
 import { contentHeightPx, contentWidthPx, lengthToPx, textWidthPx } from "./render/page.js";
@@ -110,6 +111,9 @@ function layoutCss(options, margin) {
         rules.push("h1, h2, h3, h4, h5, h6 { line-height: 1.4; }");
     if (options.justify)
         rules.push(JUSTIFY_CSS);
+    if (isAntigravityTheme(options.theme)) {
+        rules.push(`:root { --ag-field-image: ${fieldImage(isDarkTheme(options.theme))}; }`);
+    }
     if (options.fontSize)
         rules.push(`html { font-size: ${options.fontSize}; }`);
     return rules.join("\n");

package/dist/options.d.ts

@@ -51,7 +51,7 @@ export interface DocumentOptions {
     mermaidFlip: MermaidFlip;
     /** Text set diagonally across every page of the PDF, in the Anti-Gravity gradient. */
     watermark?: string;
-    /** A soft field of light (the Anti-Gravity gradient) in the corner of every PDF page. */
+    /** Soft fields of light (the Anti-Gravity gradient) in two corners of every PDF page. */
     watermarkField: boolean;
     /** Justify paragraphs in the PDF (body, quotes, alerts), breaking long words with hyphens. */
     justify: boolean;

package/dist/render/field.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The Anti-Gravity gradient field: three soft lights (field-blue, field-cyan, field-violet),
+ * each an ellipse fading to transparent inside its box.
+ *
+ * Drawn as an SVG image rather than CSS radial-gradient()s: Chrome rasterizes CSS gradients that
+ * fade to transparent into several bitmaps per page (about 70 KB each, repeated on every page),
+ * while SVG gradients with stop-opacity go into the PDF as small vector shadings.
+ */
+export declare const FIELD_COLORS: {
+    blue: string;
+    cyan: string;
+    violet: string;
+};
+/** Field opacity on light pages and on dark ones (the design system's opacity-field tokens). */
+export declare const FIELD_OPACITY: {
+    light: number;
+    dark: number;
+};
+/** The field as an SVG stretched over its box (viewBox in %, no aspect ratio kept). */
+export declare function fieldSvg(opacity: number): string;
+/**
+ * CSS `url(…)` of the field image. The SVG has only double quotes, which the encoding escapes, so
+ * the value is safe inside single quotes, also in a style="…" attribute.
+ */
+export declare function fieldImage(dark: boolean): string;

package/dist/render/field.js

@@ -0,0 +1,36 @@
+/**
+ * The Anti-Gravity gradient field: three soft lights (field-blue, field-cyan, field-violet),
+ * each an ellipse fading to transparent inside its box.
+ *
+ * Drawn as an SVG image rather than CSS radial-gradient()s: Chrome rasterizes CSS gradients that
+ * fade to transparent into several bitmaps per page (about 70 KB each, repeated on every page),
+ * while SVG gradients with stop-opacity go into the PDF as small vector shadings.
+ */
+export const FIELD_COLORS = { blue: "#4f7cff", cyan: "#22c3e6", violet: "#8c6cf0" };
+/** Field opacity on light pages and on dark ones (the design system's opacity-field tokens). */
+export const FIELD_OPACITY = { light: 0.16, dark: 0.22 };
+/** Each light: centre and radii in % of the box (as `radial-gradient(rx ry at cx cy)`). */
+const LIGHTS = [
+    { color: FIELD_COLORS.blue, cx: 58, cy: 45, rx: 28, ry: 38 },
+    { color: FIELD_COLORS.cyan, cx: 78, cy: 58, rx: 16, ry: 26 },
+    { color: FIELD_COLORS.violet, cx: 40, cy: 32, rx: 25, ry: 30 },
+];
+/** The field as an SVG stretched over its box (viewBox in %, no aspect ratio kept). */
+export function fieldSvg(opacity) {
+    const gradients = LIGHTS.map(({ color, cx, cy, rx, ry }, i) => `<radialGradient id="f${i}" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="1" ` +
+        `gradientTransform="translate(${cx} ${cy}) scale(${rx} ${ry})">` +
+        `<stop offset="0" stop-color="${color}" stop-opacity="${opacity}"/>` +
+        `<stop offset="1" stop-color="${color}" stop-opacity="0"/></radialGradient>`).join("");
+    const fills = LIGHTS.map((_, i) => `<rect width="100" height="100" fill="url(#f${i})"/>`).join("");
+    return (`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">` +
+        `<defs>${gradients}</defs>${fills}</svg>`);
+}
+/**
+ * CSS `url(…)` of the field image. The SVG has only double quotes, which the encoding escapes, so
+ * the value is safe inside single quotes, also in a style="…" attribute.
+ */
+export function fieldImage(dark) {
+    const svg = fieldSvg(dark ? FIELD_OPACITY.dark : FIELD_OPACITY.light);
+    return `url('data:image/svg+xml,${encodeURIComponent(svg)}')`;
+}
+//# sourceMappingURL=field.js.map

package/dist/render/watermark.d.ts

@@ -1,7 +1,7 @@
 export interface WatermarkOptions {
     /** Text set across every page; undefined or blank for none. */
     text?: string;
-    /** A field of light in the corner of every page. */
+    /** Fields of light in the top-left and bottom-right corners of every page. */
     field: boolean;
     /** Size of the text area in CSS px (the text runs along its diagonal). */
     widthPx: number;

package/dist/render/watermark.js

@@ -1,11 +1,12 @@
 import { escapeHtml } from "../html.js";
+import { FIELD_COLORS, fieldImage } from "./field.js";
 /**
  * Watermarks in the Anti-Gravity gradient (field-blue → field-cyan → field-violet), PDF only:
- * a text set diagonally across every page, and a soft field of light in the top-right corner of
- * every page. Both sit behind the content. Chrome repeats a `position: fixed` element on every
+ * a text set diagonally across every page, and soft fields of light in the top-left and
+ * bottom-right corners of every page. Both sit behind the content. Chrome repeats a `position: fixed` element on every
  * printed page, at the same place in the text area, so pagination is left alone.
  */
-const FIELD = { blue: "#4f7cff", cyan: "#22c3e6", violet: "#8c6cf0" };
+const FIELD = FIELD_COLORS;
 /** Angle (degrees, counter-clockwise) and font size (px) that fit `text` on the diagonal. */
 export function diagonalText(text, widthPx, heightPx) {
     const angle = (Math.atan2(heightPx, widthPx) * 180) / Math.PI;
@@ -22,9 +23,13 @@ function textMark(text, widthPx, heightPx, dark) {
     return `<div class="mdr-watermark-text" style="opacity: ${dark ? 0.14 : 0.1}"><span style="font-size: ${fontSize}px; transform: rotate(${(-angle).toFixed(2)}deg)">${escapeHtml(text.toUpperCase())}</span></div>`;
 }
 function fieldMark(dark) {
-    // The same three lights as the title block's field (theme-antigravity.css), each fading out
-    // inside the box so no edge shows.
-    return `<div class="mdr-watermark-field" style="opacity: ${dark ? 0.22 : 0.16}"></div>`;
+    // The same field as the title block's (render/field.ts), as a vector SVG image, in the
+    // top-left and bottom-right corners of every page.
+    const style = `style="background-image: ${fieldImage(dark)}"`;
+    return [
+        `<div class="mdr-watermark-field mdr-field-top-left" ${style}></div>`,
+        `<div class="mdr-watermark-field mdr-field-bottom-right" ${style}></div>`,
+    ].join("\n");
 }
 /** HTML of the requested marks, to go before the document body; "" when none is requested. */
 export function watermarkHtml(options) {
@@ -72,15 +77,15 @@ export const WATERMARK_CSS = `.mdr-watermark { display: none; }
   }
   .mdr-watermark-field {
     position: absolute;
-    top: 0;
-    right: 0;
     width: 40%;
     height: 230px;
-    background:
-      radial-gradient(28% 38% at 58% 45%, ${FIELD.blue}, transparent),
-      radial-gradient(16% 26% at 78% 58%, ${FIELD.cyan}, transparent),
-      radial-gradient(25% 30% at 40% 32%, ${FIELD.violet}, transparent);
+    background-position: center;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
   }
+  /* The lights gather towards the right of the field's box: mirror it so they sit in its corner. */
+  .mdr-field-top-left { top: 0; left: 0; transform: scaleX(-1); }
+  .mdr-field-bottom-right { bottom: 0; right: 0; transform: scaleY(-1); }
   .mdr-watermark:has(.mdr-watermark-field) ~ .markdown-body .doc-header::before { display: none; }
 }`;
 //# sourceMappingURL=watermark.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imontene/mdrender",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "Command-line app for Windows and Linux that renders Markdown — with LaTeX equations and Mermaid diagrams — to PDF and HTML set in Manrope or Inter",
   "keywords": [
     "markdown",