@worm-vue3-print/canvas 1.3.4 → 1.3.5

package/dist/composables/useDesignerState.d.ts

@@ -1,3 +1,9 @@
+/*!
+ * @worm-vue3-print/canvas v1.3.5
+ * Copyright (c) 2026 Worm Base AI
+ * SPDX-FileCopyrightText: 2026 Worm Base AI
+ * SPDX-License-Identifier: MIT
+ */
 import type { RuntimeElement, ElementType, PrintBusinessField, TemplateData, TableSelection, MultiPageTemplateData } from '@worm-vue3-print/core/designer';
 import { type AlignMode } from '@worm-vue3-print/core/designer';
 export interface DesignerStateOptions {
@@ -351,168 +357,6 @@ export declare function useDesignerState(options?: DesignerStateOptions): {
                 };
             }[];
         };
-        firstPageOverlay: {
-            height: number;
-            elements: {
-                id?: string | undefined;
-                type?: ElementType | undefined;
-                options: {
-                    left: number;
-                    top: number;
-                    width: number;
-                    height: number;
-                    title?: string | undefined;
-                    testData?: string | undefined;
-                    fontSize?: number | undefined;
-                    fontWeight?: string | undefined;
-                    fontFamily?: string | undefined;
-                    color?: string | undefined;
-                    backgroundColor?: string | undefined;
-                    textAlign?: import("@worm-vue3-print/core/designer").TextAlign | undefined;
-                    verticalAlign?: import("@worm-vue3-print/core/designer").VerticalAlign | undefined;
-                    lineHeight?: number | undefined;
-                    letterSpacing?: number | undefined;
-                    textFit?: import("@worm-vue3-print/core").TextFit | undefined;
-                    shrinkMinFontSize?: number | undefined;
-                    wordWrap?: boolean | undefined;
-                    fixed?: boolean | undefined;
-                    locked?: boolean | undefined;
-                    visible?: boolean | undefined;
-                    borderWidth?: number | undefined;
-                    borderStyle?: string | undefined;
-                    borderColor?: string | undefined;
-                    borders?: {
-                        left?: {
-                            width: number;
-                            style?: string | undefined;
-                            color?: string | undefined;
-                        } | undefined;
-                        top?: {
-                            width: number;
-                            style?: string | undefined;
-                            color?: string | undefined;
-                        } | undefined;
-                        right?: {
-                            width: number;
-                            style?: string | undefined;
-                            color?: string | undefined;
-                        } | undefined;
-                        bottom?: {
-                            width: number;
-                            style?: string | undefined;
-                            color?: string | undefined;
-                        } | undefined;
-                    } | undefined;
-                    contentPaddingLeft?: number | undefined;
-                    contentPaddingTop?: number | undefined;
-                    contentPaddingRight?: number | undefined;
-                    contentPaddingBottom?: number | undefined;
-                    textDecoration?: string | undefined;
-                    textType?: "barcode" | "qrcode" | undefined;
-                    barcodeType?: string | undefined;
-                    barWidth?: number | undefined;
-                    barAutoWidth?: string | undefined;
-                    printerDpi?: number | undefined;
-                    qrCodeLevel?: string | undefined;
-                    src?: string | undefined;
-                    fit?: string | undefined;
-                    maxWidth?: number | undefined;
-                    maxHeight?: number | undefined;
-                    hideTitle?: boolean | undefined;
-                    draggable?: boolean | undefined;
-                    axis?: string | undefined;
-                    transform?: number | undefined;
-                    zIndex?: number | undefined;
-                    groupId?: string | undefined;
-                    pagination?: {
-                        pageable: boolean;
-                        keepWithNext: boolean;
-                    } | undefined;
-                    tablePagination?: {
-                        enabled: boolean;
-                    } | undefined;
-                    tableMode?: "dynamic" | "static" | undefined;
-                    tableRows?: {
-                        id: string;
-                        type: import("@worm-vue3-print/core/designer").TableRowType;
-                        height: number;
-                        repeatOnPage?: boolean | undefined;
-                        cells: {
-                            id: string;
-                            formatter?: string | undefined;
-                            cellType?: import("@worm-vue3-print/core/designer").TableCellType | undefined;
-                            barcodeType?: string | undefined;
-                            qrCodeLevel?: string | undefined;
-                            showBarcodeText?: boolean | undefined;
-                            printerDpi?: number | undefined;
-                            barWidth?: number | undefined;
-                            barFontSize?: number | undefined;
-                            rowspan?: number | undefined;
-                            colspan?: number | undefined;
-                            merged?: boolean | undefined;
-                            align?: import("@worm-vue3-print/core/designer").TextAlign | undefined;
-                            valign?: "top" | "middle" | "bottom" | undefined;
-                            fontFamily?: string | undefined;
-                            fontSize?: number | undefined;
-                            fontWeight?: string | undefined;
-                            color?: string | undefined;
-                            backgroundColor?: string | undefined;
-                            borders?: {
-                                top?: {
-                                    width: number;
-                                    style: "solid" | "dashed" | "dotted" | "double" | "none";
-                                    color: string;
-                                } | undefined;
-                                right?: {
-                                    width: number;
-                                    style: "solid" | "dashed" | "dotted" | "double" | "none";
-                                    color: string;
-                                } | undefined;
-                                bottom?: {
-                                    width: number;
-                                    style: "solid" | "dashed" | "dotted" | "double" | "none";
-                                    color: string;
-                                } | undefined;
-                                left?: {
-                                    width: number;
-                                    style: "solid" | "dashed" | "dotted" | "double" | "none";
-                                    color: string;
-                                } | undefined;
-                            } | undefined;
-                            padding?: number | undefined;
-                            wordWrap?: boolean | undefined;
-                            textFit?: import("@worm-vue3-print/core").TextFit | undefined;
-                            shrinkMinFontSize?: number | undefined;
-                            fit?: "contain" | "cover" | "fill" | "none" | "scale-down" | undefined;
-                            maxWidth?: number | undefined;
-                            maxHeight?: number | undefined;
-                        }[];
-                    }[] | undefined;
-                    tableColWidths?: number[] | undefined;
-                    tableDefaultFontSize?: number | undefined;
-                    tableDefaultColor?: string | undefined;
-                    tableDefaultPadding?: number | undefined;
-                    dataSource?: string | undefined;
-                    fields?: {
-                        text?: string | undefined;
-                        dataSource?: string | undefined;
-                    }[] | undefined;
-                    formatter?: string | undefined;
-                    styler?: string | undefined;
-                    rowStyler?: string | undefined;
-                    longTextIndent?: number | undefined;
-                    leftSpaceRemoved?: boolean | undefined;
-                    lHeight?: number | undefined;
-                };
-                printElementType: {
-                    title?: string | undefined;
-                    type: ElementType;
-                    editable?: boolean | undefined;
-                    formatter?: string | undefined;
-                    styler?: string | undefined;
-                };
-            }[];
-        };
         elements: {
             id?: string | undefined;
             type?: ElementType | undefined;
@@ -1059,201 +903,39 @@ export declare function useDesignerState(options?: DesignerStateOptions): {
                 };
             }[];
         };
-        firstPageOverlay: {
-            height: number;
-            elements: {
-                id?: string | undefined;
-                type?: ElementType | undefined;
-                options: {
-                    left: number;
-                    top: number;
-                    width: number;
-                    height: number;
-                    title?: string | undefined;
-                    testData?: string | undefined;
-                    fontSize?: number | undefined;
-                    fontWeight?: string | undefined;
-                    fontFamily?: string | undefined;
-                    color?: string | undefined;
-                    backgroundColor?: string | undefined;
-                    textAlign?: import("@worm-vue3-print/core/designer").TextAlign | undefined;
-                    verticalAlign?: import("@worm-vue3-print/core/designer").VerticalAlign | undefined;
-                    lineHeight?: number | undefined;
-                    letterSpacing?: number | undefined;
-                    textFit?: import("@worm-vue3-print/core").TextFit | undefined;
-                    shrinkMinFontSize?: number | undefined;
-                    wordWrap?: boolean | undefined;
-                    fixed?: boolean | undefined;
-                    locked?: boolean | undefined;
-                    visible?: boolean | undefined;
-                    borderWidth?: number | undefined;
-                    borderStyle?: string | undefined;
-                    borderColor?: string | undefined;
-                    borders?: {
-                        left?: {
-                            width: number;
-                            style?: string | undefined;
-                            color?: string | undefined;
-                        } | undefined;
-                        top?: {
-                            width: number;
-                            style?: string | undefined;
-                            color?: string | undefined;
-                        } | undefined;
-                        right?: {
-                            width: number;
-                            style?: string | undefined;
-                            color?: string | undefined;
-                        } | undefined;
-                        bottom?: {
-                            width: number;
-                            style?: string | undefined;
-                            color?: string | undefined;
-                        } | undefined;
-                    } | undefined;
-                    contentPaddingLeft?: number | undefined;
-                    contentPaddingTop?: number | undefined;
-                    contentPaddingRight?: number | undefined;
-                    contentPaddingBottom?: number | undefined;
-                    textDecoration?: string | undefined;
-                    textType?: "barcode" | "qrcode" | undefined;
-                    barcodeType?: string | undefined;
-                    barWidth?: number | undefined;
-                    barAutoWidth?: string | undefined;
-                    printerDpi?: number | undefined;
-                    qrCodeLevel?: string | undefined;
-                    src?: string | undefined;
-                    fit?: string | undefined;
-                    maxWidth?: number | undefined;
-                    maxHeight?: number | undefined;
-                    hideTitle?: boolean | undefined;
-                    draggable?: boolean | undefined;
-                    axis?: string | undefined;
-                    transform?: number | undefined;
-                    zIndex?: number | undefined;
-                    groupId?: string | undefined;
-                    pagination?: {
-                        pageable: boolean;
-                        keepWithNext: boolean;
-                    } | undefined;
-                    tablePagination?: {
-                        enabled: boolean;
-                    } | undefined;
-                    tableMode?: "dynamic" | "static" | undefined;
-                    tableRows?: {
-                        id: string;
-                        type: import("@worm-vue3-print/core/designer").TableRowType;
-                        height: number;
-                        repeatOnPage?: boolean | undefined;
-                        cells: {
-                            id: string;
-                            formatter?: string | undefined;
-                            cellType?: import("@worm-vue3-print/core/designer").TableCellType | undefined;
-                            barcodeType?: string | undefined;
-                            qrCodeLevel?: string | undefined;
-                            showBarcodeText?: boolean | undefined;
-                            printerDpi?: number | undefined;
-                            barWidth?: number | undefined;
-                            barFontSize?: number | undefined;
-                            rowspan?: number | undefined;
-                            colspan?: number | undefined;
-                            merged?: boolean | undefined;
-                            align?: import("@worm-vue3-print/core/designer").TextAlign | undefined;
-                            valign?: "top" | "middle" | "bottom" | undefined;
-                            fontFamily?: string | undefined;
-                            fontSize?: number | undefined;
-                            fontWeight?: string | undefined;
-                            color?: string | undefined;
-                            backgroundColor?: string | undefined;
-                            borders?: {
-                                top?: {
-                                    width: number;
-                                    style: "solid" | "dashed" | "dotted" | "double" | "none";
-                                    color: string;
-                                } | undefined;
-                                right?: {
-                                    width: number;
-                                    style: "solid" | "dashed" | "dotted" | "double" | "none";
-                                    color: string;
-                                } | undefined;
-                                bottom?: {
-                                    width: number;
-                                    style: "solid" | "dashed" | "dotted" | "double" | "none";
-                                    color: string;
-                                } | undefined;
-                                left?: {
-                                    width: number;
-                                    style: "solid" | "dashed" | "dotted" | "double" | "none";
-                                    color: string;
-                                } | undefined;
-                            } | undefined;
-                            padding?: number | undefined;
-                            wordWrap?: boolean | undefined;
-                            textFit?: import("@worm-vue3-print/core").TextFit | undefined;
-                            shrinkMinFontSize?: number | undefined;
-                            fit?: "contain" | "cover" | "fill" | "none" | "scale-down" | undefined;
-                            maxWidth?: number | undefined;
-                            maxHeight?: number | undefined;
-                        }[];
-                    }[] | undefined;
-                    tableColWidths?: number[] | undefined;
-                    tableDefaultFontSize?: number | undefined;
-                    tableDefaultColor?: string | undefined;
-                    tableDefaultPadding?: number | undefined;
-                    dataSource?: string | undefined;
-                    fields?: {
-                        text?: string | undefined;
-                        dataSource?: string | undefined;
-                    }[] | undefined;
-                    formatter?: string | undefined;
-                    styler?: string | undefined;
-                    rowStyler?: string | undefined;
-                    longTextIndent?: number | undefined;
-                    leftSpaceRemoved?: boolean | undefined;
-                    lHeight?: number | undefined;
-                };
-                printElementType: {
-                    title?: string | undefined;
-                    type: ElementType;
-                    editable?: boolean | undefined;
-                    formatter?: string | undefined;
-                    styler?: string | undefined;
-                };
-            }[];
-        };
-        elements: {
-            id?: string | undefined;
-            type?: ElementType | undefined;
-            options: {
-                left: number;
-                top: number;
-                width: number;
-                height: number;
-                title?: string | undefined;
-                testData?: string | undefined;
-                fontSize?: number | undefined;
-                fontWeight?: string | undefined;
-                fontFamily?: string | undefined;
-                color?: string | undefined;
-                backgroundColor?: string | undefined;
-                textAlign?: import("@worm-vue3-print/core/designer").TextAlign | undefined;
-                verticalAlign?: import("@worm-vue3-print/core/designer").VerticalAlign | undefined;
-                lineHeight?: number | undefined;
-                letterSpacing?: number | undefined;
-                textFit?: import("@worm-vue3-print/core").TextFit | undefined;
-                shrinkMinFontSize?: number | undefined;
-                wordWrap?: boolean | undefined;
-                fixed?: boolean | undefined;
-                locked?: boolean | undefined;
-                visible?: boolean | undefined;
-                borderWidth?: number | undefined;
-                borderStyle?: string | undefined;
-                borderColor?: string | undefined;
-                borders?: {
-                    left?: {
-                        width: number;
-                        style?: string | undefined;
-                        color?: string | undefined;
+        elements: {
+            id?: string | undefined;
+            type?: ElementType | undefined;
+            options: {
+                left: number;
+                top: number;
+                width: number;
+                height: number;
+                title?: string | undefined;
+                testData?: string | undefined;
+                fontSize?: number | undefined;
+                fontWeight?: string | undefined;
+                fontFamily?: string | undefined;
+                color?: string | undefined;
+                backgroundColor?: string | undefined;
+                textAlign?: import("@worm-vue3-print/core/designer").TextAlign | undefined;
+                verticalAlign?: import("@worm-vue3-print/core/designer").VerticalAlign | undefined;
+                lineHeight?: number | undefined;
+                letterSpacing?: number | undefined;
+                textFit?: import("@worm-vue3-print/core").TextFit | undefined;
+                shrinkMinFontSize?: number | undefined;
+                wordWrap?: boolean | undefined;
+                fixed?: boolean | undefined;
+                locked?: boolean | undefined;
+                visible?: boolean | undefined;
+                borderWidth?: number | undefined;
+                borderStyle?: string | undefined;
+                borderColor?: string | undefined;
+                borders?: {
+                    left?: {
+                        width: number;
+                        style?: string | undefined;
+                        color?: string | undefined;
                     } | undefined;
                     top?: {
                         width: number;
@@ -1365,263 +1047,101 @@ export declare function useDesignerState(options?: DesignerStateOptions): {
                     text?: string | undefined;
                     dataSource?: string | undefined;
                 }[] | undefined;
-                formatter?: string | undefined;
-                styler?: string | undefined;
-                rowStyler?: string | undefined;
-                longTextIndent?: number | undefined;
-                leftSpaceRemoved?: boolean | undefined;
-                lHeight?: number | undefined;
-            };
-            printElementType: {
-                title?: string | undefined;
-                type: ElementType;
-                editable?: boolean | undefined;
-                formatter?: string | undefined;
-                styler?: string | undefined;
-            };
-        }[];
-        name?: string | undefined;
-        fonts?: {
-            family: string;
-            label?: string | undefined;
-            files: readonly {
-                url: string;
-                weight?: number | undefined;
-                style?: "normal" | "italic" | undefined;
-            }[];
-        }[] | undefined;
-        tiling?: {
-            enabled: boolean;
-            sheetPaperSize?: Exclude<import("@worm-vue3-print/core").PaperSize, "CONTINUOUS"> | undefined;
-            sheetOrientation?: "portrait" | "landscape" | undefined;
-            sheetCustomWidth?: number | undefined;
-            sheetCustomHeight?: number | undefined;
-            sheetMargin: {
-                top: number;
-                right: number;
-                bottom: number;
-                left: number;
-            };
-            gapX: number;
-            gapY: number;
-            columns: number;
-        } | undefined;
-        unit?: "pt" | "mm" | undefined;
-        customWidth?: number | undefined;
-        customHeight?: number | undefined;
-        pageBackground?: string | undefined;
-        watermark?: {
-            mode?: "fixed" | "binding" | undefined;
-            content?: string | undefined;
-            binding?: string | undefined;
-            testData?: string | undefined;
-            rotate?: number | undefined;
-            color?: string | undefined;
-            opacity?: number | undefined;
-            timestamp?: boolean | undefined;
-            format?: string | undefined;
-            tileWidth?: number | undefined;
-            tileHeight?: number | undefined;
-        } | undefined;
-        guides?: {
-            type: "vertical" | "horizontal";
-            position: number;
-            id?: string | undefined;
-            color?: string | undefined;
-        }[] | undefined;
-        designBackground?: {
-            src: string;
-            rotation: 0 | 90 | 180 | 270;
-        } | undefined;
-    }>;
-    elements: import("vue").WritableComputedRef<RuntimeElement[], RuntimeElement[]>;
-    fields: import("vue").Ref<{
-        id?: string | undefined;
-        fieldKey: string;
-        fieldLabel: string;
-        fieldType: string;
-        sortOrder: number;
-    }[], PrintBusinessField[] | {
-        id?: string | undefined;
-        fieldKey: string;
-        fieldLabel: string;
-        fieldType: string;
-        sortOrder: number;
-    }[]>;
-    tilingEnabled: import("vue").ComputedRef<boolean>;
-    pages: import("vue").Ref<{
-        paperSize: import("@worm-vue3-print/core/designer").PaperSize;
-        orientation: "portrait" | "landscape";
-        outputRotation?: 0 | 90 | 180 | 270 | undefined;
-        margins: {
-            top: number;
-            right: number;
-            bottom: number;
-            left: number;
-        };
-        header: {
-            height: number;
-            elements: {
-                id?: string | undefined;
-                type?: ElementType | undefined;
-                options: {
-                    left: number;
-                    top: number;
-                    width: number;
-                    height: number;
-                    title?: string | undefined;
-                    testData?: string | undefined;
-                    fontSize?: number | undefined;
-                    fontWeight?: string | undefined;
-                    fontFamily?: string | undefined;
-                    color?: string | undefined;
-                    backgroundColor?: string | undefined;
-                    textAlign?: import("@worm-vue3-print/core/designer").TextAlign | undefined;
-                    verticalAlign?: import("@worm-vue3-print/core/designer").VerticalAlign | undefined;
-                    lineHeight?: number | undefined;
-                    letterSpacing?: number | undefined;
-                    textFit?: import("@worm-vue3-print/core").TextFit | undefined;
-                    shrinkMinFontSize?: number | undefined;
-                    wordWrap?: boolean | undefined;
-                    fixed?: boolean | undefined;
-                    locked?: boolean | undefined;
-                    visible?: boolean | undefined;
-                    borderWidth?: number | undefined;
-                    borderStyle?: string | undefined;
-                    borderColor?: string | undefined;
-                    borders?: {
-                        left?: {
-                            width: number;
-                            style?: string | undefined;
-                            color?: string | undefined;
-                        } | undefined;
-                        top?: {
-                            width: number;
-                            style?: string | undefined;
-                            color?: string | undefined;
-                        } | undefined;
-                        right?: {
-                            width: number;
-                            style?: string | undefined;
-                            color?: string | undefined;
-                        } | undefined;
-                        bottom?: {
-                            width: number;
-                            style?: string | undefined;
-                            color?: string | undefined;
-                        } | undefined;
-                    } | undefined;
-                    contentPaddingLeft?: number | undefined;
-                    contentPaddingTop?: number | undefined;
-                    contentPaddingRight?: number | undefined;
-                    contentPaddingBottom?: number | undefined;
-                    textDecoration?: string | undefined;
-                    textType?: "barcode" | "qrcode" | undefined;
-                    barcodeType?: string | undefined;
-                    barWidth?: number | undefined;
-                    barAutoWidth?: string | undefined;
-                    printerDpi?: number | undefined;
-                    qrCodeLevel?: string | undefined;
-                    src?: string | undefined;
-                    fit?: string | undefined;
-                    maxWidth?: number | undefined;
-                    maxHeight?: number | undefined;
-                    hideTitle?: boolean | undefined;
-                    draggable?: boolean | undefined;
-                    axis?: string | undefined;
-                    transform?: number | undefined;
-                    zIndex?: number | undefined;
-                    groupId?: string | undefined;
-                    pagination?: {
-                        pageable: boolean;
-                        keepWithNext: boolean;
-                    } | undefined;
-                    tablePagination?: {
-                        enabled: boolean;
-                    } | undefined;
-                    tableMode?: "dynamic" | "static" | undefined;
-                    tableRows?: {
-                        id: string;
-                        type: import("@worm-vue3-print/core/designer").TableRowType;
-                        height: number;
-                        repeatOnPage?: boolean | undefined;
-                        cells: {
-                            id: string;
-                            formatter?: string | undefined;
-                            cellType?: import("@worm-vue3-print/core/designer").TableCellType | undefined;
-                            barcodeType?: string | undefined;
-                            qrCodeLevel?: string | undefined;
-                            showBarcodeText?: boolean | undefined;
-                            printerDpi?: number | undefined;
-                            barWidth?: number | undefined;
-                            barFontSize?: number | undefined;
-                            rowspan?: number | undefined;
-                            colspan?: number | undefined;
-                            merged?: boolean | undefined;
-                            align?: import("@worm-vue3-print/core/designer").TextAlign | undefined;
-                            valign?: "top" | "middle" | "bottom" | undefined;
-                            fontFamily?: string | undefined;
-                            fontSize?: number | undefined;
-                            fontWeight?: string | undefined;
-                            color?: string | undefined;
-                            backgroundColor?: string | undefined;
-                            borders?: {
-                                top?: {
-                                    width: number;
-                                    style: "solid" | "dashed" | "dotted" | "double" | "none";
-                                    color: string;
-                                } | undefined;
-                                right?: {
-                                    width: number;
-                                    style: "solid" | "dashed" | "dotted" | "double" | "none";
-                                    color: string;
-                                } | undefined;
-                                bottom?: {
-                                    width: number;
-                                    style: "solid" | "dashed" | "dotted" | "double" | "none";
-                                    color: string;
-                                } | undefined;
-                                left?: {
-                                    width: number;
-                                    style: "solid" | "dashed" | "dotted" | "double" | "none";
-                                    color: string;
-                                } | undefined;
-                            } | undefined;
-                            padding?: number | undefined;
-                            wordWrap?: boolean | undefined;
-                            textFit?: import("@worm-vue3-print/core").TextFit | undefined;
-                            shrinkMinFontSize?: number | undefined;
-                            fit?: "contain" | "cover" | "fill" | "none" | "scale-down" | undefined;
-                            maxWidth?: number | undefined;
-                            maxHeight?: number | undefined;
-                        }[];
-                    }[] | undefined;
-                    tableColWidths?: number[] | undefined;
-                    tableDefaultFontSize?: number | undefined;
-                    tableDefaultColor?: string | undefined;
-                    tableDefaultPadding?: number | undefined;
-                    dataSource?: string | undefined;
-                    fields?: {
-                        text?: string | undefined;
-                        dataSource?: string | undefined;
-                    }[] | undefined;
-                    formatter?: string | undefined;
-                    styler?: string | undefined;
-                    rowStyler?: string | undefined;
-                    longTextIndent?: number | undefined;
-                    leftSpaceRemoved?: boolean | undefined;
-                    lHeight?: number | undefined;
-                };
-                printElementType: {
-                    title?: string | undefined;
-                    type: ElementType;
-                    editable?: boolean | undefined;
-                    formatter?: string | undefined;
-                    styler?: string | undefined;
-                };
+                formatter?: string | undefined;
+                styler?: string | undefined;
+                rowStyler?: string | undefined;
+                longTextIndent?: number | undefined;
+                leftSpaceRemoved?: boolean | undefined;
+                lHeight?: number | undefined;
+            };
+            printElementType: {
+                title?: string | undefined;
+                type: ElementType;
+                editable?: boolean | undefined;
+                formatter?: string | undefined;
+                styler?: string | undefined;
+            };
+        }[];
+        name?: string | undefined;
+        fonts?: {
+            family: string;
+            label?: string | undefined;
+            files: readonly {
+                url: string;
+                weight?: number | undefined;
+                style?: "normal" | "italic" | undefined;
             }[];
+        }[] | undefined;
+        tiling?: {
+            enabled: boolean;
+            sheetPaperSize?: Exclude<import("@worm-vue3-print/core").PaperSize, "CONTINUOUS"> | undefined;
+            sheetOrientation?: "portrait" | "landscape" | undefined;
+            sheetCustomWidth?: number | undefined;
+            sheetCustomHeight?: number | undefined;
+            sheetMargin: {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            };
+            gapX: number;
+            gapY: number;
+            columns: number;
+        } | undefined;
+        unit?: "pt" | "mm" | undefined;
+        customWidth?: number | undefined;
+        customHeight?: number | undefined;
+        pageBackground?: string | undefined;
+        watermark?: {
+            mode?: "fixed" | "binding" | undefined;
+            content?: string | undefined;
+            binding?: string | undefined;
+            testData?: string | undefined;
+            rotate?: number | undefined;
+            color?: string | undefined;
+            opacity?: number | undefined;
+            timestamp?: boolean | undefined;
+            format?: string | undefined;
+            tileWidth?: number | undefined;
+            tileHeight?: number | undefined;
+        } | undefined;
+        guides?: {
+            type: "vertical" | "horizontal";
+            position: number;
+            id?: string | undefined;
+            color?: string | undefined;
+        }[] | undefined;
+        designBackground?: {
+            src: string;
+            rotation: 0 | 90 | 180 | 270;
+        } | undefined;
+    }>;
+    elements: import("vue").WritableComputedRef<RuntimeElement[], RuntimeElement[]>;
+    fields: import("vue").Ref<{
+        id?: string | undefined;
+        fieldKey: string;
+        fieldLabel: string;
+        fieldType: string;
+        sortOrder: number;
+    }[], PrintBusinessField[] | {
+        id?: string | undefined;
+        fieldKey: string;
+        fieldLabel: string;
+        fieldType: string;
+        sortOrder: number;
+    }[]>;
+    tilingEnabled: import("vue").ComputedRef<boolean>;
+    pages: import("vue").Ref<{
+        paperSize: import("@worm-vue3-print/core/designer").PaperSize;
+        orientation: "portrait" | "landscape";
+        outputRotation?: 0 | 90 | 180 | 270 | undefined;
+        margins: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
         };
-        footer: {
+        header: {
             height: number;
             elements: {
                 id?: string | undefined;
@@ -1783,7 +1303,7 @@ export declare function useDesignerState(options?: DesignerStateOptions): {
                 };
             }[];
         };
-        firstPageOverlay: {
+        footer: {
             height: number;
             elements: {
                 id?: string | undefined;
@@ -2491,168 +2011,6 @@ export declare function useDesignerState(options?: DesignerStateOptions): {
                 };
             }[];
         };
-        firstPageOverlay: {
-            height: number;
-            elements: {
-                id?: string | undefined;
-                type?: ElementType | undefined;
-                options: {
-                    left: number;
-                    top: number;
-                    width: number;
-                    height: number;
-                    title?: string | undefined;
-                    testData?: string | undefined;
-                    fontSize?: number | undefined;
-                    fontWeight?: string | undefined;
-                    fontFamily?: string | undefined;
-                    color?: string | undefined;
-                    backgroundColor?: string | undefined;
-                    textAlign?: import("@worm-vue3-print/core/designer").TextAlign | undefined;
-                    verticalAlign?: import("@worm-vue3-print/core/designer").VerticalAlign | undefined;
-                    lineHeight?: number | undefined;
-                    letterSpacing?: number | undefined;
-                    textFit?: import("@worm-vue3-print/core").TextFit | undefined;
-                    shrinkMinFontSize?: number | undefined;
-                    wordWrap?: boolean | undefined;
-                    fixed?: boolean | undefined;
-                    locked?: boolean | undefined;
-                    visible?: boolean | undefined;
-                    borderWidth?: number | undefined;
-                    borderStyle?: string | undefined;
-                    borderColor?: string | undefined;
-                    borders?: {
-                        left?: {
-                            width: number;
-                            style?: string | undefined;
-                            color?: string | undefined;
-                        } | undefined;
-                        top?: {
-                            width: number;
-                            style?: string | undefined;
-                            color?: string | undefined;
-                        } | undefined;
-                        right?: {
-                            width: number;
-                            style?: string | undefined;
-                            color?: string | undefined;
-                        } | undefined;
-                        bottom?: {
-                            width: number;
-                            style?: string | undefined;
-                            color?: string | undefined;
-                        } | undefined;
-                    } | undefined;
-                    contentPaddingLeft?: number | undefined;
-                    contentPaddingTop?: number | undefined;
-                    contentPaddingRight?: number | undefined;
-                    contentPaddingBottom?: number | undefined;
-                    textDecoration?: string | undefined;
-                    textType?: "barcode" | "qrcode" | undefined;
-                    barcodeType?: string | undefined;
-                    barWidth?: number | undefined;
-                    barAutoWidth?: string | undefined;
-                    printerDpi?: number | undefined;
-                    qrCodeLevel?: string | undefined;
-                    src?: string | undefined;
-                    fit?: string | undefined;
-                    maxWidth?: number | undefined;
-                    maxHeight?: number | undefined;
-                    hideTitle?: boolean | undefined;
-                    draggable?: boolean | undefined;
-                    axis?: string | undefined;
-                    transform?: number | undefined;
-                    zIndex?: number | undefined;
-                    groupId?: string | undefined;
-                    pagination?: {
-                        pageable: boolean;
-                        keepWithNext: boolean;
-                    } | undefined;
-                    tablePagination?: {
-                        enabled: boolean;
-                    } | undefined;
-                    tableMode?: "dynamic" | "static" | undefined;
-                    tableRows?: {
-                        id: string;
-                        type: import("@worm-vue3-print/core/designer").TableRowType;
-                        height: number;
-                        repeatOnPage?: boolean | undefined;
-                        cells: {
-                            id: string;
-                            formatter?: string | undefined;
-                            cellType?: import("@worm-vue3-print/core/designer").TableCellType | undefined;
-                            barcodeType?: string | undefined;
-                            qrCodeLevel?: string | undefined;
-                            showBarcodeText?: boolean | undefined;
-                            printerDpi?: number | undefined;
-                            barWidth?: number | undefined;
-                            barFontSize?: number | undefined;
-                            rowspan?: number | undefined;
-                            colspan?: number | undefined;
-                            merged?: boolean | undefined;
-                            align?: import("@worm-vue3-print/core/designer").TextAlign | undefined;
-                            valign?: "top" | "middle" | "bottom" | undefined;
-                            fontFamily?: string | undefined;
-                            fontSize?: number | undefined;
-                            fontWeight?: string | undefined;
-                            color?: string | undefined;
-                            backgroundColor?: string | undefined;
-                            borders?: {
-                                top?: {
-                                    width: number;
-                                    style: "solid" | "dashed" | "dotted" | "double" | "none";
-                                    color: string;
-                                } | undefined;
-                                right?: {
-                                    width: number;
-                                    style: "solid" | "dashed" | "dotted" | "double" | "none";
-                                    color: string;
-                                } | undefined;
-                                bottom?: {
-                                    width: number;
-                                    style: "solid" | "dashed" | "dotted" | "double" | "none";
-                                    color: string;
-                                } | undefined;
-                                left?: {
-                                    width: number;
-                                    style: "solid" | "dashed" | "dotted" | "double" | "none";
-                                    color: string;
-                                } | undefined;
-                            } | undefined;
-                            padding?: number | undefined;
-                            wordWrap?: boolean | undefined;
-                            textFit?: import("@worm-vue3-print/core").TextFit | undefined;
-                            shrinkMinFontSize?: number | undefined;
-                            fit?: "contain" | "cover" | "fill" | "none" | "scale-down" | undefined;
-                            maxWidth?: number | undefined;
-                            maxHeight?: number | undefined;
-                        }[];
-                    }[] | undefined;
-                    tableColWidths?: number[] | undefined;
-                    tableDefaultFontSize?: number | undefined;
-                    tableDefaultColor?: string | undefined;
-                    tableDefaultPadding?: number | undefined;
-                    dataSource?: string | undefined;
-                    fields?: {
-                        text?: string | undefined;
-                        dataSource?: string | undefined;
-                    }[] | undefined;
-                    formatter?: string | undefined;
-                    styler?: string | undefined;
-                    rowStyler?: string | undefined;
-                    longTextIndent?: number | undefined;
-                    leftSpaceRemoved?: boolean | undefined;
-                    lHeight?: number | undefined;
-                };
-                printElementType: {
-                    title?: string | undefined;
-                    type: ElementType;
-                    editable?: boolean | undefined;
-                    formatter?: string | undefined;
-                    styler?: string | undefined;
-                };
-            }[];
-        };
         elements: {
             id?: string | undefined;
             type?: ElementType | undefined;