pagyra-js 0.0.1

package/src/utils/base64.ts

@@ -0,0 +1,24 @@
+/**
+ * Decode a base64 string into a Uint8Array without relying on Node Buffer.
+ */
+export function decodeBase64ToUint8Array(base64: string): Uint8Array {
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+  const clean = base64.replace(/[^A-Za-z0-9+/=]/g, "");
+  const output: number[] = [];
+  let buffer = 0;
+  let bits = 0;
+
+  for (const c of clean) {
+    if (c === "=") break;
+    const value = chars.indexOf(c);
+    if (value === -1) continue;
+    buffer = (buffer << 6) | value;
+    bits += 6;
+    if (bits >= 8) {
+      bits -= 8;
+      output.push((buffer >> bits) & 0xff);
+    }
+  }
+
+  return new Uint8Array(output);
+}

package/test-output.txt

@@ -0,0 +1,79 @@
+
+> pagyra-js@0.0.1 test
+> vitest run path-resolution
+
+
+ RUN  v1.6.1 C:/Users/celso/pagyra-js
+
+ ÔØ» tests/environment/path-resolution.spec.ts  (14 tests | 3 failed) 12ms
+   ÔØ» tests/environment/path-resolution.spec.ts > Path Resolution > NodeEnvironment > resolves leading-slash paths relative to base
+      expected 'C:\var\www\public\images\duck.jpg' to be '\var\www\public\images\duck.jpg' // Object.is equality
+   ÔØ» tests/environment/path-resolution.spec.ts > Path Resolution > NodeEnvironment > resolves relative paths normally
+      expected 'C:\var\www\public\images\duck.jpg' to be '\var\www\public\images\duck.jpg' // Object.is equality
+   ÔØ» tests/environment/path-resolution.spec.ts > Path Resolution > BrowserEnvironment > resolves paths with base URL that has path component
+      expected 'http://localhost:3000/examples/images' to be 'http://localhost:3000/images/duck.jpg' // Object.is equality
+
+ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ» Failed Tests 3 ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»
+
+ FAIL  tests/environment/path-resolution.spec.ts > Path Resolution > NodeEnvironment > resolves leading-slash paths relative to base
+AssertionError: expected 'C:\var\www\public\images\duck.jpg' to be '\var\www\public\images\duck.jpg' // Object.is equality
+
+- Expected
++ Received
+
+- \var\www\public\images\duck.jpg
++ C:\var\www\public\images\duck.jpg
+
+ ÔØ» tests/environment/path-resolution.spec.ts:13:30
+     11|             const resolved = env.resolveLocal('/images/duck.jpg', base
+     12|             const expected = path.join(base, 'images', 'duck.jpg');
+     13|             expect(resolved).toBe(expected);
+       |                              ^
+     14|         });
+     15| 
+
+ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»[1/3]ÔÄ»
+
+ FAIL  tests/environment/path-resolution.spec.ts > Path Resolution > NodeEnvironment > resolves relative paths normally
+AssertionError: expected 'C:\var\www\public\images\duck.jpg' to be '\var\www\public\images\duck.jpg' // Object.is equality
+
+- Expected
++ Received
+
+- \var\www\public\images\duck.jpg
++ C:\var\www\public\images\duck.jpg
+
+ ÔØ» tests/environment/path-resolution.spec.ts:21:30
+     19|             const resolved = env.resolveLocal('images/duck.jpg', base);
+     20|             const expected = path.join(base, 'images', 'duck.jpg');
+     21|             expect(resolved).toBe(expected);
+ Test Files  1 failed (1)
+       |                              ^
+     22|         });
+     23| 
+      Tests  3 failed | 11 passed (14)
+
+ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»[2/3]ÔÄ»
+
+ FAIL  tests/environment/path-resolution.spec.ts > Path Resolution > BrowserEnvironment > resolves paths with base URL that has path component
+AssertionError: expected 'http://localhost:3000/examples/images' to be 'http://localhost:3000/images/duck.jpg' // Object.is equality
+
+- Expected
++ Received
+
+- http://localhost:3000/images/duck.jpg
++ http://localhost:3000/examples/images/duck.jpg
+
+ ÔØ» tests/environment/path-resolution.spec.ts:100:30
+     98|             const env = new BrowserEnvironment();
+     99|             const resolved = env.resolveLocal('/images/duck.jpg', 'htt
+    100|             expect(resolved).toBe('http://localhost:3000/images/duck.j
+       |                              ^
+    101|         });
+    102|     });
+
+ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»ÔÄ»[3/3]ÔÄ»
+
+   Start at  18:22:14
+   Duration  585ms (transform 50ms, setup 0ms, collect 59ms, tests 12ms, environment 0ms, prepare 169ms)
+

package/tests/css/background-parser.spec.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from "vitest";
+import { parseBackground } from "../../src/css/parsers/background-parser-extended.js";
+import type { StyleAccumulator } from "../../src/css/style.js";
+
+describe("background shorthand parsing", () => {
+  it("recognizes named colors", () => {
+    const target: StyleAccumulator = {};
+    parseBackground("skyblue", target);
+    expect(target.backgroundLayers).toBeDefined();
+    expect(
+      target.backgroundLayers?.some((layer) => layer.kind === "color" && layer.color === "skyblue"),
+    ).toBe(true);
+  });
+});

package/tests/css/clip-path-parser.spec.ts

@@ -0,0 +1,66 @@
+import { beforeAll, describe, expect, it } from "vitest";
+import { registerAllPropertyParsers } from "../../src/css/parsers/register-parsers.js";
+import { parseClipPath } from "../../src/css/parsers/clip-path-parser.js";
+import type { StyleAccumulator } from "../../src/css/style.js";
+import { computeStyleForElement } from "../../src/css/compute-style.js";
+import { ComputedStyle } from "../../src/css/style.js";
+import { makeUnitParsers } from "../../src/units/units.js";
+
+describe("clip-path parser", () => {
+  beforeAll(() => {
+    registerAllPropertyParsers();
+  });
+
+  it("parses polygon clip-path with percentages", () => {
+    const target: StyleAccumulator = {};
+    parseClipPath("polygon(50% 0, 0 100%, 100% 100%)", target);
+
+    expect(target.clipPath).toBeDefined();
+    expect(target.clipPath?.type).toBe("polygon");
+    const points = target.clipPath?.points;
+    expect(points).toBeDefined();
+    expect(points?.length).toBe(3);
+    expect(points?.[0].x.unit).toBe("percent");
+    expect(points?.[1].y.unit).toBe("percent");
+  });
+
+  it("parses polygon clip-path with px units", () => {
+    const target: StyleAccumulator = {};
+    parseClipPath("polygon(0px 0px, 100px 0px, 0px 100px)", target);
+
+    expect(target.clipPath).toBeDefined();
+    expect(target.clipPath?.points[2].y.unit).toBe("px");
+    expect(target.clipPath?.points[2].y.value).toBe(100);
+  });
+
+  it("ignores unsupported clip-path values", () => {
+    const target: StyleAccumulator = {};
+    parseClipPath("circle(50%)", target);
+
+    expect(target.clipPath).toBeUndefined();
+  });
+
+  it("propagates clip-path through computeStyleForElement", () => {
+    const element = {
+      tagName: "div",
+      getAttribute(name: string) {
+        if (name === "style") {
+          return "clip-path: polygon(50% 0, 0 100%, 100% 100%);";
+        }
+        return null;
+      },
+    };
+
+    const style = computeStyleForElement(
+      element,
+      [],
+      new ComputedStyle(),
+      makeUnitParsers({ viewport: { width: 800, height: 600 } }),
+      16,
+    );
+
+    expect(style.clipPath).toBeDefined();
+    expect(style.clipPath?.type).toBe("polygon");
+    expect(style.clipPath?.points).toHaveLength(3);
+  });
+});

package/tests/environment/path-resolution.spec.ts

@@ -0,0 +1,104 @@
+import { describe, it, expect } from 'vitest';
+import { NodeEnvironment } from '../../src/environment/node-environment.js';
+import { BrowserEnvironment } from '../../src/environment/browser-environment.js';
+import path from 'node:path';
+
+describe('Path Resolution', () => {
+    describe('NodeEnvironment', () => {
+        it('resolves leading-slash paths relative to base', () => {
+            const env = new NodeEnvironment();
+            const base = path.resolve('/var/www/public');
+            const resolved = env.resolveLocal('/images/duck.jpg', base);
+            const expected = path.join(base, 'images', 'duck.jpg');
+            expect(path.normalize(resolved)).toBe(path.normalize(expected));
+        });
+
+        it('resolves relative paths normally', () => {
+            const env = new NodeEnvironment();
+            const base = path.resolve('/var/www/public');
+            const resolved = env.resolveLocal('images/duck.jpg', base);
+            const expected = path.join(base, 'images', 'duck.jpg');
+            expect(path.normalize(resolved)).toBe(path.normalize(expected));
+        });
+
+        it('passes through HTTP URLs unchanged', () => {
+            const env = new NodeEnvironment();
+            const url = 'https://example.com/image.jpg';
+            expect(env.resolveLocal(url)).toBe(url);
+        });
+
+        it('passes through protocol-relative URLs unchanged', () => {
+            const env = new NodeEnvironment();
+            const url = '//example.com/image.jpg';
+            expect(env.resolveLocal(url)).toBe(url);
+        });
+
+        it('passes through data URIs unchanged', () => {
+            const env = new NodeEnvironment();
+            const dataUri = 'data:image/png;base64,iVBORw0KGgo=';
+            expect(env.resolveLocal(dataUri)).toBe(dataUri);
+        });
+
+        it('resolves paths without base using current directory', () => {
+            const env = new NodeEnvironment();
+            const resolved = env.resolveLocal('test.jpg');
+            expect(path.isAbsolute(resolved)).toBe(true);
+            expect(resolved).toContain('test.jpg');
+        });
+
+        it('strips leading slash even on Windows', () => {
+            const env = new NodeEnvironment();
+            const base = 'C:\\Users\\test\\public';
+            const resolved = env.resolveLocal('/images/duck.jpg', base);
+            // Should resolve to C:\Users\test\public\images\duck.jpg, not C:\images\duck.jpg
+            expect(resolved).toContain('public');
+            expect(resolved).toContain('images');
+            expect(resolved).toContain('duck.jpg');
+            expect(resolved).not.toBe(path.join('C:', 'images', 'duck.jpg'));
+        });
+    });
+
+    describe('BrowserEnvironment', () => {
+        it('resolves leading-slash paths relative to base URL', () => {
+            const env = new BrowserEnvironment();
+            const resolved = env.resolveLocal('/images/duck.jpg', 'http://localhost:3000/');
+            expect(resolved).toBe('http://localhost:3000/images/duck.jpg');
+        });
+
+        it('resolves relative paths normally', () => {
+            const env = new BrowserEnvironment();
+            const resolved = env.resolveLocal('images/duck.jpg', 'http://localhost:3000/');
+            expect(resolved).toBe('http://localhost:3000/images/duck.jpg');
+        });
+
+        it('passes through absolute URLs unchanged', () => {
+            const env = new BrowserEnvironment();
+            const url = 'https://example.com/image.jpg';
+            expect(env.resolveLocal(url)).toBe(url);
+        });
+
+        it('passes through protocol-relative URLs unchanged', () => {
+            const env = new BrowserEnvironment();
+            const url = '//example.com/image.jpg';
+            expect(env.resolveLocal(url)).toBe(url);
+        });
+
+        it('passes through data URIs unchanged', () => {
+            const env = new BrowserEnvironment();
+            const dataUri = 'data:image/png;base64,iVBORw0KGgo=';
+            expect(env.resolveLocal(dataUri)).toBe(dataUri);
+        });
+
+        it('throws error when resolving without base', () => {
+            const env = new BrowserEnvironment();
+            expect(() => env.resolveLocal('test.jpg')).toThrow('Local path resolution is not supported');
+        });
+
+        it('resolves leading-slash paths to origin root (standard URL behavior)', () => {
+            const env = new BrowserEnvironment();
+            const resolved = env.resolveLocal('/images/duck.jpg', 'http://localhost:3000/examples/');
+            // Leading slash in URL context resolves to origin root, not relative to base path
+            expect(resolved).toBe('http://localhost:3000/images/duck.jpg');
+        });
+    });
+});

package/tests/helpers/ai-layout-diagnostics.ts

@@ -0,0 +1,141 @@
+type RenderBox = any;
+
+export function findBoxWithBorderRadius(box: RenderBox): RenderBox | null {
+    if (box?.borderRadius && box.borderRadius.topLeft?.x > 0) {
+        return box;
+    }
+    for (const child of box.children ?? []) {
+        const found = findBoxWithBorderRadius(child);
+        if (found) return found;
+    }
+    return null;
+}
+
+export function findChildSpan(box: RenderBox): RenderBox | null {
+    for (const child of box.children ?? []) {
+        if (child.tagName === "span") return child;
+    }
+    return null;
+}
+
+interface DiagnosticCheck {
+    actual: number;
+    expected: number;
+    diff: number;
+    tolerance: number;
+    label: string;
+    pass: boolean;
+}
+
+interface DiagnosticContext {
+    testId: string;
+    css: any;
+    browser: any;
+    geometry: {
+        borderBox: any;
+        contentBox: any;
+        spanBox: any;
+        padding: any;
+        border: any;
+    };
+    checks: DiagnosticCheck[];
+    fontDiagnostics?: string;
+    ascii?: string;
+}
+
+let context: DiagnosticContext | null = null;
+
+export function createDiagnosticsContext(
+    testId: string,
+    css: any,
+    browser: any,
+    borderBox: any,
+    contentBox: any,
+    spanBox: any,
+    padding: any,
+    border: any,
+    fontDiagnostics?: string
+) {
+    context = {
+        testId,
+        css,
+        browser,
+        geometry: { borderBox, contentBox, spanBox, padding, border },
+        checks: [],
+        fontDiagnostics,
+    };
+}
+
+export function addNumericCheck(
+    actual: number,
+    expected: number,
+    tolerance: number,
+    label: string
+) {
+    if (!context) throw new Error("Diagnostics context not initialized");
+    const diff = actual - expected;
+    const pass = Math.abs(diff) <= tolerance;
+    context.checks.push({ actual, expected, diff, tolerance, label, pass });
+}
+
+export function renderAsciiLayout(): string {
+    if (!context) throw new Error("Diagnostics context not initialized");
+
+    const { geometry } = context;
+    const { borderBox, contentBox, spanBox, padding, border } = geometry;
+
+    // Calculate relative positions
+    const contentX = contentBox.x - borderBox.x;
+    const contentY = contentBox.y - borderBox.y;
+    const spanX = spanBox.x - borderBox.x;
+    const spanY = spanBox.y - borderBox.y;
+
+    // Simple ASCII representation
+    const borderW = Math.round(borderBox.width);
+    const borderH = Math.round(borderBox.height);
+    const contentW = Math.round(contentBox.width);
+    const contentH = Math.round(contentBox.height);
+    const spanW = Math.round(spanBox.width);
+    const spanH = Math.round(spanBox.height);
+
+    const ascii = `Border Box (W:${borderW}, H:${borderH}) |#########################|
+Content Box at (${Math.round(contentX)}, ${Math.round(contentY)}) (W:${contentW}, H:${contentH}) |   +---+   |
+|   |###|   |
+|   +---+   |
+Span Box at (${Math.round(spanX)}, ${Math.round(spanY)}) (W:${spanW}, H:${spanH}) |   [xxx]   |
+Padding: T:${padding.top}, R:${padding.right}, B:${padding.bottom}, L:${padding.left}
+Border: T:${border.top}, R:${border.right}, B:${border.bottom}, L:${border.left}`;
+
+    context.ascii = ascii;
+    return ascii;
+}
+
+export function finalizeDiagnostics() {
+    if (!context) throw new Error("Diagnostics context not initialized");
+
+    const allPass = context.checks.every((c) => c.pass);
+    const computedDiffs = context.checks.map((c) => ({
+        label: c.label,
+        diff: c.diff,
+    }));
+
+    const json = {
+        testId: context.testId,
+        css: context.css,
+        browser: context.browser,
+        geometry: context.geometry,
+        checks: context.checks,
+        computedDiffs,
+        fontDiagnostics: context.fontDiagnostics,
+        ascii: context.ascii,
+        allPass,
+    };
+
+    console.log(`AI_DIAGNOSTIC::${JSON.stringify(json)}`);
+    if (context.ascii) {
+        console.log(`AI_ASCII_RENDER::${context.ascii}`);
+    }
+    if (!allPass) {
+        throw new Error("Tests failed - see AI_DIAGNOSTIC for details");
+    }
+}

package/tests/helpers/render-utils.ts

@@ -0,0 +1,52 @@
+import { prepareHtmlRender } from "../../src/html-to-pdf.js";
+import type { RenderBox, Run } from "../../src/pdf/types.js";
+
+export async function renderRuns(html: string, css = ""): Promise<Run[]> {
+    const wrappedHtml =
+        /<html[\s>]/i.test(html) ? html : `<html><body>${html}</body></html>`;
+
+    const { renderTree } = await prepareHtmlRender({
+        html: wrappedHtml,
+        css,
+        viewportWidth: 794,
+        viewportHeight: 1123,
+        pageWidth: 794,
+        pageHeight: 1123,
+        margins: { top: 96, right: 96, bottom: 96, left: 96 },
+    });
+
+    return collectRuns(renderTree.root);
+}
+
+export async function renderTreeForHtml(html: string, css = "") {
+    const wrappedHtml =
+        /<html[\s>]/i.test(html) ? html : `<html><body>${html}</body></html>`;
+
+    const { renderTree } = await prepareHtmlRender({
+        html: wrappedHtml,
+        css,
+        viewportWidth: 794,
+        viewportHeight: 1123,
+        pageWidth: 794,
+        pageHeight: 1123,
+        margins: { top: 96, right: 96, bottom: 96, left: 96 },
+    });
+
+    return renderTree;
+}
+
+export function collectRuns(box: RenderBox): Run[] {
+    const runs: Run[] = [...(box.textRuns ?? [])];
+    for (const child of box.children) {
+        runs.push(...collectRuns(child));
+    }
+    return runs;
+}
+
+export function collectBoxes(box: RenderBox): RenderBox[] {
+    const boxes: RenderBox[] = [box];
+    for (const child of box.children) {
+        boxes.push(...collectBoxes(child));
+    }
+    return boxes;
+}

package/tests/helpers/text-geometry.ts

@@ -0,0 +1,56 @@
+import type { RenderBox, Run } from "../../src/pdf/types.js";
+
+export interface LineMetrics {
+    lineIndex: number;
+    runs: Run[];
+    xStart: number;
+    xEnd: number;
+}
+
+/**
+ * Group runs by lineIndex and compute xStart/xEnd using lineMatrix.e + advanceWidth.
+ */
+export function computeLineMetrics(box: RenderBox): LineMetrics[] {
+    const runs = collectRuns(box).filter(
+        (run) => typeof run.lineIndex === "number",
+    );
+
+    const byLine = new Map<number, Run[]>();
+
+    for (const run of runs) {
+        const idx = run.lineIndex as number;
+        const list = byLine.get(idx);
+        if (list) list.push(run);
+        else byLine.set(idx, [run]);
+    }
+
+    const lines: LineMetrics[] = [];
+
+    for (const [lineIndex, lineRuns] of byLine.entries()) {
+        lineRuns.sort(
+            (a, b) => (a.lineMatrix?.e ?? 0) - (b.lineMatrix?.e ?? 0),
+        );
+
+        const xStart = Math.min(...lineRuns.map((r) => r.lineMatrix?.e ?? 0));
+        const xEnd = Math.max(
+            ...lineRuns.map((r) => {
+                const x = r.lineMatrix?.e ?? 0;
+                const width = r.advanceWidth ?? 0;
+                return x + width;
+            }),
+        );
+
+        lines.push({ lineIndex, runs: lineRuns, xStart, xEnd });
+    }
+
+    lines.sort((a, b) => a.lineIndex - b.lineIndex);
+    return lines;
+}
+
+function collectRuns(box: RenderBox): Run[] {
+    const runs: Run[] = [...(box.textRuns ?? [])];
+    for (const child of box.children) {
+        runs.push(...collectRuns(child));
+    }
+    return runs;
+}

package/tests/layout/custom-properties.test.ts

@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest';
+import { CustomPropertiesMap, resolveVariableReferences } from '../../src/css/custom-properties.js';
+
+describe('CSS Custom Properties', () => {
+
+    it('should resolve simple variable references', () => {
+        const customProps = new CustomPropertiesMap();
+        customProps.set('--main-color', 'red');
+
+        expect(resolveVariableReferences('var(--main-color)', customProps)).toBe('red');
+        expect(resolveVariableReferences('1px solid var(--main-color)', customProps)).toBe('1px solid red');
+    });
+
+    it('should handle fallback values', () => {
+        const customProps = new CustomPropertiesMap();
+
+        expect(resolveVariableReferences('var(--unknown, blue)', customProps)).toBe('blue');
+        expect(resolveVariableReferences('var(--unknown, 10px)', customProps)).toBe('10px');
+    });
+
+    it('should handle nested variable references', () => {
+        const customProps = new CustomPropertiesMap();
+        customProps.set('--primary', 'blue');
+        customProps.set('--accent', 'var(--primary)');
+
+        expect(resolveVariableReferences('var(--accent)', customProps)).toBe('blue');
+    });
+
+    it('should handle circular references gracefully (depth limit)', () => {
+        const customProps = new CustomPropertiesMap();
+        customProps.set('--a', 'var(--b)');
+        customProps.set('--b', 'var(--a)');
+
+        // Should not crash, but return the unresolved reference eventually
+        const result = resolveVariableReferences('var(--a)', customProps);
+        expect(result).toContain('var(');
+    });
+});