@formepdf/react 0.1.0

package/dist/serialize.js

@@ -0,0 +1,715 @@
+import { isValidElement, Children, Fragment } from 'react';
+import { Document, Page, View, Text, Image, Table, Row, Cell, Fixed, Svg, PageBreak } from './components.js';
+const VALID_PARENTS = {
+    Page: {
+        allowed: ['Document'],
+        suggestion: '<Page> must be a direct child of <Document>.',
+    },
+    Row: {
+        allowed: ['Table'],
+        suggestion: '<Row> must be inside a <Table>. Wrap it: <Table><Row>...</Row></Table>',
+    },
+    Cell: {
+        allowed: ['Row'],
+        suggestion: '<Cell> must be inside a <Row>. Wrap it: <Row><Cell>...</Cell></Row>',
+    },
+};
+function validateNesting(componentName, parent) {
+    const rule = VALID_PARENTS[componentName];
+    if (!rule)
+        return;
+    if (parent !== null && !rule.allowed.includes(parent)) {
+        throw new Error(`Invalid nesting: <${componentName}> found inside <${parent}>. ${rule.suggestion}`);
+    }
+}
+// ─── Source location extraction ─────────────────────────────────────
+function extractSourceLocation(element) {
+    // Check globalThis.__formeSourceMap (populated by CLI dev server's JSX shim for React 19+)
+    const map = globalThis.__formeSourceMap;
+    if (map) {
+        const source = map.get(element);
+        if (source)
+            return source;
+    }
+    // Fallback to _source for React 18 and earlier
+    const s = element._source;
+    if (s && s.fileName) {
+        return { file: s.fileName, line: s.lineNumber, column: s.columnNumber };
+    }
+    return undefined;
+}
+// ─── Public API ──────────────────────────────────────────────────────
+/**
+ * Serialize a React element tree into a Forme JSON document object.
+ * The top-level element must be a <Document>.
+ */
+export function serialize(element) {
+    if (element.type !== Document) {
+        throw new Error('Top-level element must be <Document>');
+    }
+    const props = element.props;
+    const childElements = flattenChildren(props.children);
+    // Separate Page children from content children
+    const pageNodes = [];
+    const contentNodes = [];
+    for (const child of childElements) {
+        if (isValidElement(child) && child.type === Page) {
+            pageNodes.push(serializePage(child));
+        }
+        else {
+            const node = serializeChild(child, 'Document');
+            if (node)
+                contentNodes.push(node);
+        }
+    }
+    // If there are page nodes, use them. Otherwise wrap content in a default page.
+    let children;
+    if (pageNodes.length > 0) {
+        // Any loose content nodes get added to the last page's children
+        if (contentNodes.length > 0) {
+            const lastPage = pageNodes[pageNodes.length - 1];
+            lastPage.children.push(...contentNodes);
+        }
+        children = pageNodes;
+    }
+    else if (contentNodes.length > 0) {
+        children = contentNodes;
+    }
+    else {
+        children = [];
+    }
+    const metadata = {};
+    if (props.title !== undefined)
+        metadata.title = props.title;
+    if (props.author !== undefined)
+        metadata.author = props.author;
+    if (props.subject !== undefined)
+        metadata.subject = props.subject;
+    if (props.creator !== undefined)
+        metadata.creator = props.creator;
+    return {
+        children,
+        metadata,
+        defaultPage: {
+            size: 'A4',
+            margin: { top: 54, right: 54, bottom: 54, left: 54 },
+            wrap: true,
+        },
+    };
+}
+// ─── Page serialization ──────────────────────────────────────────────
+function serializePage(element) {
+    const props = element.props;
+    let size = 'A4';
+    if (props.size !== undefined) {
+        if (typeof props.size === 'string') {
+            size = props.size;
+        }
+        else {
+            size = { Custom: { width: props.size.width, height: props.size.height } };
+        }
+    }
+    let margin = { top: 54, right: 54, bottom: 54, left: 54 };
+    if (props.margin !== undefined) {
+        margin = expandEdges(props.margin);
+    }
+    const config = { size, margin, wrap: true };
+    const childElements = flattenChildren(props.children);
+    const children = serializeChildren(childElements, 'Page');
+    return {
+        kind: { type: 'Page', config },
+        style: {},
+        children,
+        sourceLocation: extractSourceLocation(element),
+    };
+}
+// ─── Node serialization ─────────────────────────────────────────────
+function serializeChild(child, parent = null) {
+    if (child === null || child === undefined || typeof child === 'boolean') {
+        return null;
+    }
+    if (typeof child === 'string') {
+        return {
+            kind: { type: 'Text', content: child },
+            style: {},
+            children: [],
+        };
+    }
+    if (typeof child === 'number') {
+        return {
+            kind: { type: 'Text', content: String(child) },
+            style: {},
+            children: [],
+        };
+    }
+    if (!isValidElement(child)) {
+        // Detect HTML elements and give helpful suggestion
+        if (typeof child === 'object' && child !== null && 'type' in child) {
+            const t = child.type;
+            if (typeof t === 'string') {
+                const suggestions = {
+                    div: 'View', span: 'Text', p: 'Text', h1: 'Text', h2: 'Text',
+                    h3: 'Text', img: 'Image', table: 'Table', tr: 'Row', td: 'Cell',
+                };
+                const suggestion = suggestions[t];
+                if (suggestion) {
+                    throw new Error(`HTML element <${t}> is not supported. Use <${suggestion}> instead.`);
+                }
+            }
+        }
+        return null;
+    }
+    const element = child;
+    if (element.type === View) {
+        return serializeView(element, parent);
+    }
+    if (element.type === Text) {
+        return serializeText(element);
+    }
+    if (element.type === Image) {
+        return serializeImage(element);
+    }
+    if (element.type === Table) {
+        return serializeTable(element, parent);
+    }
+    if (element.type === Row) {
+        validateNesting('Row', parent);
+        return serializeRow(element);
+    }
+    if (element.type === Cell) {
+        validateNesting('Cell', parent);
+        return serializeCell(element);
+    }
+    if (element.type === Fixed) {
+        return serializeFixed(element);
+    }
+    if (element.type === Svg) {
+        return serializeSvg(element);
+    }
+    if (element.type === PageBreak) {
+        return {
+            kind: { type: 'PageBreak' },
+            style: {},
+            children: [],
+            sourceLocation: extractSourceLocation(element),
+        };
+    }
+    if (element.type === Page) {
+        validateNesting('Page', parent);
+        return serializePage(element);
+    }
+    if (element.type === Document) {
+        // Nested Document — just serialize its children
+        const props = element.props;
+        const childElements = flattenChildren(props.children);
+        const nodes = serializeChildren(childElements, parent);
+        return nodes.length === 1 ? nodes[0] : {
+            kind: { type: 'View' },
+            style: {},
+            children: nodes,
+        };
+    }
+    // Unknown component — try to call it as a function component
+    if (typeof element.type === 'function') {
+        const result = element.type(element.props);
+        if (isValidElement(result)) {
+            return serializeChild(result, parent);
+        }
+        return null;
+    }
+    return null;
+}
+function serializeView(element, _parent = null) {
+    const props = element.props;
+    const style = mapStyle(props.style);
+    if (props.wrap !== undefined) {
+        style.wrap = props.wrap;
+    }
+    const childElements = flattenChildren(props.children);
+    const children = serializeChildren(childElements, 'View');
+    const node = {
+        kind: { type: 'View' },
+        style,
+        children,
+        sourceLocation: extractSourceLocation(element),
+    };
+    if (props.bookmark)
+        node.bookmark = props.bookmark;
+    if (props.href)
+        node.href = props.href;
+    return node;
+}
+function serializeText(element) {
+    const props = element.props;
+    const childElements = flattenChildren(props.children);
+    // Check if any child is a <Text> element (inline runs)
+    const hasTextChild = childElements.some(c => isValidElement(c) && c.type === Text);
+    const kind = { type: 'Text', content: '' };
+    if (hasTextChild) {
+        // Build runs from children
+        const runs = [];
+        for (const child of childElements) {
+            if (typeof child === 'string' || typeof child === 'number') {
+                runs.push({ content: String(child) });
+            }
+            else if (isValidElement(child) && child.type === Text) {
+                const childProps = child.props;
+                const run = {
+                    content: flattenTextContent(childProps.children),
+                };
+                if (childProps.style)
+                    run.style = mapStyle(childProps.style);
+                if (childProps.href)
+                    run.href = childProps.href;
+                runs.push(run);
+            }
+        }
+        kind.runs = runs;
+    }
+    else {
+        kind.content = flattenTextContent(props.children);
+    }
+    if (props.href)
+        kind.href = props.href;
+    const node = {
+        kind,
+        style: mapStyle(props.style),
+        children: [],
+        sourceLocation: extractSourceLocation(element),
+    };
+    if (props.bookmark)
+        node.bookmark = props.bookmark;
+    return node;
+}
+function serializeImage(element) {
+    const props = element.props;
+    const kind = { type: 'Image', src: props.src };
+    if (props.width !== undefined)
+        kind.width = props.width;
+    if (props.height !== undefined)
+        kind.height = props.height;
+    return {
+        kind,
+        style: mapStyle(props.style),
+        children: [],
+        sourceLocation: extractSourceLocation(element),
+    };
+}
+function serializeTable(element, _parent = null) {
+    const props = element.props;
+    const columns = (props.columns ?? []).map(col => ({
+        width: mapColumnWidth(col.width),
+    }));
+    const childElements = flattenChildren(props.children);
+    const children = serializeChildren(childElements, 'Table');
+    return {
+        kind: { type: 'Table', columns },
+        style: mapStyle(props.style),
+        children,
+        sourceLocation: extractSourceLocation(element),
+    };
+}
+function serializeRow(element) {
+    const props = element.props;
+    const childElements = flattenChildren(props.children);
+    const children = serializeChildren(childElements, 'Row');
+    return {
+        kind: { type: 'TableRow', is_header: props.header ?? false },
+        style: mapStyle(props.style),
+        children,
+        sourceLocation: extractSourceLocation(element),
+    };
+}
+function serializeCell(element) {
+    const props = element.props;
+    const childElements = flattenChildren(props.children);
+    const children = serializeChildren(childElements, 'Cell');
+    return {
+        kind: { type: 'TableCell', col_span: props.colSpan ?? 1, row_span: props.rowSpan ?? 1 },
+        style: mapStyle(props.style),
+        children,
+        sourceLocation: extractSourceLocation(element),
+    };
+}
+function serializeFixed(element) {
+    const props = element.props;
+    const position = props.position === 'header' ? 'Header' : 'Footer';
+    const childElements = flattenChildren(props.children);
+    const children = serializeChildren(childElements, 'Fixed');
+    const node = {
+        kind: { type: 'Fixed', position },
+        style: mapStyle(props.style),
+        children,
+        sourceLocation: extractSourceLocation(element),
+    };
+    if (props.bookmark)
+        node.bookmark = props.bookmark;
+    return node;
+}
+function serializeSvg(element) {
+    const props = element.props;
+    const kind = {
+        type: 'Svg',
+        width: props.width,
+        height: props.height,
+        content: props.content,
+    };
+    if (props.viewBox)
+        kind.view_box = props.viewBox;
+    return {
+        kind,
+        style: mapStyle(props.style),
+        children: [],
+        sourceLocation: extractSourceLocation(element),
+    };
+}
+// ─── Children helpers ────────────────────────────────────────────────
+function flattenChildren(children) {
+    const result = [];
+    Children.forEach(children, child => {
+        if (Array.isArray(child)) {
+            result.push(...child.flatMap(c => flattenChildren(c)));
+        }
+        else if (isValidElement(child) && child.type === Fragment) {
+            const fragProps = child.props;
+            result.push(...flattenChildren(fragProps.children));
+        }
+        else {
+            result.push(child);
+        }
+    });
+    return result;
+}
+function serializeChildren(children, parent = null) {
+    const nodes = [];
+    for (const child of children) {
+        const node = serializeChild(child, parent);
+        if (node)
+            nodes.push(node);
+    }
+    return nodes;
+}
+/**
+ * Flatten all text content within a <Text> element to a single string.
+ * Nested <Text> children have their content extracted and concatenated.
+ */
+function flattenTextContent(children) {
+    if (children === null || children === undefined)
+        return '';
+    if (typeof children === 'string')
+        return children;
+    if (typeof children === 'number')
+        return String(children);
+    if (typeof children === 'boolean')
+        return '';
+    if (Array.isArray(children)) {
+        return children.map(c => flattenTextContent(c)).join('');
+    }
+    if (isValidElement(children)) {
+        const element = children;
+        if (element.type === Text) {
+            const props = element.props;
+            return flattenTextContent(props.children);
+        }
+        // For other elements inside Text, try to extract text content
+        const props = element.props;
+        return flattenTextContent(props.children);
+    }
+    // React.Children.toArray for iterables
+    const arr = [];
+    Children.forEach(children, c => arr.push(c));
+    if (arr.length > 0) {
+        return arr.map(c => flattenTextContent(c)).join('');
+    }
+    return String(children);
+}
+// ─── Style mapping ──────────────────────────────────────────────────
+const FLEX_DIRECTION_MAP = {
+    'row': 'Row',
+    'column': 'Column',
+    'row-reverse': 'RowReverse',
+    'column-reverse': 'ColumnReverse',
+};
+const JUSTIFY_CONTENT_MAP = {
+    'flex-start': 'FlexStart',
+    'flex-end': 'FlexEnd',
+    'center': 'Center',
+    'space-between': 'SpaceBetween',
+    'space-around': 'SpaceAround',
+    'space-evenly': 'SpaceEvenly',
+};
+const ALIGN_ITEMS_MAP = {
+    'flex-start': 'FlexStart',
+    'flex-end': 'FlexEnd',
+    'center': 'Center',
+    'stretch': 'Stretch',
+    'baseline': 'Baseline',
+};
+const FLEX_WRAP_MAP = {
+    'nowrap': 'NoWrap',
+    'wrap': 'Wrap',
+    'wrap-reverse': 'WrapReverse',
+};
+const ALIGN_CONTENT_MAP = {
+    'flex-start': 'FlexStart',
+    'flex-end': 'FlexEnd',
+    'center': 'Center',
+    'space-between': 'SpaceBetween',
+    'space-around': 'SpaceAround',
+    'space-evenly': 'SpaceEvenly',
+    'stretch': 'Stretch',
+};
+const FONT_STYLE_MAP = {
+    'normal': 'Normal',
+    'italic': 'Italic',
+    'oblique': 'Oblique',
+};
+const TEXT_ALIGN_MAP = {
+    'left': 'Left',
+    'right': 'Right',
+    'center': 'Center',
+    'justify': 'Justify',
+};
+const TEXT_DECORATION_MAP = {
+    'none': 'None',
+    'underline': 'Underline',
+    'line-through': 'LineThrough',
+};
+const TEXT_TRANSFORM_MAP = {
+    'none': 'None',
+    'uppercase': 'Uppercase',
+    'lowercase': 'Lowercase',
+    'capitalize': 'Capitalize',
+};
+export function mapStyle(style) {
+    if (!style)
+        return {};
+    const result = {};
+    // Dimensions
+    if (style.width !== undefined)
+        result.width = mapDimension(style.width);
+    if (style.height !== undefined)
+        result.height = mapDimension(style.height);
+    if (style.minWidth !== undefined)
+        result.minWidth = mapDimension(style.minWidth);
+    if (style.minHeight !== undefined)
+        result.minHeight = mapDimension(style.minHeight);
+    if (style.maxWidth !== undefined)
+        result.maxWidth = mapDimension(style.maxWidth);
+    if (style.maxHeight !== undefined)
+        result.maxHeight = mapDimension(style.maxHeight);
+    // Edges (individual > axis > base)
+    if (style.padding !== undefined || style.paddingTop !== undefined || style.paddingRight !== undefined || style.paddingBottom !== undefined || style.paddingLeft !== undefined || style.paddingHorizontal !== undefined || style.paddingVertical !== undefined) {
+        const base = style.padding !== undefined ? expandEdges(style.padding) : { top: 0, right: 0, bottom: 0, left: 0 };
+        const vt = style.paddingVertical ?? base.top;
+        const vb = style.paddingVertical ?? base.bottom;
+        const hl = style.paddingHorizontal ?? base.left;
+        const hr = style.paddingHorizontal ?? base.right;
+        result.padding = {
+            top: style.paddingTop ?? vt,
+            right: style.paddingRight ?? hr,
+            bottom: style.paddingBottom ?? vb,
+            left: style.paddingLeft ?? hl,
+        };
+    }
+    if (style.margin !== undefined || style.marginTop !== undefined || style.marginRight !== undefined || style.marginBottom !== undefined || style.marginLeft !== undefined || style.marginHorizontal !== undefined || style.marginVertical !== undefined) {
+        const base = style.margin !== undefined ? expandEdges(style.margin) : { top: 0, right: 0, bottom: 0, left: 0 };
+        const vt = style.marginVertical ?? base.top;
+        const vb = style.marginVertical ?? base.bottom;
+        const hl = style.marginHorizontal ?? base.left;
+        const hr = style.marginHorizontal ?? base.right;
+        result.margin = {
+            top: style.marginTop ?? vt,
+            right: style.marginRight ?? hr,
+            bottom: style.marginBottom ?? vb,
+            left: style.marginLeft ?? hl,
+        };
+    }
+    // Flex
+    if (style.flexDirection !== undefined)
+        result.flexDirection = FLEX_DIRECTION_MAP[style.flexDirection];
+    if (style.justifyContent !== undefined)
+        result.justifyContent = JUSTIFY_CONTENT_MAP[style.justifyContent];
+    if (style.alignItems !== undefined)
+        result.alignItems = ALIGN_ITEMS_MAP[style.alignItems];
+    if (style.alignSelf !== undefined)
+        result.alignSelf = ALIGN_ITEMS_MAP[style.alignSelf];
+    if (style.flexWrap !== undefined)
+        result.flexWrap = FLEX_WRAP_MAP[style.flexWrap];
+    if (style.alignContent !== undefined)
+        result.alignContent = ALIGN_CONTENT_MAP[style.alignContent];
+    if (style.flexGrow !== undefined)
+        result.flexGrow = style.flexGrow;
+    if (style.flexShrink !== undefined)
+        result.flexShrink = style.flexShrink;
+    if (style.flexBasis !== undefined)
+        result.flexBasis = mapDimension(style.flexBasis);
+    if (style.gap !== undefined)
+        result.gap = style.gap;
+    if (style.rowGap !== undefined)
+        result.rowGap = style.rowGap;
+    if (style.columnGap !== undefined)
+        result.columnGap = style.columnGap;
+    // Typography
+    if (style.fontFamily !== undefined)
+        result.fontFamily = style.fontFamily;
+    if (style.fontSize !== undefined)
+        result.fontSize = style.fontSize;
+    if (style.fontWeight !== undefined) {
+        result.fontWeight = style.fontWeight === 'bold' ? 700 : style.fontWeight === 'normal' ? 400 : style.fontWeight;
+    }
+    if (style.fontStyle !== undefined)
+        result.fontStyle = FONT_STYLE_MAP[style.fontStyle];
+    if (style.lineHeight !== undefined)
+        result.lineHeight = style.lineHeight;
+    if (style.textAlign !== undefined)
+        result.textAlign = TEXT_ALIGN_MAP[style.textAlign];
+    if (style.letterSpacing !== undefined)
+        result.letterSpacing = style.letterSpacing;
+    if (style.textDecoration !== undefined)
+        result.textDecoration = TEXT_DECORATION_MAP[style.textDecoration];
+    if (style.textTransform !== undefined)
+        result.textTransform = TEXT_TRANSFORM_MAP[style.textTransform];
+    // Color
+    if (style.color !== undefined)
+        result.color = parseColor(style.color);
+    if (style.backgroundColor !== undefined)
+        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 };
+        result.borderWidth = {
+            top: style.borderTopWidth ?? base.top,
+            right: style.borderRightWidth ?? base.right,
+            bottom: style.borderBottomWidth ?? base.bottom,
+            left: style.borderLeftWidth ?? base.left,
+        };
+    }
+    if (style.borderColor !== undefined || style.borderTopColor !== undefined || style.borderRightColor !== undefined || style.borderBottomColor !== undefined || style.borderLeftColor !== undefined) {
+        let base = {};
+        if (typeof style.borderColor === 'string') {
+            const c = parseColor(style.borderColor);
+            base = { top: c, right: c, bottom: c, left: c };
+        }
+        else if (style.borderColor) {
+            base = {
+                top: parseColor(style.borderColor.top),
+                right: parseColor(style.borderColor.right),
+                bottom: parseColor(style.borderColor.bottom),
+                left: parseColor(style.borderColor.left),
+            };
+        }
+        result.borderColor = {
+            top: (style.borderTopColor ? parseColor(style.borderTopColor) : base.top),
+            right: (style.borderRightColor ? parseColor(style.borderRightColor) : base.right),
+            bottom: (style.borderBottomColor ? parseColor(style.borderBottomColor) : base.bottom),
+            left: (style.borderLeftColor ? parseColor(style.borderLeftColor) : base.left),
+        };
+    }
+    if (style.borderRadius !== undefined || style.borderTopLeftRadius !== undefined || style.borderTopRightRadius !== undefined || style.borderBottomRightRadius !== undefined || style.borderBottomLeftRadius !== undefined) {
+        const base = style.borderRadius !== undefined ? expandCorners(style.borderRadius) : { top_left: 0, top_right: 0, bottom_right: 0, bottom_left: 0 };
+        result.borderRadius = {
+            top_left: style.borderTopLeftRadius ?? base.top_left,
+            top_right: style.borderTopRightRadius ?? base.top_right,
+            bottom_right: style.borderBottomRightRadius ?? base.bottom_right,
+            bottom_left: style.borderBottomLeftRadius ?? base.bottom_left,
+        };
+    }
+    // Positioning
+    if (style.position !== undefined) {
+        result.position = style.position === 'absolute' ? 'Absolute' : 'Relative';
+    }
+    if (style.top !== undefined)
+        result.top = style.top;
+    if (style.right !== undefined)
+        result.right = style.right;
+    if (style.bottom !== undefined)
+        result.bottom = style.bottom;
+    if (style.left !== undefined)
+        result.left = style.left;
+    // Page behavior
+    if (style.wrap !== undefined)
+        result.wrap = style.wrap;
+    if (style.breakBefore !== undefined)
+        result.breakBefore = style.breakBefore;
+    if (style.minWidowLines !== undefined)
+        result.minWidowLines = style.minWidowLines;
+    if (style.minOrphanLines !== undefined)
+        result.minOrphanLines = style.minOrphanLines;
+    return result;
+}
+export function mapDimension(val) {
+    if (typeof val === 'number') {
+        return { Pt: val };
+    }
+    if (val === 'auto')
+        return 'Auto';
+    const match = val.match(/^([0-9.]+)%$/);
+    if (match) {
+        return { Percent: parseFloat(match[1]) };
+    }
+    // Try to parse as a number (e.g. "100" without units)
+    const num = parseFloat(val);
+    if (!isNaN(num)) {
+        return { Pt: num };
+    }
+    return 'Auto';
+}
+export function parseColor(hex) {
+    const h = hex.replace(/^#/, '');
+    if (h.length === 3) {
+        const r = parseInt(h[0] + h[0], 16) / 255;
+        const g = parseInt(h[1] + h[1], 16) / 255;
+        const b = parseInt(h[2] + h[2], 16) / 255;
+        return { r, g, b, a: 1 };
+    }
+    if (h.length === 6) {
+        const r = parseInt(h.slice(0, 2), 16) / 255;
+        const g = parseInt(h.slice(2, 4), 16) / 255;
+        const b = parseInt(h.slice(4, 6), 16) / 255;
+        return { r, g, b, a: 1 };
+    }
+    if (h.length === 8) {
+        const r = parseInt(h.slice(0, 2), 16) / 255;
+        const g = parseInt(h.slice(2, 4), 16) / 255;
+        const b = parseInt(h.slice(4, 6), 16) / 255;
+        const a = parseInt(h.slice(6, 8), 16) / 255;
+        return { r, g, b, a };
+    }
+    // Fallback: black
+    return { r: 0, g: 0, b: 0, a: 1 };
+}
+export function expandEdges(val) {
+    if (typeof val === 'number') {
+        return { top: val, right: val, bottom: val, left: val };
+    }
+    return { top: val.top, right: val.right, bottom: val.bottom, left: val.left };
+}
+function expandEdgeValues(val) {
+    if (typeof val === 'number') {
+        return { top: val, right: val, bottom: val, left: val };
+    }
+    return { top: val.top, right: val.right, bottom: val.bottom, left: val.left };
+}
+export function expandCorners(val) {
+    if (typeof val === 'number') {
+        return { top_left: val, top_right: val, bottom_right: val, bottom_left: val };
+    }
+    return {
+        top_left: val.topLeft,
+        top_right: val.topRight,
+        bottom_right: val.bottomRight,
+        bottom_left: val.bottomLeft,
+    };
+}
+function mapColumnWidth(w) {
+    if (w === 'auto')
+        return 'Auto';
+    if ('fraction' in w)
+        return { Fraction: w.fraction };
+    if ('fixed' in w)
+        return { Fixed: w.fixed };
+    return 'Auto';
+}