@imontene/mdrender 2.5.0 → 2.6.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # 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:
+  - `--watermark <texto>` (o `watermark:`): texto en diagonal en cada página, ajustado al
+    tamaño y la orientación de la hoja;
+  - `--watermark-field` (o `watermarkField: true`): campo de luz en la esquina de cada página.
+
+  Van detrás del contenido y funcionan con cualquier tema.
+
 ## 2.5.0 — 2026-10-22
 
 - **Nuevo estilo por defecto: Anti-Gravity**, tomado del design system del mismo nombre y

package/README.md

@@ -156,6 +156,8 @@ equipo); `--port` fija el puerto y `--no-open` no abre el navegador.
 | `--no-page-numbers`            | Sin el pie con números de página                                                                 | —                     |
 | `--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                               | —                     |
 | `--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`         |
@@ -195,6 +197,20 @@ del mismo nombre y llevado de diapositivas a páginas:
 versiones anteriores y `--theme dark` su variante oscura. El design system pide texto alineado
 a la izquierda: con este tema, usa `--no-justify` si quieres seguirlo al pie de la letra.
 
+**Marca de agua**: dos marcas con el degradado azul → cian → violeta del design system
+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
+```
+
+También como `watermark: Borrador` y `watermarkField: true` en el front matter o en
+`mdrender.config.json`. Van muy tenues y detrás del contenido: no tapan el texto, y las
+imágenes, tablas y tarjetas quedan por encima. Según la versión de Chrome, el texto de la marca
+puede formar parte del texto del PDF (aparecer al copiar o buscar). Funcionan con cualquier tema
+y son algo más intensas en los oscuros.
+
 **Tipografía**: el texto usa [Manrope](https://fonts.google.com/specimen/Manrope);
 `--font inter` (o `font: inter` en el front matter o en `mdrender.config.json`) vuelve a
 [Inter](https://fonts.google.com/specimen/Inter), la tipografía de las versiones anteriores.

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

@@ -27,6 +27,8 @@ const DOCUMENT_FLAGS = [
     "pageNumbers",
     "font",
     "justify",
+    "watermark",
+    "watermarkField",
     "density",
     "fontSize",
     "css",
@@ -63,6 +65,8 @@ function addDocumentOptions(command) {
         .option("--no-page-numbers", "no default page-number footer")
         .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("--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,8 +12,10 @@ 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";
 import { buildHtmlDocument, builtinThemeCss, densityCss } from "./render/template.js";
 import { writeFileAtomic } from "./write.js";
@@ -109,10 +111,24 @@ 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");
 }
+/** The watermarks asked for (PDF only), sized to the page's text area. */
+function watermarks(options, margin) {
+    const landscape = options.orientation === "landscape";
+    return watermarkHtml({
+        text: options.watermark,
+        field: options.watermarkField,
+        widthPx: textWidthPx(options.pageSize, landscape, margin),
+        heightPx: contentHeightPx(options.pageSize, landscape, margin),
+        dark: isDarkTheme(options.theme),
+    });
+}
 const fixed2 = (n) => n.toFixed(2);
 /** "Mermaid autofit: wrap 300, turned LR→TB, scale 0.33 → 1.00, height 81 → 903 px". */
 export function describeLayout(layout) {
@@ -215,6 +231,7 @@ paged = false) {
             }
         });
     }
+    const watermark = paged ? watermarks(options, margin) : "";
     const html = buildHtmlDocument({
         title,
         body,
@@ -226,7 +243,12 @@ paged = false) {
         showTitle: options.title !== undefined,
         themeCss,
         font: options.font,
-        layoutCss: [...densityCss(options.density), layoutCss(options, margin)],
+        beforeBody: watermark || undefined,
+        layoutCss: [
+            ...densityCss(options.density),
+            layoutCss(options, margin),
+            ...(watermark ? [WATERMARK_CSS] : []),
+        ],
         extraCss,
     });
     diagnostics.sort((a, b) => (a.line ?? 0) - (b.line ?? 0));

package/dist/doctor.js

@@ -138,6 +138,8 @@ function settingsCheck(options) {
             `${m.left} (top right bottom left), ${options.font} ` +
             `${options.fontSize ?? DEFAULT_FONT_SIZE}, ${options.density} density, ` +
             `${options.justify ? "justified" : "ragged"} paragraphs, ` +
+            (options.watermark?.trim() ? `watermark "${options.watermark.trim()}", ` : "") +
+            (options.watermarkField ? "watermark field, " : "") +
             `language ${options.lang}, theme ` +
             path.basename(options.theme),
     };

package/dist/options.d.ts

@@ -49,6 +49,10 @@ export interface DocumentOptions {
     mermaidAutofit: boolean;
     /** Whether autofit may turn a flowchart to the other axis (LR ↔ TB) when it reads far better. */
     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. */
+    watermarkField: boolean;
     /** Justify paragraphs in the PDF (body, quotes, alerts), breaking long words with hyphens. */
     justify: boolean;
     /** Typeface of the text: Manrope or Inter (code is always JetBrains Mono). */

package/dist/options.js

@@ -22,6 +22,7 @@ export const DEFAULT_OPTIONS = {
     mermaidFlip: "auto",
     font: "manrope",
     justify: true,
+    watermarkField: false,
     density: "normal",
     theme: "antigravity",
     css: [],
@@ -122,6 +123,8 @@ const VALIDATORS = {
     mermaidFlip: oneOf(MERMAID_FLIPS),
     font: oneOf(TEXT_FONTS),
     justify: bool,
+    watermark: text,
+    watermarkField: bool,
     density: oneOf(DENSITIES),
     fontSize,
     theme: (value, describe, baseDir) => {

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/template.d.ts

@@ -20,6 +20,8 @@ export interface DocumentParts {
     themeCss?: string[];
     /** Text font to embed. Defaults to Manrope. */
     font?: TextFont;
+    /** HTML placed before the document body (the watermarks). */
+    beforeBody?: string;
     /** Layout stylesheets (density, font size, page height), applied after the theme. */
     layoutCss?: string[];
     /** Extra stylesheet contents, applied after the theme and layout. */

package/dist/render/template.js

@@ -61,7 +61,7 @@ ${author ? `<meta name="author" content="${escapeHtml(author)}">\n` : ""}<title>
 ${styles.map((css) => `<style>\n${css}\n</style>`).join("\n")}
 </head>
 <body>
-<main class="markdown-body">
+${parts.beforeBody ? parts.beforeBody + "\n" : ""}<main class="markdown-body">
 ${parts.showTitle ? titleBlock(parts) + "\n" : ""}${body}
 </main>
 </body>

package/dist/render/watermark.d.ts

@@ -0,0 +1,24 @@
+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. */
+    field: boolean;
+    /** Size of the text area in CSS px (the text runs along its diagonal). */
+    widthPx: number;
+    heightPx: number;
+    /** Dark page: the marks are a little stronger, as the design system's dark stage. */
+    dark: boolean;
+}
+/** Angle (degrees, counter-clockwise) and font size (px) that fit `text` on the diagonal. */
+export declare function diagonalText(text: string, widthPx: number, heightPx: number): {
+    angle: number;
+    fontSize: number;
+};
+/** HTML of the requested marks, to go before the document body; "" when none is requested. */
+export declare function watermarkHtml(options: WatermarkOptions): string;
+/**
+ * Print-only placement: fixed over the text area of every page, under the content (the body
+ * becomes a stacking layer above it). Hidden on screen. With the field on every page, the title
+ * block's own field (Anti-Gravity) is dropped so the first page does not get two.
+ */
+export declare const WATERMARK_CSS: string;

package/dist/render/watermark.js

@@ -0,0 +1,85 @@
+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 = 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;
+    const diagonal = Math.hypot(widthPx, heightPx);
+    // Manrope 600 capitals average about 0.68 em; the text takes ~70% of the diagonal.
+    const chars = Math.max(1, [...text].length);
+    const fontSize = Math.min(heightPx * 0.2, (diagonal * 0.7) / (chars * 0.68));
+    return { angle, fontSize: Math.round(fontSize) };
+}
+function textMark(text, widthPx, heightPx, dark) {
+    const { angle, fontSize } = diagonalText(text, widthPx, heightPx);
+    // HTML rather than SVG text: Chrome paints the SVG text of a fixed element on the first page
+    // only, while HTML is repeated on every page like the rest of the element.
+    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 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) {
+    const text = options.text?.trim();
+    if (!text && !options.field)
+        return "";
+    const parts = [
+        options.field ? fieldMark(options.dark) : "",
+        text ? textMark(text, options.widthPx, options.heightPx, options.dark) : "",
+    ].filter(Boolean);
+    return `<div class="mdr-watermark" aria-hidden="true">\n${parts.join("\n")}\n</div>`;
+}
+/**
+ * Print-only placement: fixed over the text area of every page, under the content (the body
+ * becomes a stacking layer above it). Hidden on screen. With the field on every page, the title
+ * block's own field (Anti-Gravity) is dropped so the first page does not get two.
+ */
+export const WATERMARK_CSS = `.mdr-watermark { display: none; }
+@media print {
+  .mdr-watermark {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+  }
+  .markdown-body { position: relative; z-index: 1; }
+  .mdr-watermark-text {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .mdr-watermark-text span {
+    font-family: var(--font-text);
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    line-height: 1;
+    white-space: nowrap;
+    color: transparent;
+    background: linear-gradient(90deg, ${FIELD.blue}, ${FIELD.cyan}, ${FIELD.violet});
+    -webkit-background-clip: text;
+    background-clip: text;
+  }
+  .mdr-watermark-field {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 40%;
+    height: 230px;
+    background-position: center;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+  .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.5.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",