@hartl-services/medusa-base 1.0.0 → 2.0.0

package/dist/documents/templates/financial-document.js

@@ -3,20 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderFinancialDocument = void 0;
 const format_1 = require("./format");
 const html_utils_1 = require("./html-utils");
+const layout_1 = require("./layout");
 const labelsByKind = {
     cancellation: {
-        date: "Stornodatum",
-        recipient: "Stornorechnung an",
+        number: "Stornonummer",
         title: "Stornorechnung",
     },
     credit_note: {
-        date: "Gutschriftsdatum",
-        recipient: "Gutschrift an",
+        number: "Gutschriftnummer",
         title: "Gutschrift",
     },
     invoice: {
-        date: "Rechnungsdatum",
-        recipient: "Rechnung an",
+        number: "Rechnungsnummer",
         title: "Rechnung",
     },
 };
@@ -26,7 +24,8 @@ const renderAddress = (input) => {
         return (0, html_utils_1.escapeHtml)(input.order.email);
     }
     return [
-        [address.company, address.first_name, address.last_name]
+        address.company,
+        [address.first_name, address.last_name]
             .filter((part) => Boolean(part))
             .join(" "),
         address.address_1,
@@ -34,34 +33,43 @@ const renderAddress = (input) => {
         [address.postal_code, address.city]
             .filter((part) => Boolean(part))
             .join(" "),
-        address.country_code?.toUpperCase(),
+        address.country_code ? (0, layout_1.formatCountryName)(address.country_code) : null,
     ]
         .filter((part) => Boolean(part))
         .map(html_utils_1.escapeHtml)
         .join("<br />");
 };
-const renderLines = (input, timeZone) => input.lines
-    .map((line) => {
-    const batchDetails = line.batch_allocations
-        .map((allocation) => `<div class="batch">Charge: ${(0, html_utils_1.escapeHtml)(allocation.lot_number)} · MHD: ${(0, html_utils_1.escapeHtml)((0, format_1.formatDate)(allocation.expiry_date, { timeZone }))} · ${(0, html_utils_1.escapeHtml)(allocation.quantity)}</div>`)
+/** "Charge: L-1, MHD: 30.06.2027"; the quantity only when a line has several batches. */
+const renderBatchDetails = (line, timeZone) => {
+    const showQuantity = line.batch_allocations.length > 1;
+    return line.batch_allocations
+        .map((allocation) => {
+        const parts = [
+            `Charge: ${allocation.lot_number}`,
+            `MHD: ${(0, format_1.formatDocumentDate)(allocation.expiry_date, timeZone)}`,
+            showQuantity ? `Menge: ${allocation.quantity}` : null,
+        ].filter((part) => Boolean(part));
+        return `<div class="batch">${(0, html_utils_1.escapeHtml)(parts.join(", "))}</div>`;
+    })
         .join("");
-    return `<tr>
-        <td>
-          <strong>${(0, html_utils_1.escapeHtml)(line.title)}</strong>
+};
+const renderLines = (input, timeZone) => input.lines
+    .map((line) => `<tr>
+        <td class="item">
+          <div class="item-title">${(0, html_utils_1.escapeHtml)(line.title)}</div>
           ${line.sku ? `<div class="sku">SKU: ${(0, html_utils_1.escapeHtml)(line.sku)}</div>` : ""}
-          ${batchDetails}
+          ${renderBatchDetails(line, timeZone)}
         </td>
-        <td class="number">${(0, html_utils_1.escapeHtml)(line.quantity)}</td>
-        <td class="number">${(0, html_utils_1.escapeHtml)((0, format_1.formatMoney)({ amount: line.unit_price.amount, currencyCode: line.unit_price.currency_code }))}</td>
-        <td class="number">${(0, html_utils_1.escapeHtml)((0, format_1.formatMoney)({ amount: line.total.amount, currencyCode: line.total.currency_code }))}</td>
-      </tr>`;
-})
+        <td class="number quantity">${(0, html_utils_1.escapeHtml)(line.quantity)}</td>
+        <td class="number">${(0, html_utils_1.renderMoney)(line.unit_price)}</td>
+        <td class="number">${(0, html_utils_1.renderMoney)(line.total)}</td>
+      </tr>`)
     .join("");
+const isExemptIntraCommunitySupply = (input) => input.order.tax_compliance?.exemption_wording ===
+    "steuerfreie_innergemeinschaftliche_lieferung";
 const renderTaxCompliance = (input) => {
     const evidence = input.order.tax_compliance;
-    if (!evidence ||
-        evidence.exemption_wording !==
-            "steuerfreie_innergemeinschaftliche_lieferung") {
+    if (!evidence || !isExemptIntraCommunitySupply(input)) {
         return "";
     }
     return `<section class="tax-compliance">
@@ -72,16 +80,18 @@ const renderTaxCompliance = (input) => {
     </section>`;
 };
 const renderDiscountTotal = (input) => {
-    const { amount, currency_code: currencyCode } = input.totals.discount_total;
-    const displayAmount = input.document.kind === "invoice" && Number(amount) > 0
-        ? `-${amount}`
-        : amount;
-    return (0, html_utils_1.escapeHtml)((0, format_1.formatMoney)({ amount: displayAmount, currencyCode }));
+    const discount = input.totals.discount_total;
+    const displayAmount = input.document.kind === "invoice" && Number(discount.amount) > 0
+        ? `-${discount.amount}`
+        : discount.amount;
+    return (0, html_utils_1.renderMoney)(discount, displayAmount);
 };
 const formatTaxRate = (rate) => new Intl.NumberFormat(format_1.DEFAULT_FORMAT_LOCALE, {
     maximumFractionDigits: 2,
     style: "percent",
 }).format(rate / 100);
+/** One totals row below the Menge/Einzelpreis columns; the amount sits under "Summe". */
+const renderTotalRow = (label, value, className) => `<tr${className ? ` class="${className}"` : ""}><td class="spacer"></td><td class="label" colspan="2">${(0, html_utils_1.escapeHtml)(label)}</td><td class="number">${value}</td></tr>`;
 const renderTaxRows = (input) => {
     const { tax_breakdown: breakdown, tax_total: taxTotal } = input.totals;
     const rows = breakdown.length > 0
@@ -91,16 +101,17 @@ const renderTaxRows = (input) => {
         }))
         : [{ label: "Umsatzsteuer", money: taxTotal }];
     return rows
-        .map(({ label, money }) => `<tr><td>${(0, html_utils_1.escapeHtml)(label)}</td><td class="number">${(0, html_utils_1.escapeHtml)((0, format_1.formatMoney)({ amount: money.amount, currencyCode: money.currency_code }))}</td></tr>`)
+        .map(({ label, money }) => renderTotalRow(label, (0, html_utils_1.renderMoney)(money)))
         .join("");
 };
+/** Only invoices ask for payment; cancellations and credit notes do not. */
+const renderPaymentTerms = (input) => input.document.kind === "invoice" && input.settings.payment_terms
+    ? `<section class="payment-terms">${(0, html_utils_1.escapeHtml)(input.settings.payment_terms)}</section>`
+    : "";
 const renderFinancialDocument = (input, layout, timeZone) => {
     const labels = labelsByKind[input.document.kind];
     const metadata = [
-        {
-            label: labels.date,
-            value: (0, format_1.formatDate)(input.document.issued_at, { timeZone }),
-        },
+        { label: labels.number, value: input.document.number },
         {
             label: "Bestellung",
             value: (0, html_utils_1.formatOrderReference)(input.order.display_id),
@@ -112,30 +123,37 @@ const renderFinancialDocument = (input, layout, timeZone) => {
             value: input.document.source_document_number ?? "-",
         });
     }
-    const body = `<section class="recipient">
-      <h2>${labels.recipient}</h2>
-      ${renderAddress(input)}
-    </section>
-    ${renderTaxCompliance(input)}
-    <table>
-      <thead><tr><th>Artikel</th><th class="number">Menge</th><th class="number">Einzelpreis</th><th class="number">Summe</th></tr></thead>
-      <tbody>${renderLines(input, timeZone)}</tbody>
-    </table>
-    <table class="totals">
-      <tbody>
-        <tr><td>Zwischensumme</td><td class="number">${(0, html_utils_1.escapeHtml)((0, format_1.formatMoney)({ amount: input.totals.subtotal.amount, currencyCode: input.totals.subtotal.currency_code }))}</td></tr>
-        <tr><td>Versand</td><td class="number">${(0, html_utils_1.escapeHtml)((0, format_1.formatMoney)({ amount: input.totals.shipping_total.amount, currencyCode: input.totals.shipping_total.currency_code }))}</td></tr>
-        <tr><td>Rabatt</td><td class="number">${renderDiscountTotal(input)}</td></tr>
+    if (input.order.tax_compliance && isExemptIntraCommunitySupply(input)) {
+        metadata.push({
+            label: "Kunden-UID",
+            value: input.order.tax_compliance.customer_vat_number,
+        });
+    }
+    metadata.push({
+        label: "Datum",
+        value: (0, format_1.formatDocumentDate)(input.document.issued_at, timeZone),
+    });
+    const { totals } = input;
+    const body = `<table class="items financial-items">
+      <thead><tr><th class="item">Artikel</th><th class="number quantity">Menge</th><th class="number">Einzelpreis</th><th class="number">Summe</th></tr></thead>
+      <tbody class="lines">${renderLines(input, timeZone)}</tbody>
+      <tbody class="totals">
+        ${renderTotalRow("Zwischensumme", (0, html_utils_1.renderMoney)(totals.subtotal))}
+        ${renderTotalRow("Versand", (0, html_utils_1.renderMoney)(totals.shipping_total))}
+        ${renderTotalRow("Rabatt", renderDiscountTotal(input))}
         ${renderTaxRows(input)}
-        <tr><td>Gesamt</td><td class="number">${(0, html_utils_1.escapeHtml)((0, format_1.formatMoney)({ amount: input.totals.total.amount, currencyCode: input.totals.total.currency_code }))}</td></tr>
+        ${renderTotalRow("Gesamt", (0, html_utils_1.renderMoney)(totals.total), "grand-total")}
       </tbody>
-    </table>`;
+    </table>
+    ${renderTaxCompliance(input)}
+    ${renderPaymentTerms(input)}`;
     return layout({
         body,
         documentTitle: labels.title,
         metadata,
         number: input.document.number,
         pageTitle: labels.title,
+        recipient: renderAddress(input),
     });
 };
 exports.renderFinancialDocument = renderFinancialDocument;

package/dist/documents/templates/format.d.ts

@@ -14,3 +14,17 @@ export type FormatDateOptions = {
     readonly options?: Omit<Intl.DateTimeFormatOptions, "timeZone">;
 };
 export declare const formatDate: (value: string | Date, { locale, options, timeZone }: FormatDateOptions) => string;
+export type MoneyParts = {
+    /** Currency symbol or code; empty when the amount could not be formatted. */
+    readonly currency: string;
+    /** Signed, localized number without the currency. */
+    readonly amount: string;
+};
+/**
+ * `formatMoney` split into currency and number, so a template can align the
+ * currency and the amount separately. Falls back to the whole
+ * `formatMoney` text as `amount`.
+ */
+export declare const formatMoneyParts: ({ amount, currencyCode }: FormatMoneyInput, { locale }?: FormatMoneyOptions) => MoneyParts;
+/** A document date as "01.01.2027" in the given time zone. */
+export declare const formatDocumentDate: (value: string | Date, timeZone: string) => string;

package/dist/documents/templates/format.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatDate = exports.formatMoney = exports.DEFAULT_FORMAT_LOCALE = void 0;
+exports.formatDocumentDate = exports.formatMoneyParts = exports.formatDate = exports.formatMoney = exports.DEFAULT_FORMAT_LOCALE = void 0;
 exports.DEFAULT_FORMAT_LOCALE = "de-AT";
 const formatMoney = ({ amount, currencyCode }, { locale = exports.DEFAULT_FORMAT_LOCALE } = {}) => {
     const numericAmount = Number(amount);
@@ -28,3 +28,45 @@ const formatDate = (value, { locale = exports.DEFAULT_FORMAT_LOCALE, options, ti
     return new Intl.DateTimeFormat(locale, { timeZone, ...options }).format(date);
 };
 exports.formatDate = formatDate;
+/**
+ * `formatMoney` split into currency and number, so a template can align the
+ * currency and the amount separately. Falls back to the whole
+ * `formatMoney` text as `amount`.
+ */
+const formatMoneyParts = ({ amount, currencyCode }, { locale = exports.DEFAULT_FORMAT_LOCALE } = {}) => {
+    const numericAmount = Number(amount);
+    const fallback = {
+        currency: "",
+        amount: (0, exports.formatMoney)({ amount, currencyCode }, { locale }),
+    };
+    if (!Number.isFinite(numericAmount)) {
+        return fallback;
+    }
+    try {
+        const parts = new Intl.NumberFormat(locale, {
+            currency: currencyCode.toUpperCase(),
+            style: "currency",
+        }).formatToParts(numericAmount);
+        return {
+            currency: parts
+                .filter((part) => part.type === "currency")
+                .map((part) => part.value)
+                .join(""),
+            amount: parts
+                .filter((part) => part.type !== "currency" &&
+                !(part.type === "literal" && !part.value.trim()))
+                .map((part) => part.value)
+                .join(""),
+        };
+    }
+    catch {
+        return fallback;
+    }
+};
+exports.formatMoneyParts = formatMoneyParts;
+/** A document date as "01.01.2027" in the given time zone. */
+const formatDocumentDate = (value, timeZone) => (0, exports.formatDate)(value, {
+    timeZone,
+    options: { day: "2-digit", month: "2-digit", year: "numeric" },
+});
+exports.formatDocumentDate = formatDocumentDate;

package/dist/documents/templates/html-factory.d.ts

@@ -1,11 +1,15 @@
 import type { DocumentHtmlFactory } from "../types";
+import { type DocumentTheme } from "./layout";
 /**
  * The plugin's default document markup (German, locale de-AT). The legal
  * sender comes with every render input (`input.merchant`, the base plugin's
  * shop master data). `timeZone` is the IANA time zone in which printed dates
  * are shown; the plugin passes its resolved `numbering.timeZone` so the date
- * on a document matches the period its number was allocated in.
+ * on a document matches the period its number was allocated in. `theme`
+ * adds a project's CSS and page background (watermark) on top of the default
+ * look; the logo comes from the Documents settings (`input.settings`).
  */
-export declare const createDefaultDocumentHtmlFactory: ({ timeZone, }: {
+export declare const createDefaultDocumentHtmlFactory: ({ timeZone, theme, }: {
     timeZone: string;
+    theme?: DocumentTheme;
 }) => DocumentHtmlFactory;

package/dist/documents/templates/html-factory.js

@@ -10,9 +10,11 @@ const packing_list_1 = require("./packing-list");
  * sender comes with every render input (`input.merchant`, the base plugin's
  * shop master data). `timeZone` is the IANA time zone in which printed dates
  * are shown; the plugin passes its resolved `numbering.timeZone` so the date
- * on a document matches the period its number was allocated in.
+ * on a document matches the period its number was allocated in. `theme`
+ * adds a project's CSS and page background (watermark) on top of the default
+ * look; the logo comes from the Documents settings (`input.settings`).
  */
-const createDefaultDocumentHtmlFactory = ({ timeZone, }) => {
+const createDefaultDocumentHtmlFactory = ({ timeZone, theme, }) => {
     return (input) => {
         const kind = input.document.kind;
         switch (kind) {
@@ -20,12 +22,12 @@ const createDefaultDocumentHtmlFactory = ({ timeZone, }) => {
             case "cancellation":
             case "credit_note":
                 if ("totals" in input) {
-                    return (0, financial_document_1.renderFinancialDocument)(input, (0, layout_1.createDocumentLayout)(input.merchant, true), timeZone);
+                    return (0, financial_document_1.renderFinancialDocument)(input, (0, layout_1.createDocumentLayout)(input.merchant, input.settings, true, theme), timeZone);
                 }
                 break;
             case "packing_list":
                 if ("fulfillment" in input) {
-                    return (0, packing_list_1.renderPackingList)(input, (0, layout_1.createDocumentLayout)(input.merchant, false), timeZone);
+                    return (0, packing_list_1.renderPackingList)(input, (0, layout_1.createDocumentLayout)(input.merchant, input.settings, false, theme), timeZone);
                 }
                 break;
             default: {

package/dist/documents/templates/html-utils.d.ts

@@ -1,2 +1,8 @@
+import type { DocumentMoney } from "../types";
 export declare const escapeHtml: (value: string | number | null | undefined) => string;
 export declare const formatOrderReference: (displayId: number | null) => string;
+/**
+ * An amount as `<span class="money">` with separate currency and amount
+ * spans; `amount` overrides the money's own amount (e.g. a negated value).
+ */
+export declare const renderMoney: (money: DocumentMoney, amount?: string) => string;

package/dist/documents/templates/html-utils.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatOrderReference = exports.escapeHtml = void 0;
+exports.renderMoney = exports.formatOrderReference = exports.escapeHtml = void 0;
+const format_1 = require("./format");
 const escapeHtml = (value) => String(value ?? "")
     .replaceAll("&", "&")
     .replaceAll("<", "&lt;")
@@ -10,3 +11,12 @@ const escapeHtml = (value) => String(value ?? "")
 exports.escapeHtml = escapeHtml;
 const formatOrderReference = (displayId) => displayId === null ? "-" : `#${displayId}`;
 exports.formatOrderReference = formatOrderReference;
+/**
+ * An amount as `<span class="money">` with separate currency and amount
+ * spans; `amount` overrides the money's own amount (e.g. a negated value).
+ */
+const renderMoney = (money, amount = money.amount) => {
+    const parts = (0, format_1.formatMoneyParts)({ amount, currencyCode: money.currency_code });
+    return `<span class="money"><span class="currency">${(0, exports.escapeHtml)(parts.currency)}</span> <span class="amount">${(0, exports.escapeHtml)(parts.amount)}</span></span>`;
+};
+exports.renderMoney = renderMoney;

package/dist/documents/templates/layout.d.ts

@@ -1,4 +1,19 @@
-import type { DocumentMerchant } from "../types";
+import type { DocumentRenderSettings, DocumentMerchant } from "../types";
+/**
+ * Shop-specific look on top of the default markup. A project passes it to
+ * `createDefaultDocumentHtmlFactory` from its own `htmlFactory`, so it keeps
+ * the plugin's content and changes only the appearance.
+ */
+export type DocumentTheme = {
+    /**
+     * CSS appended after the default stylesheet; later rules win. A
+     * full-page image such as a watermark belongs in `@page { background }`:
+     * it covers the whole sheet on every page, while Chromium clips fixed
+     * elements at the page margin and sizes an inline `<svg>` in them wrongly
+     * from the second page on.
+     */
+    readonly stylesheet?: string;
+};
 export type DocumentLayoutInput = {
     readonly body: string;
     readonly documentTitle: string;
@@ -8,10 +23,13 @@ export type DocumentLayoutInput = {
     }[];
     readonly number: string;
     readonly pageTitle: string;
+    /** Escaped recipient address markup; `null` leaves the block empty. */
+    readonly recipient: string | null;
 };
 export type DocumentLayout = (input: DocumentLayoutInput) => string;
+export declare const formatCountryName: (countryCode: string) => string;
 /**
  * `includeLegalDetails` adds UID, company register, contact and bank details
- * to the footer (financial documents); packing lists show only the name.
+ * to the footer (financial documents); packing lists show only the sender.
  */
-export declare const createDocumentLayout: (merchant: DocumentMerchant, includeLegalDetails: boolean) => DocumentLayout;
+export declare const createDocumentLayout: (merchant: DocumentMerchant, settings: DocumentRenderSettings, includeLegalDetails: boolean, theme?: DocumentTheme) => DocumentLayout;

package/dist/documents/templates/layout.js

@@ -1,96 +1,141 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createDocumentLayout = void 0;
+exports.createDocumentLayout = exports.formatCountryName = void 0;
 const html_utils_1 = require("./html-utils");
 const formatCountryName = (countryCode) => new Intl.DisplayNames("de", { type: "region" }).of(countryCode.toUpperCase()) ?? countryCode.toUpperCase();
-const renderMerchantAddress = (merchant) => [
-    merchant.address_line1,
-    merchant.address_line2,
-    [merchant.postal_code, merchant.city].join(" "),
-    formatCountryName(merchant.country_code),
-]
-    .filter((part) => Boolean(part))
+exports.formatCountryName = formatCountryName;
+const joinLines = (lines) => lines
+    .filter((line) => Boolean(line))
     .map(html_utils_1.escapeHtml)
     .join("<br />");
-/** Legal footer: name, UID, company register, contact and bank details that are set. */
+const renderFooterColumn = (heading, lines) => {
+    const content = joinLines(lines);
+    if (!content) {
+        return "";
+    }
+    const title = heading
+        ? `<div class="footer-heading">${(0, html_utils_1.escapeHtml)(heading)}</div>`
+        : "";
+    return `<div class="footer-column">${title}${content}</div>`;
+};
+/**
+ * Legal footer in three columns: sender with UID and company register,
+ * contact, bank. Packing lists (`includeLegalDetails: false`) show only the
+ * sender's name and address.
+ */
 const renderMerchantFooter = (merchant, includeLegalDetails) => {
+    const sender = `<div class="footer-column"><strong>${(0, html_utils_1.escapeHtml)(merchant.legal_name)}</strong><br />${joinLines([
+        merchant.address_line1,
+        merchant.address_line2,
+        `${merchant.postal_code} ${merchant.city}`,
+        (0, exports.formatCountryName)(merchant.country_code),
+        ...(includeLegalDetails
+            ? [
+                merchant.vat_number ? `UID: ${merchant.vat_number}` : null,
+                merchant.company_register_number
+                    ? `Firmenbuchnummer: ${merchant.company_register_number}`
+                    : null,
+                merchant.company_register_court
+                    ? `Firmenbuchgericht: ${merchant.company_register_court}`
+                    : null,
+            ]
+            : []),
+    ])}</div>`;
     if (!includeLegalDetails) {
-        return (0, html_utils_1.escapeHtml)(merchant.legal_name);
+        return sender;
     }
-    const register = [
-        merchant.company_register_number
-            ? `Firmenbuchnummer: ${merchant.company_register_number}`
-            : null,
-        merchant.company_register_court
-            ? `Firmenbuchgericht: ${merchant.company_register_court}`
-            : null,
-    ];
-    const lines = [
-        [
-            merchant.legal_name,
-            merchant.vat_number ? `UID: ${merchant.vat_number}` : null,
-            ...register,
-        ],
-        [merchant.email, merchant.phone, merchant.website],
-        [
-            merchant.iban ? `IBAN: ${merchant.iban}` : null,
+    return [
+        sender,
+        renderFooterColumn("Kontakt", [
+            merchant.phone,
+            merchant.email,
+            merchant.website,
+        ]),
+        // The heading names the IBAN; only the BIC keeps its label.
+        renderFooterColumn("Bankverbindung", [
+            merchant.iban,
             merchant.bic ? `BIC: ${merchant.bic}` : null,
-        ],
-    ];
-    return lines
-        .map((parts) => parts
-        .filter((part) => Boolean(part))
-        .map(html_utils_1.escapeHtml)
-        .join(" · "))
-        .filter(Boolean)
-        .join("<br />");
+        ]),
+    ].join("");
 };
+const renderLetterhead = (merchant, settings) => settings.logo_src
+    ? `<img class="logo" src="${(0, html_utils_1.escapeHtml)(settings.logo_src)}" alt="${(0, html_utils_1.escapeHtml)(merchant.legal_name)}" />`
+    : `<div class="logo-text">${(0, html_utils_1.escapeHtml)(merchant.legal_name)}</div>`;
 const renderMetadata = (metadata) => metadata
-    .map(({ label, value }) => `<div><strong>${(0, html_utils_1.escapeHtml)(label)}:</strong> ${(0, html_utils_1.escapeHtml)(value)}</div>`)
+    .map(({ label, value }) => `<tr><th scope="row">${(0, html_utils_1.escapeHtml)(label)}</th><td>${(0, html_utils_1.escapeHtml)(value)}</td></tr>`)
     .join("");
 /**
- * `includeLegalDetails` adds UID, company register, contact and bank details
- * to the footer (financial documents); packing lists show only the name.
+ * A4 with only a bottom page margin, which holds the page number
+ * (`@bottom-right`; `counter(pages)` works only in page margin boxes). `.page`
+ * carries the other margins and repeats them on every printed page
+ * (`box-decoration-break: clone`); the fixed footer is positioned in the page
+ * area, `--footer-height` reserves its space at the bottom of each page.
  */
-const createDocumentLayout = (merchant, includeLegalDetails) => ({ body, documentTitle, metadata, number, pageTitle }) => `<!doctype html>
-<html lang="de">
-  <head>
-    <meta charset="utf-8" />
-    <title>${(0, html_utils_1.escapeHtml)(pageTitle)} ${(0, html_utils_1.escapeHtml)(number)}</title>
-    <style>
-      @page { margin: 18mm; }
-      body { color: #1f2937; font-family: Arial, sans-serif; font-size: 11px; line-height: 1.45; }
-      h1 { font-size: 24px; margin: 0 0 6px; }
-      h2 { break-after: avoid; font-size: 12px; margin: 22px 0 6px; page-break-after: avoid; text-transform: uppercase; }
-      .header { border-bottom: 2px solid #111827; display: flex; gap: 32px; justify-content: space-between; padding-bottom: 16px; }
-      .document-metadata { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 18px 0 22px; }
-      .document-metadata div { min-width: 180px; }
-      .muted, .sku, .batch { color: #6b7280; }
-      .batch, .packing-batch { font-size: 10px; margin-top: 2px; }
+const DEFAULT_STYLESHEET = `
+      @page { size: A4; margin: 0 0 8mm 0; @bottom-right { color: #6b7280; content: "Seite " counter(page) " von " counter(pages); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 7.5pt; padding-right: 20mm; vertical-align: top; } }
+      :root { --accent: #111827; --text: #1f2937; --muted: #6b7280; --line: #d1d5db; --table-head: #f3f4f6; --page-x: 20mm; --page-top: 18mm; --footer-height: 30mm; }
+      * { box-sizing: border-box; }
+      html, body { margin: 0; padding: 0; }
+      body { color: var(--text); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 10pt; line-height: 1.4; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+      .page { -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: var(--page-top) var(--page-x) calc(var(--footer-height) + 8mm); }
+      .letterhead { margin-bottom: 14mm; min-height: 16mm; }
+      .logo { display: block; height: 22mm; max-width: 90mm; object-fit: contain; object-position: left center; width: auto; }
+      .logo-text { color: var(--accent); font-size: 20pt; font-weight: 700; letter-spacing: 0.02em; }
+      .document-head { break-inside: avoid; display: flex; gap: 12mm; justify-content: space-between; margin-bottom: 14mm; page-break-inside: avoid; }
+      .recipient { flex: 1 1 0; font-style: normal; padding-top: 9mm; }
+      .document-info { flex: 0 0 78mm; }
+      h1 { color: var(--accent); font-size: 16pt; font-weight: 400; letter-spacing: 0.08em; margin: 0 0 3mm; text-transform: uppercase; }
+      h2 { break-after: avoid; font-size: 10pt; margin: 8mm 0 2mm; page-break-after: avoid; }
+      .document-metadata { border-collapse: collapse; width: 100%; }
+      .document-metadata th, .document-metadata td { border: 0; font-weight: 400; padding: 0; text-align: left; vertical-align: top; }
+      .document-metadata td { text-align: right; }
+      .muted, .sku, .batch { color: var(--muted); }
+      .batch, .packing-batch { font-size: 8pt; margin-top: 1mm; }
       .packing-batch { display: flex; gap: 12px; justify-content: space-between; }
       table { border-collapse: collapse; page-break-inside: auto; width: 100%; }
       thead { display: table-header-group; }
       tfoot { display: table-footer-group; }
       tbody { page-break-inside: auto; }
       tr { break-inside: avoid; page-break-inside: avoid; }
-      th { background: #f3f4f6; font-size: 10px; text-align: left; text-transform: uppercase; }
-      th, td { border-bottom: 1px solid #d1d5db; padding: 8px 6px; vertical-align: top; }
+      .items th { background: var(--table-head); font-weight: 700; text-align: left; }
+      .items th.number { text-align: right; }
+      .items th, .items td { padding: 2.5mm 2mm; vertical-align: top; }
+      .items tbody.lines td { border-bottom: 1px solid var(--line); }
       .number { text-align: right; white-space: nowrap; }
-      .recipient, .tax-compliance, .totals { break-inside: avoid; page-break-inside: avoid; }
-      .totals { margin-left: auto; margin-top: 16px; width: 260px; }
-      .totals td { border: 0; padding: 3px 0; }
-      .totals tr:last-child td { border-top: 2px solid #111827; font-size: 14px; font-weight: 700; padding-top: 7px; }
-      footer { border-top: 1px solid #d1d5db; break-inside: avoid; color: #6b7280; font-size: 9px; margin-top: 28px; page-break-inside: avoid; padding-top: 10px; }
-    </style>
+      .money { white-space: nowrap; }
+      .items tbody.totals td { padding-bottom: 1.5mm; padding-top: 1.5mm; }
+      .items tbody.totals tr:first-child td { padding-top: 3mm; }
+      .items tbody.totals tr.grand-total td.label, .items tbody.totals tr.grand-total td.number { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); font-weight: 700; padding-bottom: 2mm; padding-top: 2mm; }
+      .payment-terms { margin-top: 10mm; white-space: pre-line; }
+      .recipient, .tax-compliance, .payment-terms, .items tbody.totals { break-inside: avoid; page-break-inside: avoid; }
+      .page-footer { align-items: flex-start; bottom: 4mm; color: var(--text); display: flex; font-size: 8pt; gap: 8mm; left: var(--page-x); line-height: 1.35; position: fixed; right: var(--page-x); }
+      .footer-column { flex: 1 1 0; }
+      .footer-heading { color: var(--muted); }
+`;
+/**
+ * `includeLegalDetails` adds UID, company register, contact and bank details
+ * to the footer (financial documents); packing lists show only the sender.
+ */
+const createDocumentLayout = (merchant, settings, includeLegalDetails, theme = {}) => ({ body, documentTitle, metadata, number, pageTitle, recipient }) => `<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8" />
+    <title>${(0, html_utils_1.escapeHtml)(pageTitle)} ${(0, html_utils_1.escapeHtml)(number)}</title>
+    <style>${DEFAULT_STYLESHEET}${theme.stylesheet ?? ""}</style>
   </head>
   <body>
-    <section class="header">
-      <div><h1>${(0, html_utils_1.escapeHtml)(documentTitle)}</h1><div class="muted">${(0, html_utils_1.escapeHtml)(number)}</div></div>
-      <div><strong>${(0, html_utils_1.escapeHtml)(merchant.legal_name)}</strong><br />${renderMerchantAddress(merchant)}</div>
-    </section>
-    <section class="document-metadata">${renderMetadata(metadata)}</section>
-    ${body}
-    <footer>${renderMerchantFooter(merchant, includeLegalDetails)}</footer>
+    <footer class="page-footer">${renderMerchantFooter(merchant, includeLegalDetails)}</footer>
+    <main class="page">
+      <header class="letterhead">${renderLetterhead(merchant, settings)}</header>
+      <section class="document-head">
+        <address class="recipient">${recipient ?? ""}</address>
+        <div class="document-info">
+          <h1>${(0, html_utils_1.escapeHtml)(documentTitle)}</h1>
+          <table class="document-metadata"><tbody>${renderMetadata(metadata)}</tbody></table>
+        </div>
+      </section>
+      ${body}
+    </main>
   </body>
 </html>`;
 exports.createDocumentLayout = createDocumentLayout;