pagyra-js 0.0.19 → 0.0.21

package/dist/src/pdf/utils/color-utils.js

@@ -10,7 +10,7 @@ export function parseColor(value) {
     if (normalized === "transparent") {
         return undefined;
     }
-    const hexMatch = normalized.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+    const hexMatch = normalized.match(/^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i);
     if (hexMatch) {
         const digits = hexMatch[1];
         if (digits.length === 3) {
@@ -19,10 +19,25 @@ export function parseColor(value) {
             const b = parseHex(digits[2] + digits[2]);
             return { r, g, b, a: 1 };
         }
+        if (digits.length === 4) {
+            const r = parseHex(digits[0] + digits[0]);
+            const g = parseHex(digits[1] + digits[1]);
+            const b = parseHex(digits[2] + digits[2]);
+            const a = parseHex(digits[3] + digits[3]) / 255;
+            return { r, g, b, a };
+        }
+        if (digits.length === 6) {
+            const r = parseHex(digits.slice(0, 2));
+            const g = parseHex(digits.slice(2, 4));
+            const b = parseHex(digits.slice(4, 6));
+            return { r, g, b, a: 1 };
+        }
+        // 8 digits
         const r = parseHex(digits.slice(0, 2));
         const g = parseHex(digits.slice(2, 4));
         const b = parseHex(digits.slice(4, 6));
-        return { r, g, b, a: 1 };
+        const a = parseHex(digits.slice(6, 8)) / 255;
+        return { r, g, b, a };
     }
     const rgbMatch = normalized.match(/^rgba?\((.+)\)$/);
     if (rgbMatch) {

package/dist/src/pdf/utils/filter-utils.d.ts

@@ -0,0 +1,29 @@
+import type { FilterFunction } from "../../css/properties/visual.js";
+import type { RGBA, ShadowLayer } from "../types.js";
+/**
+ * Extrai o multiplicador de opacity de uma lista de filter functions.
+ * Múltiplos `opacity()` são multiplicados entre si (composição sequencial).
+ * Retorna 1.0 se não houver `opacity()` na lista.
+ */
+export declare function extractOpacityMultiplier(filters: FilterFunction[]): number;
+/**
+ * Converte `drop-shadow()` do filter em ShadowLayer[] compatível
+ * com o pipeline de box-shadow existente.
+ *
+ * Diferenças em relação a box-shadow real:
+ * - Sem `inset` (sempre false).
+ * - Sem `spread-radius` (sempre 0).
+ * - Na prática do CSS, drop-shadow segue a forma alpha do conteúdo,
+ *   mas no MVP aproximamos como sombra retangular (box-shadow).
+ */
+export declare function extractDropShadowLayers(filters: FilterFunction[], fallbackColor: RGBA): ShadowLayer[];
+/**
+ * Lista nomes de funções de filtro que não são renderizáveis no MVP.
+ * Usado para emitir warnings durante a fase de pintura.
+ */
+export declare function listUnsupportedFilters(filters: FilterFunction[] | undefined): string[];
+/**
+ * Emite warnings para filtros não suportados.
+ * Chamado uma vez por box durante a fase de pintura.
+ */
+export declare function warnUnsupportedFilters(filters: FilterFunction[] | undefined, label: "filter" | "backdrop-filter", boxId: string): void;

package/dist/src/pdf/utils/filter-utils.js

@@ -0,0 +1,85 @@
+// src/pdf/utils/filter-utils.ts
+import { parseColor, cloneColor } from "./color-utils.js";
+import { log } from "../../logging/debug.js";
+/**
+ * Extrai o multiplicador de opacity de uma lista de filter functions.
+ * Múltiplos `opacity()` são multiplicados entre si (composição sequencial).
+ * Retorna 1.0 se não houver `opacity()` na lista.
+ */
+export function extractOpacityMultiplier(filters) {
+    let multiplier = 1;
+    for (const fn of filters) {
+        if (fn.kind === "opacity") {
+            multiplier *= fn.value;
+        }
+    }
+    return Math.max(0, Math.min(1, multiplier));
+}
+/**
+ * Converte `drop-shadow()` do filter em ShadowLayer[] compatível
+ * com o pipeline de box-shadow existente.
+ *
+ * Diferenças em relação a box-shadow real:
+ * - Sem `inset` (sempre false).
+ * - Sem `spread-radius` (sempre 0).
+ * - Na prática do CSS, drop-shadow segue a forma alpha do conteúdo,
+ *   mas no MVP aproximamos como sombra retangular (box-shadow).
+ */
+export function extractDropShadowLayers(filters, fallbackColor) {
+    const result = [];
+    for (const fn of filters) {
+        if (fn.kind !== "drop-shadow")
+            continue;
+        const offsetX = typeof fn.offsetX === "number" ? fn.offsetX : 0;
+        const offsetY = typeof fn.offsetY === "number" ? fn.offsetY : 0;
+        const blur = typeof fn.blurRadius === "number" ? Math.max(0, fn.blurRadius) : 0;
+        let color;
+        if (fn.color) {
+            const parsed = parseColor(fn.color);
+            color = parsed ? cloneColor(parsed) : cloneColor(fallbackColor);
+        }
+        else {
+            color = cloneColor(fallbackColor);
+        }
+        result.push({
+            inset: false,
+            offsetX,
+            offsetY,
+            blur,
+            spread: 0,
+            color,
+        });
+    }
+    return result;
+}
+/**
+ * Lista nomes de funções de filtro que não são renderizáveis no MVP.
+ * Usado para emitir warnings durante a fase de pintura.
+ */
+export function listUnsupportedFilters(filters) {
+    if (!filters || filters.length === 0)
+        return [];
+    const unsupported = [];
+    for (const fn of filters) {
+        // opacity e drop-shadow são suportados no MVP
+        if (fn.kind === "opacity" || fn.kind === "drop-shadow")
+            continue;
+        unsupported.push(fn.kind);
+    }
+    return unsupported;
+}
+/**
+ * Emite warnings para filtros não suportados.
+ * Chamado uma vez por box durante a fase de pintura.
+ */
+export function warnUnsupportedFilters(filters, label, boxId) {
+    const names = label === "backdrop-filter"
+        ? (filters ?? []).map((fn) => fn.kind)
+        : listUnsupportedFilters(filters);
+    if (names.length === 0)
+        return;
+    log("paint", "warn", `Unsupported ${label} function(s) ignored: ${names.join(", ")}`, {
+        boxId,
+        functions: names,
+    });
+}

package/dist/src/pdf/utils/node-text-run-factory.js

@@ -20,7 +20,7 @@ export function buildNodeTextRuns(context) {
         }
     }
     if (transform && textRuns.length > 0) {
-        applyTransformToTextRuns(textRuns, transform, borderBox);
+        // applyTransformToTextRuns(textRuns, transform, borderBox);
     }
     return textRuns;
 }

package/dist/src/pdf/utils/text-layout-adjuster.d.ts

@@ -1,12 +1,4 @@
 import type { RenderBox } from "../types.js";
-/**
- * Global pass to fix justified layout in the render tree.
- *
- * For each RenderBox with textAlign: "justify":
- *   - collect ALL runs from that box and its descendants
- *   - group runs by lineIndex
-import type { RenderBox, Run } from "../types.js";
-
 /**
  * Global pass to fix justified layout in the render tree.
  *

package/dist/src/pdf/utils/text-layout-adjuster.js

@@ -1,11 +1,3 @@
-/**
- * Global pass to fix justified layout in the render tree.
- *
- * For each RenderBox with textAlign: "justify":
- *   - collect ALL runs from that box and its descendants
- *   - group runs by lineIndex
-import type { RenderBox, Run } from "../types.js";
-
 /**
  * Global pass to fix justified layout in the render tree.
  *
@@ -73,6 +65,17 @@ function adjustLinePositions(runs) {
         /^\s+$/.test(runs[firstContentIndex].text)) {
         firstContentIndex++;
     }
+    const hasLeadingWhitespace = firstContentIndex > 0;
+    if (firstContentIndex >= runs.length) {
+        const anchorX = runs[0].lineMatrix?.e ?? 0;
+        for (const run of runs) {
+            if (run.lineMatrix) {
+                run.lineMatrix.e = anchorX;
+            }
+            run.advanceWidth = 0;
+        }
+        return;
+    }
     // Calculate width to redistribute from leading spaces
     let widthLost = 0;
     for (let i = 0; i < firstContentIndex; i++) {
@@ -85,7 +88,7 @@ function adjustLinePositions(runs) {
     }
     const isLastLine = runs[0].isLastLine ?? false;
     // Redistribute width if not last line and we have spaces to distribute to
-    if (!isLastLine && widthLost > 0 && remainingSpaces > 0) {
+    if (hasLeadingWhitespace && !isLastLine && widthLost > 0 && remainingSpaces > 0) {
         const adjustment = widthLost / remainingSpaces;
         for (let i = firstContentIndex; i < runs.length; i++) {
             const run = runs[i];

package/dist/src/shim/css-browser.d.ts

@@ -1,21 +1,26 @@
 /**
  * Browser shim for css - provides CSS parsing using browser APIs
- * This replaces the Node.js css package in browser builds
+ * This replaces the Node.js css package in browser builds.
+ *
+ * The returned AST must match the shape produced by the Node.js `css` package
+ * so that parse-css.ts can consume it without any platform-specific branches.
  */
-interface CSSRule {
-    type: number;
+interface CSSDeclaration {
+    type: string;
+    property: string;
+    value: string;
+}
+interface CSSRuleNode {
+    type: string;
     selectors?: string[];
-    declarations?: Array<{
-        property: string;
-        value: string;
-    }>;
-    rules?: CSSRule[];
+    declarations?: CSSDeclaration[];
+    rules?: CSSRuleNode[];
     media?: string;
 }
 interface CSSParseResult {
     type: string;
     stylesheet?: {
-        rules: CSSRule[];
+        rules: CSSRuleNode[];
     };
 }
 /**

package/dist/src/shim/css-browser.js

@@ -1,13 +1,28 @@
 /**
  * Browser shim for css - provides CSS parsing using browser APIs
- * This replaces the Node.js css package in browser builds
+ * This replaces the Node.js css package in browser builds.
+ *
+ * The returned AST must match the shape produced by the Node.js `css` package
+ * so that parse-css.ts can consume it without any platform-specific branches.
  */
+function extractDeclarations(style) {
+    const declarations = [];
+    for (let j = 0; j < style.length; j++) {
+        const prop = style[j];
+        declarations.push({
+            type: "declaration",
+            property: prop,
+            value: style.getPropertyValue(prop),
+        });
+    }
+    return declarations;
+}
 /**
  * Parse CSS text into an AST-like structure
  * Compatible with the Node.js css package's parse() function
  */
 export function parse(cssText) {
-    const style = document.createElement('style');
+    const style = document.createElement("style");
     style.textContent = cssText;
     document.head.appendChild(style);
     const sheet = style.sheet;
@@ -16,61 +31,57 @@ export function parse(cssText) {
         const cssRules = sheet.cssRules || [];
         for (let i = 0; i < cssRules.length; i++) {
             const rule = cssRules[i];
-            if (rule.type === CSSRule.STYLE_RULE) {
-                const styleRule = rule;
-                const declarations = [];
-                const styleObj = styleRule.style;
-                for (let j = 0; j < styleObj.length; j++) {
-                    const prop = styleObj[j];
-                    declarations.push({
-                        property: prop,
-                        value: styleObj.getPropertyValue(prop)
-                    });
-                }
+            if (rule instanceof CSSStyleRule) {
+                // Split compound selectors so each gets its own entry, matching the
+                // node `css` package behaviour (it splits on commas).
+                const selectors = rule.selectorText
+                    .split(",")
+                    .map((s) => s.trim())
+                    .filter(Boolean);
                 rules.push({
-                    type: styleRule.type,
-                    selectors: [styleRule.selectorText],
-                    declarations
+                    type: "rule",
+                    selectors,
+                    declarations: extractDeclarations(rule.style),
                 });
             }
-            else if (rule.type === CSSRule.MEDIA_RULE) {
-                const mediaRule = rule;
+            else if (rule instanceof CSSFontFaceRule) {
+                rules.push({
+                    type: "font-face",
+                    declarations: extractDeclarations(rule.style),
+                });
+            }
+            else if (rule instanceof CSSMediaRule) {
                 const mediaRules = [];
-                for (let k = 0; k < mediaRule.cssRules.length; k++) {
-                    const mediaStyleRule = mediaRule.cssRules[k];
-                    if (mediaStyleRule.type === CSSRule.STYLE_RULE) {
-                        const declarations = [];
-                        const styleObj = mediaStyleRule.style;
-                        for (let j = 0; j < styleObj.length; j++) {
-                            const prop = styleObj[j];
-                            declarations.push({
-                                property: prop,
-                                value: styleObj.getPropertyValue(prop)
-                            });
-                        }
+                for (let k = 0; k < rule.cssRules.length; k++) {
+                    const inner = rule.cssRules[k];
+                    if (inner instanceof CSSStyleRule) {
+                        const selectors = inner.selectorText
+                            .split(",")
+                            .map((s) => s.trim())
+                            .filter(Boolean);
                         mediaRules.push({
-                            type: mediaStyleRule.type,
-                            selectors: [mediaStyleRule.selectorText],
-                            declarations
+                            type: "rule",
+                            selectors,
+                            declarations: extractDeclarations(inner.style),
                         });
                     }
                 }
                 rules.push({
-                    type: rule.type,
+                    type: "media",
                     media: rule.conditionText,
-                    rules: mediaRules
+                    rules: mediaRules,
                 });
             }
         }
     }
     document.head.removeChild(style);
     return {
-        type: 'stylesheet',
+        type: "stylesheet",
         stylesheet: {
-            rules
-        }
+            rules,
+        },
     };
 }
 export default {
-    parse
+    parse,
 };

package/dist/src/units/units.d.ts

@@ -13,6 +13,6 @@ export interface UnitCtx {
 }
 export declare function makeUnitParsers(_ctx: UnitCtx): {
     parseLength: (value: string) => number | import("../css/length.js").RelativeLength | undefined;
-    parseLengthOrPercent: (value: string) => number | import("../css/length.js").AbsoluteLength | import("../css/length.js").RelativeLength | undefined;
+    parseLengthOrPercent: (value: string) => number | import("../css/length.js").AbsoluteLength | import("../css/length.js").RelativeLength | import("../css/length.js").CalcLength | undefined;
 };
 export type UnitParsers = ReturnType<typeof makeUnitParsers>;

package/dist/tests/css/box-sizing.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/css/box-sizing.spec.js

@@ -0,0 +1,46 @@
+import { registerAllPropertyParsers } from "../../src/css/parsers/register-parsers.js";
+import { computeStyleForElement } from "../../src/css/compute-style.js";
+import { ComputedStyle } from "../../src/css/style.js";
+import { BoxSizing } from "../../src/css/enums.js";
+import { makeUnitParsers } from "../../src/units/units.js";
+function makeElement(inlineStyle) {
+    return {
+        nodeType: 1,
+        nodeName: "DIV",
+        tagName: "div",
+        getAttribute(name) {
+            if (name === "style") {
+                return inlineStyle;
+            }
+            return null;
+        },
+        hasAttribute(name) {
+            return name === "style";
+        },
+        querySelectorAll(_selectors) {
+            return [];
+        },
+        parentElement: null,
+        firstElementChild: null,
+        lastElementChild: null,
+        nextElementSibling: null,
+        previousElementSibling: null,
+    };
+}
+describe("box-sizing parser and computed style", () => {
+    beforeAll(() => {
+        registerAllPropertyParsers();
+    });
+    it("defaults to content-box", () => {
+        const style = computeStyleForElement(makeElement("width: 200px;"), [], new ComputedStyle(), makeUnitParsers({ viewport: { width: 800, height: 600 } }), 16);
+        expect(style.boxSizing).toBe(BoxSizing.ContentBox);
+    });
+    it("parses border-box from inline style", () => {
+        const style = computeStyleForElement(makeElement("box-sizing: border-box; width: 200px;"), [], new ComputedStyle(), makeUnitParsers({ viewport: { width: 800, height: 600 } }), 16);
+        expect(style.boxSizing).toBe(BoxSizing.BorderBox);
+    });
+    it("parses content-box explicitly", () => {
+        const style = computeStyleForElement(makeElement("box-sizing: content-box;"), [], new ComputedStyle(), makeUnitParsers({ viewport: { width: 800, height: 600 } }), 16);
+        expect(style.boxSizing).toBe(BoxSizing.ContentBox);
+    });
+});

package/dist/tests/css/calc-parser.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/css/calc-parser.spec.js

@@ -0,0 +1,68 @@
+import { parseCalcLength } from "../../src/css/parsers/calc-parser.js";
+import { computeStyleForElement } from "../../src/css/compute-style.js";
+import { ComputedStyle } from "../../src/css/style.js";
+import { registerAllPropertyParsers } from "../../src/css/parsers/register-parsers.js";
+import { makeUnitParsers } from "../../src/units/units.js";
+function makeElement(inlineStyle) {
+    return {
+        nodeType: 1,
+        nodeName: "DIV",
+        tagName: "div",
+        getAttribute(name) {
+            if (name === "style") {
+                return inlineStyle;
+            }
+            return null;
+        },
+        hasAttribute(name) {
+            return name === "style";
+        },
+        querySelectorAll(_selectors) {
+            return [];
+        },
+        parentElement: null,
+        firstElementChild: null,
+        lastElementChild: null,
+        nextElementSibling: null,
+        previousElementSibling: null,
+    };
+}
+describe("calc() parser", () => {
+    beforeAll(() => {
+        registerAllPropertyParsers();
+    });
+    it("parses arithmetic with mixed units", () => {
+        const parsed = parseCalcLength("calc((10px + 5%) * 2 - 4px / 2)");
+        expect(parsed).toBeDefined();
+        expect(parsed).toEqual({
+            kind: "calc",
+            px: 18,
+            percent: 0.1,
+            em: 0,
+            rem: 0,
+            cqw: 0,
+            cqh: 0,
+            cqi: 0,
+            cqb: 0,
+            cqmin: 0,
+            cqmax: 0,
+        });
+    });
+    it("supports calc in width declarations", () => {
+        const style = computeStyleForElement(makeElement("width: calc(100% - 20px);"), [], new ComputedStyle(), makeUnitParsers({ viewport: { width: 800, height: 600 } }), 16);
+        expect(typeof style.width).toBe("object");
+        expect(style.width).toEqual({
+            kind: "calc",
+            px: -20,
+            percent: 1,
+            em: 0,
+            rem: 0,
+            cqw: 0,
+            cqh: 0,
+            cqi: 0,
+            cqb: 0,
+            cqmin: 0,
+            cqmax: 0,
+        });
+    });
+});

package/dist/tests/css/container-query-units.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/css/container-query-units.spec.js

@@ -0,0 +1,64 @@
+import { registerAllPropertyParsers } from "../../src/css/parsers/register-parsers.js";
+import { computeStyleForElement } from "../../src/css/compute-style.js";
+import { ComputedStyle } from "../../src/css/style.js";
+import { makeUnitParsers } from "../../src/units/units.js";
+function makeElement(inlineStyle) {
+    return {
+        nodeType: 1,
+        nodeName: "DIV",
+        tagName: "div",
+        getAttribute(name) {
+            if (name === "style") {
+                return inlineStyle;
+            }
+            return null;
+        },
+        hasAttribute(name) {
+            return name === "style";
+        },
+        querySelectorAll(_selectors) {
+            return [];
+        },
+        parentElement: null,
+        firstElementChild: null,
+        lastElementChild: null,
+        nextElementSibling: null,
+        previousElementSibling: null,
+    };
+}
+describe("container query length units", () => {
+    beforeAll(() => {
+        registerAllPropertyParsers();
+    });
+    it("parses cqw/cqh in normal lengths", () => {
+        const style = computeStyleForElement(makeElement("width:50cqw;height:25cqh;"), [], new ComputedStyle(), makeUnitParsers({ viewport: { width: 800, height: 600 } }), 16);
+        expect(style.width).toMatchObject({
+            kind: "calc",
+            px: 0,
+            percent: 0,
+            cqw: 0.5,
+        });
+        expect(style.height).toMatchObject({
+            kind: "calc",
+            px: 0,
+            percent: 0,
+            cqh: 0.25,
+        });
+    });
+    it("parses cq units inside calc()", () => {
+        const style = computeStyleForElement(makeElement("width:calc(10px + 10cqw - 2cqh + 1cqmin);"), [], new ComputedStyle(), makeUnitParsers({ viewport: { width: 800, height: 600 } }), 16);
+        expect(style.width).toEqual({
+            kind: "calc",
+            px: 10,
+            percent: 0,
+            em: 0,
+            rem: 0,
+            cqw: 0.1,
+            cqh: -0.02,
+            cqi: 0,
+            cqb: 0,
+            cqmin: 0.01,
+            cqmax: 0,
+        });
+    });
+});

package/dist/tests/css/content-parser.spec.js

@@ -34,6 +34,13 @@ describe("content CSS property parsing", () => {
         const item = expectContentType(target.content[0], "counter");
         expect(item.style).toBe("decimal");
     });
+    it("parses counter() with decimal-leading-zero style", () => {
+        const target = {};
+        parseContent("counter(step, decimal-leading-zero)", target);
+        expect(target.content).toBeDefined();
+        const item = expectContentType(target.content[0], "counter");
+        expect(item.style).toBe("decimal-leading-zero");
+    });
     it("parses attr() function", () => {
         const target = {};
         parseContent('attr(data-index)', target);
@@ -85,6 +92,12 @@ describe("formatCounterValue", () => {
         expect(formatCounterValue(26, "upper-alpha")).toBe("Z");
         expect(formatCounterValue(27, "upper-alpha")).toBe("AA");
     });
+    it("formats decimal-leading-zero", () => {
+        expect(formatCounterValue(1, "decimal-leading-zero")).toBe("01");
+        expect(formatCounterValue(9, "decimal-leading-zero")).toBe("09");
+        expect(formatCounterValue(10, "decimal-leading-zero")).toBe("10");
+        expect(formatCounterValue(-1, "decimal-leading-zero")).toBe("-01");
+    });
 });
 describe("evaluateContent", () => {
     it("evaluates string content", () => {

package/dist/tests/css/filter-parser.spec.d.ts

@@ -0,0 +1 @@
+export {};