@formepdf/react 0.4.4 → 0.5.0

package/dist/serialize.d.ts

@@ -8,7 +8,7 @@ export declare function serialize(element: ReactElement): FormeDocument;
 export declare function mapStyle(style?: Style): FormeStyle;
 export declare function mapDimension(val: number | string): FormeDimension;
 export declare function parseColor(hex: string): FormeColor;
-export declare function expandEdges(val: number | Edges): FormeEdges;
+export declare function expandEdges(val: number | string | number[] | Edges): FormeEdges;
 export declare function expandCorners(val: number | Corners): FormeCornerValues;
 /**
  * Serialize a React element tree into a Forme template JSON document.

package/dist/serialize.js

@@ -89,6 +89,8 @@ export function serialize(element) {
         metadata.subject = props.subject;
     if (props.creator !== undefined)
         metadata.creator = props.creator;
+    if (props.lang !== undefined)
+        metadata.lang = props.lang;
     // Merge global + document fonts (document fonts override on conflict)
     const mergedFonts = mergeFonts(Font.getRegistered(), props.fonts);
     const result = {
@@ -296,12 +298,17 @@ function serializeImage(element) {
         kind.width = props.width;
     if (props.height !== undefined)
         kind.height = props.height;
-    return {
+    const node = {
         kind,
         style: mapStyle(props.style),
         children: [],
         sourceLocation: extractSourceLocation(element),
     };
+    if (props.href)
+        node.href = props.href;
+    if (props.alt)
+        node.alt = props.alt;
+    return node;
 }
 function serializeTable(element, _parent = null) {
     const props = element.props;
@@ -364,12 +371,17 @@ function serializeSvg(element) {
     };
     if (props.viewBox)
         kind.view_box = props.viewBox;
-    return {
+    const node = {
         kind,
         style: mapStyle(props.style),
         children: [],
         sourceLocation: extractSourceLocation(element),
     };
+    if (props.href)
+        node.href = props.href;
+    if (props.alt)
+        node.alt = props.alt;
+    return node;
 }
 // ─── Children helpers ────────────────────────────────────────────────
 function flattenChildren(children) {
@@ -594,9 +606,40 @@ export function mapStyle(style) {
         result.backgroundColor = parseColor(style.backgroundColor);
     if (style.opacity !== undefined)
         result.opacity = style.opacity;
-    // Border
-    if (style.borderWidth !== undefined || style.borderTopWidth !== undefined || style.borderRightWidth !== undefined || style.borderBottomWidth !== undefined || style.borderLeftWidth !== undefined) {
-        const base = style.borderWidth !== undefined ? expandEdgeValues(style.borderWidth) : { top: 0, right: 0, bottom: 0, left: 0 };
+    // Border — cascade: border < borderTop/Right/Bottom/Left < borderWidth/borderColor < borderTopWidth/borderTopColor
+    // Step 1: Parse string shorthands into intermediate per-side values
+    let shortWidth = { top: undefined, right: undefined, bottom: undefined, left: undefined };
+    let shortColor = { top: undefined, right: undefined, bottom: undefined, left: undefined };
+    if (style.border !== undefined) {
+        const parsed = parseBorderString(style.border);
+        if (parsed.width !== undefined)
+            shortWidth = { top: parsed.width, right: parsed.width, bottom: parsed.width, left: parsed.width };
+        if (parsed.color !== undefined)
+            shortColor = { top: parsed.color, right: parsed.color, bottom: parsed.color, left: parsed.color };
+    }
+    // Per-side string shorthands override all-side shorthand
+    for (const [side, prop] of [['top', 'borderTop'], ['right', 'borderRight'], ['bottom', 'borderBottom'], ['left', 'borderLeft']]) {
+        const val = style[prop];
+        if (val === undefined)
+            continue;
+        if (typeof val === 'number') {
+            shortWidth[side] = val;
+        }
+        else {
+            const parsed = parseBorderString(val);
+            if (parsed.width !== undefined)
+                shortWidth[side] = parsed.width;
+            if (parsed.color !== undefined)
+                shortColor[side] = parsed.color;
+        }
+    }
+    // Step 2: Build borderWidth — existing borderWidth/borderTopWidth override shorthands
+    const hasBorderWidth = style.borderWidth !== undefined || style.borderTopWidth !== undefined || style.borderRightWidth !== undefined || style.borderBottomWidth !== undefined || style.borderLeftWidth !== undefined;
+    const hasShortWidth = shortWidth.top !== undefined || shortWidth.right !== undefined || shortWidth.bottom !== undefined || shortWidth.left !== undefined;
+    if (hasBorderWidth || hasShortWidth) {
+        const base = style.borderWidth !== undefined
+            ? expandEdgeValues(style.borderWidth)
+            : { top: shortWidth.top ?? 0, right: shortWidth.right ?? 0, bottom: shortWidth.bottom ?? 0, left: shortWidth.left ?? 0 };
         result.borderWidth = {
             top: style.borderTopWidth ?? base.top,
             right: style.borderRightWidth ?? base.right,
@@ -604,14 +647,22 @@ export function mapStyle(style) {
             left: style.borderLeftWidth ?? base.left,
         };
     }
-    if (style.borderColor !== undefined || style.borderTopColor !== undefined || style.borderRightColor !== undefined || style.borderBottomColor !== undefined || style.borderLeftColor !== undefined) {
+    // Step 3: Build borderColor — existing borderColor/borderTopColor override shorthands
+    const hasBorderColor = style.borderColor !== undefined || style.borderTopColor !== undefined || style.borderRightColor !== undefined || style.borderBottomColor !== undefined || style.borderLeftColor !== undefined;
+    const hasShortColor = shortColor.top !== undefined || shortColor.right !== undefined || shortColor.bottom !== undefined || shortColor.left !== undefined;
+    if (hasBorderColor || hasShortColor) {
         const defaultColor = parseColor('#000000');
-        let base = { top: defaultColor, right: defaultColor, bottom: defaultColor, left: defaultColor };
+        let base = {
+            top: shortColor.top ?? defaultColor,
+            right: shortColor.right ?? defaultColor,
+            bottom: shortColor.bottom ?? defaultColor,
+            left: shortColor.left ?? defaultColor,
+        };
         if (typeof style.borderColor === 'string') {
             const c = parseColor(style.borderColor);
             base = { top: c, right: c, bottom: c, left: c };
         }
-        else if (style.borderColor) {
+        else if (style.borderColor && typeof style.borderColor === 'object') {
             base = {
                 top: parseColor(style.borderColor.top),
                 right: parseColor(style.borderColor.right),
@@ -699,10 +750,54 @@ export function parseColor(hex) {
     // Fallback: black
     return { r: 0, g: 0, b: 0, a: 1 };
 }
+/**
+ * Parse a CSS-style 1-4 value edge shorthand.
+ * Accepts: `"8"`, `"8 16"`, `"8 16 24"`, `"8 16 24 32"` (with optional `px` suffix).
+ * Also accepts number arrays: `[8]`, `[8, 16]`, `[8, 16, 24]`, `[8, 16, 24, 32]`.
+ */
+function parseCSSEdges(val) {
+    const values = Array.isArray(val)
+        ? val
+        : val.trim().split(/\s+/).map(s => parseFloat(s.replace(/px$/i, '')));
+    switch (values.length) {
+        case 1: return { top: values[0], right: values[0], bottom: values[0], left: values[0] };
+        case 2: return { top: values[0], right: values[1], bottom: values[0], left: values[1] };
+        case 3: return { top: values[0], right: values[1], bottom: values[2], left: values[1] };
+        default: return { top: values[0], right: values[1], bottom: values[2], left: values[3] };
+    }
+}
+const BORDER_STYLE_KEYWORDS = new Set([
+    'solid', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'inset', 'outset', 'none', 'hidden',
+]);
+/**
+ * Parse a CSS border shorthand string like `"1px solid #000"`.
+ * Returns extracted width and/or color. Style keywords are recognized but ignored.
+ */
+function parseBorderString(val) {
+    const tokens = val.trim().split(/\s+/);
+    let width;
+    let color;
+    for (const token of tokens) {
+        const lower = token.toLowerCase();
+        if (BORDER_STYLE_KEYWORDS.has(lower))
+            continue;
+        const num = parseFloat(lower.replace(/px$/i, ''));
+        if (!isNaN(num) && /^[\d.]/.test(lower)) {
+            width = num;
+        }
+        else {
+            color = parseColor(token);
+        }
+    }
+    return { width, color };
+}
 export function expandEdges(val) {
     if (typeof val === 'number') {
         return { top: val, right: val, bottom: val, left: val };
     }
+    if (typeof val === 'string' || Array.isArray(val)) {
+        return parseCSSEdges(val);
+    }
     return { top: val.top, right: val.right, bottom: val.bottom, left: val.left };
 }
 function expandEdgeValues(val) {
@@ -809,6 +904,8 @@ export function serializeTemplate(element) {
         metadata.subject = processTemplateValue(props.subject);
     if (props.creator !== undefined)
         metadata.creator = processTemplateValue(props.creator);
+    if (props.lang !== undefined)
+        metadata.lang = processTemplateValue(props.lang);
     const mergedFonts = mergeFonts(Font.getRegistered(), props.fonts);
     const result = {
         children,

package/dist/types.d.ts

@@ -42,14 +42,14 @@ export interface Style {
     gap?: number;
     rowGap?: number;
     columnGap?: number;
-    padding?: number | Edges;
+    padding?: number | string | number[] | Edges;
     paddingTop?: number;
     paddingRight?: number;
     paddingBottom?: number;
     paddingLeft?: number;
     paddingHorizontal?: number;
     paddingVertical?: number;
-    margin?: number | Edges;
+    margin?: number | string | number[] | Edges;
     marginTop?: number;
     marginRight?: number;
     marginBottom?: number;
@@ -83,6 +83,16 @@ export interface Style {
     borderTopRightRadius?: number;
     borderBottomRightRadius?: number;
     borderBottomLeftRadius?: number;
+    /** CSS border shorthand, e.g. `"1px solid #000"` */
+    border?: string;
+    /** Per-side border shorthand: string parses as CSS, number sets width */
+    borderTop?: string | number;
+    /** Per-side border shorthand: string parses as CSS, number sets width */
+    borderRight?: string | number;
+    /** Per-side border shorthand: string parses as CSS, number sets width */
+    borderBottom?: string | number;
+    /** Per-side border shorthand: string parses as CSS, number sets width */
+    borderLeft?: string | number;
     position?: 'relative' | 'absolute';
     top?: number;
     right?: number;
@@ -98,6 +108,8 @@ export interface DocumentProps {
     author?: string;
     subject?: string;
     creator?: string;
+    /** Document language (BCP 47 tag, e.g. "en-US"). Emitted as /Lang in the PDF Catalog. */
+    lang?: string;
     fonts?: FontRegistration[];
     children?: ReactNode;
 }
@@ -106,7 +118,7 @@ export interface PageProps {
         width: number;
         height: number;
     };
-    margin?: number | Edges;
+    margin?: number | string | number[] | Edges;
     children?: ReactNode;
 }
 export interface ViewProps {
@@ -127,6 +139,10 @@ export interface ImageProps {
     width?: number;
     height?: number;
     style?: Style;
+    /** Optional hyperlink URL — makes the image clickable. */
+    href?: string;
+    /** Alt text for accessibility. */
+    alt?: string;
 }
 export interface ColumnDef {
     width: {
@@ -163,6 +179,10 @@ export interface SvgProps {
     viewBox?: string;
     content: string;
     style?: Style;
+    /** Optional hyperlink URL — makes the SVG clickable. */
+    href?: string;
+    /** Alt text for accessibility. */
+    alt?: string;
 }
 /** A styled text segment within a <Text> element */
 export interface TextRun {
@@ -187,6 +207,7 @@ export interface FormeMetadata {
     author?: string;
     subject?: string;
     creator?: string;
+    lang?: string;
 }
 export interface FormePageConfig {
     size: FormePageSize;
@@ -211,6 +232,7 @@ export interface FormeNode {
     children: FormeNode[];
     bookmark?: string;
     href?: string;
+    alt?: string;
     sourceLocation?: {
         file: string;
         line: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formepdf/react",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "description": "JSX-to-JSON serializer for Forme PDF engine",
   "type": "module",
   "main": "./dist/index.js",