@imontene/mdrender 2.6.0 → 2.6.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Cambios
 
+## 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/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/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/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.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
  * 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,8 @@ 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.
+    return `<div class="mdr-watermark-field" style="background-image: ${fieldImage(dark)}"></div>`;
 }
 /** HTML of the requested marks, to go before the document body; "" when none is requested. */
 export function watermarkHtml(options) {
@@ -76,10 +76,9 @@ export const WATERMARK_CSS = `.mdr-watermark { display: none; }
     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;
   }
   .mdr-watermark:has(.mdr-watermark-field) ~ .markdown-body .doc-header::before { display: none; }
 }`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imontene/mdrender",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "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",