pagyra-js 0.0.20 → 0.0.21

package/dist/src/pdf/renderer/page-paint.js

@@ -25,9 +25,17 @@ export async function paintLayoutPage({ pageTree, pageNumber, totalPages, pageSi
     if (headerFooterLayout.layerMode === LayerMode.Under) {
         await paintHeaderFooter(painter, headerVariant, footerVariant, tokens, pageNumber, totalPages, headerFooterTextOptions, true, hfContext);
     }
-    // Paint each box as an atomic unit in the resolved paint order.
-    for (const box of pageTree.paintOrder) {
-        await paintBoxAtomic(painter, box);
+    // Paint each instruction in the resolved paint order.
+    for (const instruction of pageTree.paintOrder) {
+        if (instruction.type === 'beginOpacity') {
+            painter.beginOpacityScope(instruction.opacity);
+        }
+        else if (instruction.type === 'endOpacity') {
+            painter.endOpacityScope(0);
+        }
+        else {
+            await paintBoxAtomic(painter, instruction.box);
+        }
     }
     if (headerFooterLayout.layerMode === LayerMode.Over) {
         await paintHeaderFooter(painter, headerVariant, footerVariant, tokens, pageNumber, totalPages, headerFooterTextOptions, false, hfContext);

package/dist/src/pdf/renderers/radius-utils.js

@@ -15,45 +15,38 @@ export function normalizeRadiiForRect(width, height, radii) {
     };
     const safeWidth = Math.max(width, 0);
     const safeHeight = Math.max(height, 0);
-    if (safeWidth <= 0) {
-        result.topLeft.x = 0;
-        result.topRight.x = 0;
-        result.bottomRight.x = 0;
-        result.bottomLeft.x = 0;
+    if (safeWidth <= 0 || safeHeight <= 0) {
+        return {
+            topLeft: { x: 0, y: 0 },
+            topRight: { x: 0, y: 0 },
+            bottomRight: { x: 0, y: 0 },
+            bottomLeft: { x: 0, y: 0 },
+        };
     }
-    else {
-        const topSum = result.topLeft.x + result.topRight.x;
-        if (topSum > safeWidth && topSum > 0) {
-            const scale = safeWidth / topSum;
-            result.topLeft.x *= scale;
-            result.topRight.x *= scale;
-        }
-        const bottomSum = result.bottomLeft.x + result.bottomRight.x;
-        if (bottomSum > safeWidth && bottomSum > 0) {
-            const scale = safeWidth / bottomSum;
-            result.bottomLeft.x *= scale;
-            result.bottomRight.x *= scale;
-        }
-    }
-    if (safeHeight <= 0) {
-        result.topLeft.y = 0;
-        result.topRight.y = 0;
-        result.bottomRight.y = 0;
-        result.bottomLeft.y = 0;
-    }
-    else {
-        const leftSum = result.topLeft.y + result.bottomLeft.y;
-        if (leftSum > safeHeight && leftSum > 0) {
-            const scale = safeHeight / leftSum;
-            result.topLeft.y *= scale;
-            result.bottomLeft.y *= scale;
-        }
-        const rightSum = result.topRight.y + result.bottomRight.y;
-        if (rightSum > safeHeight && rightSum > 0) {
-            const scale = safeHeight / rightSum;
-            result.topRight.y *= scale;
-            result.bottomRight.y *= scale;
-        }
+    // CSS Backgrounds § 5.5: compute a single scale factor f = min(Li/Si)
+    // across all four sides, then multiply ALL radii by f if f < 1.
+    let f = 1;
+    const topSumX = result.topLeft.x + result.topRight.x;
+    if (topSumX > 0)
+        f = Math.min(f, safeWidth / topSumX);
+    const bottomSumX = result.bottomLeft.x + result.bottomRight.x;
+    if (bottomSumX > 0)
+        f = Math.min(f, safeWidth / bottomSumX);
+    const leftSumY = result.topLeft.y + result.bottomLeft.y;
+    if (leftSumY > 0)
+        f = Math.min(f, safeHeight / leftSumY);
+    const rightSumY = result.topRight.y + result.bottomRight.y;
+    if (rightSumY > 0)
+        f = Math.min(f, safeHeight / rightSumY);
+    if (f < 1) {
+        result.topLeft.x *= f;
+        result.topLeft.y *= f;
+        result.topRight.x *= f;
+        result.topRight.y *= f;
+        result.bottomRight.x *= f;
+        result.bottomRight.y *= f;
+        result.bottomLeft.x *= f;
+        result.bottomLeft.y *= f;
     }
     return result;
 }

package/dist/src/pdf/renderers/shape-renderer.js

@@ -431,7 +431,7 @@ export class ShapeRenderer {
             const scaleY = this.coordinateTransformer.convertPxToPt(1);
             const translateX = this.coordinateTransformer.convertPxToPt(relX);
             const translateY = this.coordinateTransformer.convertPxToPt(-relY); // Negative because PDF y-axis is flipped
-            return `${formatNumber(scaleX)} 0 0 ${formatNumber(scaleY)} ${formatNumber(translateX)} ${formatNumber(translateY)} cm`;
+            return `${formatNumber(scaleX)} 0 0 ${formatNumber(-scaleY)} ${formatNumber(translateX)} ${formatNumber(translateY)} cm`;
         }
         // Normal absolute positioning
         const scaleX = this.coordinateTransformer.convertPxToPt(1);

package/dist/src/pdf/renderers/shape-utils.js

@@ -133,7 +133,7 @@ export function transformForRect(rect, coordinateTransformer, transformContext)
         const scaleY = coordinateTransformer.convertPxToPt(1);
         const translateX = coordinateTransformer.convertPxToPt(relX);
         const translateY = coordinateTransformer.convertPxToPt(-relY); // Negative because PDF y-axis is flipped
-        return `${formatNumber(scaleX)} 0 0 ${formatNumber(scaleY)} ${formatNumber(translateX)} ${formatNumber(translateY)} cm`;
+        return `${formatNumber(scaleX)} 0 0 ${formatNumber(-scaleY)} ${formatNumber(translateX)} ${formatNumber(translateY)} cm`;
     }
     // Normal absolute positioning
     const scaleX = coordinateTransformer.convertPxToPt(1);

package/dist/src/pdf/renderers/text-renderer.d.ts

@@ -1,4 +1,4 @@
-import type { Run, TextPaintOptions } from "../types.js";
+import type { Run, TextPaintOptions, Rect } from "../types.js";
 import type { FontRegistry } from "../font/font-registry.js";
 import type { PdfObjectRef } from "../primitives/pdf-document.js";
 import { CoordinateTransformer } from "../utils/coordinate-transformer.js";
@@ -21,6 +21,7 @@ export declare class TextRenderer {
     private readonly fontResolver;
     private readonly gradientService;
     private readonly patterns;
+    private transformContext;
     constructor(coordinateTransformer: CoordinateTransformer, fontRegistry: FontRegistry, imageRenderer?: ImageRenderer, graphicsStateManager?: GraphicsStateManager);
     drawText(text: string, xPx: number, yPx: number, options?: TextPaintOptions): Promise<void>;
     drawTextRun(run: Run): Promise<void>;
@@ -29,5 +30,12 @@ export declare class TextRenderer {
     private registerSubsetFont;
     private fillGradientRect;
     private fillPatternRect;
+    /**
+     * Drain (return and clear) all buffered commands so they can be pushed
+     * into the unified shape command stream, preserving paint order.
+     */
+    flushCommands(): string[];
+    setTransformContext(rect: Rect): void;
+    clearTransformContext(): void;
     getResult(): TextRendererResult;
 }

package/dist/src/pdf/renderers/text-renderer.js

@@ -19,6 +19,7 @@ export class TextRenderer {
         this.commands = [];
         this.fonts = new Map();
         this.patterns = new Map();
+        this.transformContext = null;
         this.graphicsStateManager = graphicsStateManager;
         this.fontResolver = new TextFontResolver(fontRegistry);
         this.shadowRenderer = new TextShadowRenderer(coordinateTransformer, fontRegistry, imageRenderer, graphicsStateManager);
@@ -87,7 +88,7 @@ export class TextRenderer {
             text: run.text.slice(0, 64),
             glyphCount: glyphRun.glyphIds.length,
         });
-        const textMatrix = buildPdfTextMatrix(run, this.coordinateTransformer);
+        const textMatrix = buildPdfTextMatrix(run, this.coordinateTransformer, this.transformContext);
         log("paint", "debug", "drawing text run with glyphs", {
             text: run.text.slice(0, 32),
             glyphIds: glyphRun.glyphIds.slice(0, 10),
@@ -198,6 +199,20 @@ export class TextRenderer {
             "f",
         ];
     }
+    /**
+     * Drain (return and clear) all buffered commands so they can be pushed
+     * into the unified shape command stream, preserving paint order.
+     */
+    flushCommands() {
+        const cmds = this.commands.splice(0, this.commands.length);
+        return cmds;
+    }
+    setTransformContext(rect) {
+        this.transformContext = rect;
+    }
+    clearTransformContext() {
+        this.transformContext = null;
+    }
     getResult() {
         return {
             commands: [...this.commands],
@@ -207,7 +222,7 @@ export class TextRenderer {
         };
     }
 }
-function buildPdfTextMatrix(run, transformer) {
+function buildPdfTextMatrix(run, transformer, transformContext = null) {
     const base = run.lineMatrix ?? { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 };
     if (!run.lineMatrix) {
         log("paint", "debug", "Run provided without lineMatrix, using identity fallback", {
@@ -215,6 +230,25 @@ function buildPdfTextMatrix(run, transformer) {
             fontFamily: run.fontFamily,
         });
     }
+    if (transformContext) {
+        const relMatrix = {
+            a: base.a,
+            b: base.b,
+            c: base.c,
+            d: base.d,
+            e: base.e - transformContext.x,
+            f: base.f - transformContext.y,
+        };
+        const pdfPx = svgMatrixToPdf(relMatrix) ?? { a: 1, b: 0, c: 0, d: 1, e: relMatrix.e, f: relMatrix.f };
+        return {
+            a: pdfPx.a,
+            b: pdfPx.b,
+            c: pdfPx.c,
+            d: pdfPx.d,
+            e: transformer.convertPxToPt(pdfPx.e),
+            f: transformer.convertPxToPt(pdfPx.f),
+        };
+    }
     const offsetPx = transformer.pageOffsetPx;
     // Normalize to page origin (top-left), removing any page offset.
     const local = {

package/dist/src/pdf/stacking/build-stacking-contexts.js

@@ -7,8 +7,7 @@ export function getStackingFlags(box) {
     const raw = box.zIndexComputed;
     const hasNumericZ = typeof raw === "number" && Number.isFinite(raw);
     const zIndex = hasNumericZ ? raw : "auto";
-    // For now, we only treat positioned+numeric z-index as establishing context.
-    const establishesContext = isPositioned && hasNumericZ;
+    const establishesContext = box.establishesStackingContext || (isPositioned && hasNumericZ);
     return { isPositioned, zIndex, establishesContext };
 }
 /**

package/dist/src/pdf/stacking/resolve-paint-order.d.ts

@@ -1,11 +1,10 @@
 import type { RenderBox } from "../types.js";
+import type { PaintInstruction } from "./types.js";
 /**
  * Resolve a global paint order from the RenderBox tree using stacking contexts.
  *
- * Scope (step 1):
- * - Support numeric z-index on positioned elements (absolute/fixed/etc.) vs auto.
- * - Respect DOM order for ties.
- * - Treat each box as an atomic paint unit (background+border+content together).
- * - Keep API simple: return ordered RenderBox list.
+ * Returns an ordered list of PaintInstructions that includes opacity scope
+ * markers (beginOpacity/endOpacity) around stacking contexts whose root box
+ * has effective opacity < 1 (from CSS opacity or filter: opacity()).
  */
-export declare function resolvePaintOrder(root: RenderBox): RenderBox[];
+export declare function resolvePaintOrder(root: RenderBox): PaintInstruction[];

package/dist/src/pdf/stacking/resolve-paint-order.js

@@ -2,20 +2,32 @@ import { buildStackingContexts, getStackingFlags } from "./build-stacking-contex
 /**
  * Resolve a global paint order from the RenderBox tree using stacking contexts.
  *
- * Scope (step 1):
- * - Support numeric z-index on positioned elements (absolute/fixed/etc.) vs auto.
- * - Respect DOM order for ties.
- * - Treat each box as an atomic paint unit (background+border+content together).
- * - Keep API simple: return ordered RenderBox list.
+ * Returns an ordered list of PaintInstructions that includes opacity scope
+ * markers (beginOpacity/endOpacity) around stacking contexts whose root box
+ * has effective opacity < 1 (from CSS opacity or filter: opacity()).
  */
 export function resolvePaintOrder(root) {
     const { rootContextId, contexts } = buildStackingContexts(root);
     const steps = [];
     resolveContextPaintOrder(rootContextId, contexts, steps);
-    return steps.map((s) => s.box);
+    return steps;
 }
 /**
- * Compute paint order within a stacking context and append PaintSteps.
+ * Compute effective opacity for a box, combining CSS opacity and filter opacity().
+ */
+function computeEffectiveOpacity(box) {
+    let opacity = box.opacity;
+    if (box.filter) {
+        for (const fn of box.filter) {
+            if (fn.kind === 'opacity') {
+                opacity *= fn.value;
+            }
+        }
+    }
+    return Math.max(0, Math.min(1, opacity));
+}
+/**
+ * Compute paint order within a stacking context and append PaintInstructions.
  *
  * Simplified rules (sufficient for our current constraints):
  * For a given context:
@@ -33,7 +45,7 @@ function resolveContextPaintOrder(contextId, contexts, out) {
         return;
     const rootBox = context.box;
     // 1. Paint the context root box as an atomic unit.
-    out.push({ box: rootBox });
+    out.push({ type: 'box', box: rootBox });
     // Collect direct descendants belonging to this context (non-root boxes).
     const descendants = [];
     collectDescendantsInContext(rootBox, contextId, contexts, descendants);
@@ -86,14 +98,22 @@ function resolveContextPaintOrder(contextId, contexts, out) {
 /**
  * Append either a nested stacking context or a regular box.
  * Nested contexts are treated as atomic units: we delegate to resolveContextPaintOrder.
+ * When a nested context root has effective opacity < 1, wrap with begin/endOpacity markers.
  */
 function appendBoxOrContext(box, parentContextId, contexts, out) {
     const nested = findContextByBox(box, parentContextId, contexts);
     if (nested) {
+        const effectiveOpacity = computeEffectiveOpacity(nested.box);
+        if (effectiveOpacity < 1) {
+            out.push({ type: 'beginOpacity', opacity: effectiveOpacity });
+        }
         resolveContextPaintOrder(nested.id, contexts, out);
+        if (effectiveOpacity < 1) {
+            out.push({ type: 'endOpacity' });
+        }
     }
     else {
-        out.push({ box });
+        out.push({ type: 'box', box });
     }
 }
 /**

package/dist/src/pdf/stacking/types.d.ts

@@ -34,3 +34,17 @@ export interface StackingFlags {
 export interface PaintStep {
     box: RenderBox;
 }
+/**
+ * A paint instruction in the resolved paint order.
+ * - `box`: paint a single RenderBox atomically.
+ * - `beginOpacity` / `endOpacity`: wrap a stacking context group in an opacity scope.
+ */
+export type PaintInstruction = {
+    type: 'box';
+    box: RenderBox;
+} | {
+    type: 'beginOpacity';
+    opacity: number;
+} | {
+    type: 'endOpacity';
+};

package/dist/src/pdf/svg/shape-renderer.js

@@ -309,10 +309,24 @@ function svgLinearNodeToLinearGradient(node, context) {
     const stops = (node.stops ?? []).map((s) => ({ color: s.color, position: s.offset }));
     // Default: objectBoundingBox coordinates (ratio 0..1)
     const units = node.gradientUnits === "userSpaceOnUse" ? "userSpace" : "ratio";
+    const rawTransform = (node.attributes && (node.attributes["gradientTransform"] ?? node.attributes["gradienttransform"]));
+    const transform = rawTransform ? parseTransform(rawTransform) || undefined : undefined;
     // If userSpaceOnUse, map points to page pixels using the SVG render context
     if (units === "userSpace" && context) {
-        const p1 = mapSvgPoint(x1, y1, context);
-        const p2 = mapSvgPoint(x2, y2, context);
+        let ux1 = x1;
+        let uy1 = y1;
+        let ux2 = x2;
+        let uy2 = y2;
+        if (transform) {
+            const tp1 = applyMatrixToPoint(transform, ux1, uy1);
+            const tp2 = applyMatrixToPoint(transform, ux2, uy2);
+            ux1 = tp1.x;
+            uy1 = tp1.y;
+            ux2 = tp2.x;
+            uy2 = tp2.y;
+        }
+        const p1 = mapSvgPoint(ux1, uy1, context);
+        const p2 = mapSvgPoint(ux2, uy2, context);
         if (p1 && p2) {
             // coords in absolute page pixels; gradient-service will convert to rectangle-local points
             return { type: "linear", direction: "to right", stops, coords: { x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y, units: "userSpace" } };
@@ -323,13 +337,9 @@ function svgLinearNodeToLinearGradient(node, context) {
     // Apply gradientTransform if present — treat it as operating in gradient coordinate space
     let rp1 = { x: x1, y: y1 };
     let rp2 = { x: x2, y: y2 };
-    const rawTransform = (node.attributes && (node.attributes["gradientTransform"] ?? node.attributes["gradienttransform"]));
-    if (rawTransform) {
-        const t = parseTransform(rawTransform) || undefined;
-        if (t) {
-            rp1 = applyMatrixToPoint(t, rp1.x, rp1.y);
-            rp2 = applyMatrixToPoint(t, rp2.x, rp2.y);
-        }
+    if (transform) {
+        rp1 = applyMatrixToPoint(transform, rp1.x, rp1.y);
+        rp2 = applyMatrixToPoint(transform, rp2.x, rp2.y);
     }
     // compute direction angle from ratio coords (useful when no explicit coords provided)
     const dx = rp2.x - rp1.x;
@@ -346,12 +356,33 @@ function svgRadialNodeToRadialGradient(node, context) {
     const fy = node.fy;
     const stops = (node.stops ?? []).map((s) => ({ color: s.color, position: s.offset }));
     const units = node.gradientUnits === "userSpaceOnUse" ? "userSpace" : "ratio";
+    const rawTransform = (node.attributes && (node.attributes["gradientTransform"] ?? node.attributes["gradienttransform"]));
+    const transform = rawTransform ? parseTransform(rawTransform) || undefined : undefined;
     if (units === "userSpace" && context) {
-        const center = mapSvgPoint(cx, cy, context);
-        const focal = fx !== undefined && fy !== undefined ? mapSvgPoint(fx, fy, context) : undefined;
+        let ucx = cx;
+        let ucy = cy;
+        let ufx = fx;
+        let ufy = fy;
+        let edgeX = cx + r;
+        let edgeY = cy;
+        if (transform) {
+            const tc = applyMatrixToPoint(transform, ucx, ucy);
+            ucx = tc.x;
+            ucy = tc.y;
+            const te = applyMatrixToPoint(transform, edgeX, edgeY);
+            edgeX = te.x;
+            edgeY = te.y;
+            if (ufx !== undefined && ufy !== undefined) {
+                const tf = applyMatrixToPoint(transform, ufx, ufy);
+                ufx = tf.x;
+                ufy = tf.y;
+            }
+        }
+        const center = mapSvgPoint(ucx, ucy, context);
+        const focal = ufx !== undefined && ufy !== undefined ? mapSvgPoint(ufx, ufy, context) : undefined;
         const radiusPt = (() => {
             // map a point at cx + r, cy to user space and compute distance
-            const edge = mapSvgPoint(cx + r, cy, context);
+            const edge = mapSvgPoint(edgeX, edgeY, context);
             if (center && edge) {
                 const dx = edge.x - center.x;
                 const dy = edge.y - center.y;
@@ -392,14 +423,10 @@ function svgRadialNodeToRadialGradient(node, context) {
         radRatio.fx = fx;
         radRatio.fy = fy;
     }
-    const rawTransform = (node.attributes && (node.attributes["gradientTransform"] ?? node.attributes["gradienttransform"]));
-    if (rawTransform) {
-        const t = parseTransform(rawTransform) || undefined;
-        if (t) {
-            // Preserve the parsed transform matrix on the RadialGradient for use by the
-            // gradient service when building the PDF shading dictionary.
-            radRatio.transform = { a: t.a, b: t.b, c: t.c, d: t.d, e: t.e, f: t.f };
-        }
+    if (transform) {
+        // Preserve the parsed transform matrix on the RadialGradient for use by the
+        // gradient service when building the PDF shading dictionary.
+        radRatio.transform = { a: transform.a, b: transform.b, c: transform.c, d: transform.d, e: transform.e, f: transform.f };
     }
     return radRatio;
 }

package/dist/src/pdf/types.d.ts

@@ -1,5 +1,7 @@
 import type { BackgroundRepeat, Gradient } from "../css/background-types.js";
 import type { GlyphRun } from "../layout/text-run.js";
+import type { FilterFunction } from "../css/properties/visual.js";
+import type { PaintInstruction } from "./stacking/types.js";
 export declare enum NodeKind {
     Container = "container",
     TextRuns = "text-runs",
@@ -198,7 +200,7 @@ export interface Positioning {
     type: "normal" | "float" | "absolute" | "fixed" | "sticky";
 }
 export interface LayoutPageTree {
-    paintOrder: RenderBox[];
+    paintOrder: PaintInstruction[];
     floatLayerOrder: RenderBox[];
     flowContentOrder: RenderBox[];
     positionedLayersSortedByZ: PositionedLayer[];
@@ -255,6 +257,10 @@ export interface RenderBox {
     borderStyle?: BorderStyles;
     color?: RGBA;
     transform?: TextMatrix;
+    /** Parsed CSS filter functions carried from ComputedStyle */
+    filter?: FilterFunction[];
+    /** Parsed CSS backdrop-filter functions carried from ComputedStyle */
+    backdropFilter?: FilterFunction[];
     /**
      * Normalized text alignment of this box (from CSS text-align).
      * Only the visual modes are captured here.

package/dist/src/pdf/utils/border-radius-utils.js

@@ -35,45 +35,38 @@ export function normalizeBorderRadius(input, width, height) {
     };
     const safeWidth = Math.max(width, 0);
     const safeHeight = Math.max(height, 0);
-    if (safeWidth <= 0) {
-        result.topLeft.x = 0;
-        result.topRight.x = 0;
-        result.bottomRight.x = 0;
-        result.bottomLeft.x = 0;
+    if (safeWidth <= 0 || safeHeight <= 0) {
+        return {
+            topLeft: { x: 0, y: 0 },
+            topRight: { x: 0, y: 0 },
+            bottomRight: { x: 0, y: 0 },
+            bottomLeft: { x: 0, y: 0 },
+        };
     }
-    else {
-        const topSum = result.topLeft.x + result.topRight.x;
-        if (topSum > safeWidth && topSum > 0) {
-            const scale = safeWidth / topSum;
-            result.topLeft.x *= scale;
-            result.topRight.x *= scale;
-        }
-        const bottomSum = result.bottomLeft.x + result.bottomRight.x;
-        if (bottomSum > safeWidth && bottomSum > 0) {
-            const scale = safeWidth / bottomSum;
-            result.bottomLeft.x *= scale;
-            result.bottomRight.x *= scale;
-        }
-    }
-    if (safeHeight <= 0) {
-        result.topLeft.y = 0;
-        result.topRight.y = 0;
-        result.bottomRight.y = 0;
-        result.bottomLeft.y = 0;
-    }
-    else {
-        const leftSum = result.topLeft.y + result.bottomLeft.y;
-        if (leftSum > safeHeight && leftSum > 0) {
-            const scale = safeHeight / leftSum;
-            result.topLeft.y *= scale;
-            result.bottomLeft.y *= scale;
-        }
-        const rightSum = result.topRight.y + result.bottomRight.y;
-        if (rightSum > safeHeight && rightSum > 0) {
-            const scale = safeHeight / rightSum;
-            result.topRight.y *= scale;
-            result.bottomRight.y *= scale;
-        }
+    // CSS Backgrounds § 5.5: compute a single scale factor f = min(Li/Si)
+    // across all four sides, then multiply ALL radii by f if f < 1.
+    let f = 1;
+    const topSumX = result.topLeft.x + result.topRight.x;
+    if (topSumX > 0)
+        f = Math.min(f, safeWidth / topSumX);
+    const bottomSumX = result.bottomLeft.x + result.bottomRight.x;
+    if (bottomSumX > 0)
+        f = Math.min(f, safeWidth / bottomSumX);
+    const leftSumY = result.topLeft.y + result.bottomLeft.y;
+    if (leftSumY > 0)
+        f = Math.min(f, safeHeight / leftSumY);
+    const rightSumY = result.topRight.y + result.bottomRight.y;
+    if (rightSumY > 0)
+        f = Math.min(f, safeHeight / rightSumY);
+    if (f < 1) {
+        result.topLeft.x *= f;
+        result.topLeft.y *= f;
+        result.topRight.x *= f;
+        result.topRight.y *= f;
+        result.bottomRight.x *= f;
+        result.bottomRight.y *= f;
+        result.bottomLeft.x *= f;
+        result.bottomLeft.y *= f;
     }
     return result;
 }

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;