@endora-commerce/mod-invoices 0.0.0-stage → 0.100.0

package/dist/admin/templates/invoice-puck-config.js

@@ -0,0 +1,733 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createColorField, definePageBuilderComponent } from '@endora-commerce/page-builder-core';
+import { createImageAssetField, createImageSourceField, createImageUrlField, } from '@endora-commerce/page-builder-admin';
+import { fetchAssetDetail } from '@endora-commerce/admin-kit/components';
+import { toAbsoluteAssetUrl } from '@endora-commerce/admin-kit/lib';
+/**
+ * Dedicated Puck config for invoice PDF templates (feature 047, US6). Kept in
+ * the admin module (not the shared cms-components package) because invoice
+ * authoring is admin-only. The real PDF is produced server-side by pdfmake
+ * (`backend/.../pdf-components/sections.ts`); these on-canvas renderers mirror
+ * those section layouts against a representative sample invoice so the author
+ * sees the actual content of each dropped block instead of a placeholder.
+ * Component names + fields MUST match the backend tree mapper / descriptor.
+ */
+/**
+ * Representative sample invoice — a frontend mirror of the backend
+ * `sampleInvoiceDetail()` used by the `/preview` endpoint, so the on-canvas
+ * content matches the rendered PDF.
+ */
+const sampleInvoice = {
+    kind: 'invoice',
+    number: 'INV-2026-0042',
+    currency: 'USD',
+    issuedAt: '2026-05-04',
+    saleDate: '2026-05-04',
+    paymentDueDate: '2026-05-18',
+    paymentMethod: 'Bank transfer',
+    netTotal: 2000,
+    taxTotal: 400,
+    grossTotal: 2400,
+    paidTotal: 0,
+    amountDue: 2400,
+    amountInWords: 'two thousand four hundred 00/100',
+    ksefReferenceNumber: null,
+    ksefProcessedAt: null,
+    lines: [
+        {
+            ordinal: 1,
+            name: 'Cloud hosting — annual plan',
+            unit: 'ea',
+            quantity: 1,
+            unitNetPrice: 500,
+            taxRate: 0.2,
+            netValue: 500,
+            grossValue: 600,
+        },
+        {
+            ordinal: 2,
+            name: 'Professional services — onboarding',
+            unit: 'hr',
+            quantity: 10,
+            unitNetPrice: 150,
+            taxRate: 0.2,
+            netValue: 1500,
+            grossValue: 1800,
+        },
+    ],
+    vatSummary: [{ taxRate: 0.2, netTotal: 2000, vatAmount: 400, grossTotal: 2400 }],
+    seller: {
+        legalName: 'Acme Supplies Ltd.',
+        addressLine1: '100 Market Street, Suite 4',
+        addressLine2: '',
+        postalCode: '10001',
+        city: 'New York',
+        taxId: '12-3456789',
+        bankName: 'Example Bank',
+        bankAccount: 'US64 EXAMPLE 0000 0000 0000 00',
+        swift: 'EXAMPUS33',
+    },
+    buyer: {
+        name: 'Globex Trading Co.',
+        taxId: '98-7654321',
+        addressLine1: '250 Commerce Avenue',
+        postalCode: '60601',
+        city: 'Chicago',
+    },
+};
+const TITLES = {
+    invoice: 'Invoice',
+};
+function money(n) {
+    return n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+}
+function pct(rate) {
+    return `${Math.round(rate * 100)}%`;
+}
+/** Interpolate `{{var invoice.x}}` / `{{var seller.x}}` tokens (mirrors backend). */
+function interpolate(text) {
+    const inv = sampleInvoice;
+    const map = {
+        'invoice.number': inv.number,
+        'invoice.total': money(inv.grossTotal),
+        'invoice.currency': inv.currency,
+        'invoice.issuedAt': inv.issuedAt,
+        'invoice.saleDate': inv.saleDate,
+        'invoice.amountDue': money(inv.amountDue),
+        'buyer.name': inv.buyer.name,
+        'seller.legalName': inv.seller.legalName,
+        'seller.taxId': inv.seller.taxId,
+    };
+    return text.replace(/\{\{\s*var\s+([\w.]+)\s*\}\}/g, (_m, key) => map[key] ?? '');
+}
+const YES_NO = [
+    { label: 'Yes', value: true },
+    { label: 'No', value: false },
+];
+const ALIGN_OPTIONS = [
+    { label: 'Left', value: 'left' },
+    { label: 'Center', value: 'center' },
+    { label: 'Right', value: 'right' },
+];
+function radio(label) {
+    return { type: 'radio', label, options: YES_NO };
+}
+function alignField(label = 'Align') {
+    return { type: 'select', label, options: ALIGN_OPTIONS };
+}
+function asBool(v, fallback) {
+    if (typeof v === 'boolean')
+        return v;
+    if (v === 'true')
+        return true;
+    if (v === 'false')
+        return false;
+    return fallback;
+}
+function asNum(v, fallback) {
+    return typeof v === 'number' && Number.isFinite(v) ? v : fallback;
+}
+function asAlign(v, fallback = 'left') {
+    return v === 'center' || v === 'right' || v === 'left' ? v : fallback;
+}
+function asColor(v, fallback) {
+    return typeof v === 'string' && v.trim() ? v : fallback;
+}
+const docStyle = {
+    fontFamily: 'system-ui, sans-serif',
+    fontSize: 12,
+    color: '#0f172a',
+    background: '#ffffff',
+    margin: '6px 0',
+};
+const thStyle = {
+    fontWeight: 600,
+    fontSize: 10,
+    textAlign: 'left',
+    borderBottom: '1px solid #cbd5e1',
+    padding: '3px 6px',
+    whiteSpace: 'nowrap',
+};
+const tdStyle = {
+    fontSize: 10,
+    borderBottom: '1px solid #e2e8f0',
+    padding: '3px 6px',
+};
+function Section({ children, marginTop, marginBottom, style, }) {
+    return (_jsx("div", { style: {
+            ...docStyle,
+            marginTop: marginTop ?? 6,
+            marginBottom: marginBottom ?? 6,
+            ...style,
+        }, children: children }));
+}
+function invoiceSection(config) {
+    return definePageBuilderComponent({ ...config, contexts: ['invoice'] });
+}
+const InvoiceHeader = invoiceSection({
+    label: 'Header (number + dates)',
+    fields: {
+        titleSize: { type: 'number', label: 'Title size' },
+        titleColor: createColorField({ label: 'Title color' }),
+        titleBold: radio('Title bold'),
+        align: alignField(),
+        showIssuedAt: radio('Show issue date'),
+        showSaleDate: radio('Show sale date'),
+        showPaymentDue: radio('Show payment due'),
+        showPaymentMethod: radio('Show payment method'),
+        labelIssuedAt: { type: 'text', label: 'Issue date label' },
+        labelSaleDate: { type: 'text', label: 'Sale date label' },
+        labelPaymentDue: { type: 'text', label: 'Payment due label' },
+        labelPaymentMethod: { type: 'text', label: 'Payment method label' },
+        labelKsefNumber: { type: 'text', label: 'KSeF number label' },
+        marginTop: { type: 'number', label: 'Margin top (px)' },
+        marginBottom: { type: 'number', label: 'Margin bottom (px)' },
+    },
+    defaultProps: {
+        titleSize: 14,
+        titleColor: '#0f172a',
+        titleBold: true,
+        align: 'left',
+        showIssuedAt: true,
+        showSaleDate: true,
+        showPaymentDue: true,
+        showPaymentMethod: true,
+        labelIssuedAt: 'Issue date',
+        labelSaleDate: 'Sale date',
+        labelPaymentDue: 'Payment due',
+        labelPaymentMethod: 'Payment method',
+        marginTop: 0,
+        marginBottom: 12,
+    },
+    render: (props) => {
+        const inv = sampleInvoice;
+        const align = asAlign(props.align, 'left');
+        const titleSize = asNum(props.titleSize, 14);
+        const titleBold = asBool(props.titleBold, true);
+        const titleColor = asColor(props.titleColor, '#0f172a');
+        return (_jsxs(Section, { marginTop: asNum(props.marginTop, 0), marginBottom: asNum(props.marginBottom, 12), children: [_jsxs("div", { style: {
+                        fontSize: titleSize,
+                        fontWeight: titleBold ? 700 : 400,
+                        color: titleColor,
+                        textAlign: align,
+                        marginBottom: 6,
+                    }, children: [TITLES[inv.kind], " No. ", inv.number] }), asBool(props.showIssuedAt, true) ? (_jsxs("div", { style: { textAlign: align }, children: [props.labelIssuedAt || 'Issue date', ": ", inv.issuedAt] })) : null, asBool(props.showSaleDate, true) ? (_jsxs("div", { style: { textAlign: align }, children: [props.labelSaleDate || 'Sale date', ": ", inv.saleDate] })) : null, asBool(props.showPaymentDue, true) ? (_jsxs("div", { style: { textAlign: align }, children: [props.labelPaymentDue || 'Payment due', ": ", inv.paymentDueDate] })) : null, asBool(props.showPaymentMethod, true) ? (_jsxs("div", { style: { textAlign: align }, children: [props.labelPaymentMethod || 'Payment method', ": ", inv.paymentMethod] })) : null] }));
+    },
+});
+const InvoiceParties = invoiceSection({
+    label: 'Seller & buyer',
+    fields: {
+        sellerLabel: { type: 'text', label: 'Seller label' },
+        buyerLabel: { type: 'text', label: 'Buyer label' },
+        showSellerBank: radio('Show seller bank'),
+        showSellerSwift: radio('Show seller SWIFT'),
+        showBuyerTaxId: radio('Show buyer tax ID'),
+        labelFontSize: { type: 'number', label: 'Label font size' },
+        bodyFontSize: { type: 'number', label: 'Body font size' },
+        columnGap: { type: 'number', label: 'Column gap (px)' },
+        sellerWidthPercent: { type: 'number', label: 'Seller width %' },
+        marginTop: { type: 'number', label: 'Margin top (px)' },
+        marginBottom: { type: 'number', label: 'Margin bottom (px)' },
+    },
+    defaultProps: {
+        sellerLabel: 'Seller',
+        buyerLabel: 'Buyer',
+        showSellerBank: true,
+        showSellerSwift: true,
+        showBuyerTaxId: true,
+        labelFontSize: 10,
+        bodyFontSize: 10,
+        columnGap: 16,
+        sellerWidthPercent: 50,
+        marginTop: 0,
+        marginBottom: 16,
+    },
+    render: (props) => {
+        const { seller, buyer } = sampleInvoice;
+        const labelFs = asNum(props.labelFontSize, 10);
+        const bodyFs = asNum(props.bodyFontSize, 10);
+        const sellerPct = Math.min(70, Math.max(30, asNum(props.sellerWidthPercent, 50)));
+        const gap = asNum(props.columnGap, 16);
+        const labelStyle = { fontWeight: 700, fontSize: labelFs, marginBottom: 2 };
+        const bodyStyle = { fontSize: bodyFs };
+        return (_jsx(Section, { marginTop: asNum(props.marginTop, 0), marginBottom: asNum(props.marginBottom, 16), children: _jsxs("div", { style: { display: 'flex', gap }, children: [_jsxs("div", { style: { flex: `0 0 ${sellerPct}%` }, children: [_jsx("div", { style: labelStyle, children: props.sellerLabel || 'Seller' }), _jsx("div", { style: bodyStyle, children: seller.legalName }), _jsx("div", { style: bodyStyle, children: seller.addressLine1 }), seller.addressLine2 ? _jsx("div", { style: bodyStyle, children: seller.addressLine2 }) : null, _jsxs("div", { style: bodyStyle, children: [seller.postalCode, " ", seller.city] }), _jsxs("div", { style: bodyStyle, children: ["Tax ID: ", seller.taxId] }), asBool(props.showSellerBank, true) && seller.bankAccount ? (_jsxs("div", { style: bodyStyle, children: [seller.bankName, " ", seller.bankAccount] })) : null, asBool(props.showSellerSwift, true) && seller.swift ? (_jsxs("div", { style: bodyStyle, children: ["SWIFT: ", seller.swift] })) : null] }), _jsxs("div", { style: { flex: `1 1 ${100 - sellerPct}%` }, children: [_jsx("div", { style: labelStyle, children: props.buyerLabel || 'Buyer' }), _jsx("div", { style: bodyStyle, children: buyer.name }), _jsx("div", { style: bodyStyle, children: buyer.addressLine1 }), _jsxs("div", { style: bodyStyle, children: [buyer.postalCode, " ", buyer.city] }), asBool(props.showBuyerTaxId, true) && buyer.taxId ? (_jsxs("div", { style: bodyStyle, children: ["Tax ID: ", buyer.taxId] })) : null] })] }) }));
+    },
+});
+const InvoiceLineItems = invoiceSection({
+    label: 'Line items table',
+    fields: {
+        fontSize: { type: 'number', label: 'Font size' },
+        headerBold: radio('Header bold'),
+        headerBackground: createColorField({ label: 'Header background' }),
+        headerColor: createColorField({ label: 'Header text color' }),
+        borderColor: createColorField({ label: 'Border color' }),
+        zebra: radio('Zebra rows'),
+        showUnit: radio('Show unit'),
+        showQty: radio('Show quantity'),
+        showUnitNet: radio('Show unit net price'),
+        showTaxRate: radio('Show tax rate'),
+        showNet: radio('Show net value'),
+        showGross: radio('Show gross value'),
+        marginTop: { type: 'number', label: 'Margin top (px)' },
+        marginBottom: { type: 'number', label: 'Margin bottom (px)' },
+    },
+    defaultProps: {
+        fontSize: 8,
+        headerBold: true,
+        headerBackground: '',
+        headerColor: '',
+        borderColor: '#cbd5e1',
+        zebra: false,
+        showUnit: true,
+        showQty: true,
+        showUnitNet: true,
+        showTaxRate: true,
+        showNet: true,
+        showGross: true,
+        marginTop: 0,
+        marginBottom: 12,
+    },
+    render: (props) => {
+        const fontSize = asNum(props.fontSize, 8);
+        const headerBold = asBool(props.headerBold, true);
+        const headerBg = asColor(props.headerBackground);
+        const headerColor = asColor(props.headerColor);
+        const borderColor = asColor(props.borderColor, '#cbd5e1') ?? '#cbd5e1';
+        const zebra = asBool(props.zebra, false);
+        const showUnit = asBool(props.showUnit, true);
+        const showQty = asBool(props.showQty, true);
+        const showUnitNet = asBool(props.showUnitNet, true);
+        const showTaxRate = asBool(props.showTaxRate, true);
+        const showNet = asBool(props.showNet, true);
+        const showGross = asBool(props.showGross, true);
+        const cols = [
+            { key: 'lp', label: '#' },
+            { key: 'name', label: 'Description' },
+        ];
+        if (showUnit)
+            cols.push({ key: 'unit', label: 'Unit' });
+        if (showQty)
+            cols.push({ key: 'qty', label: 'Qty', right: true });
+        if (showUnitNet)
+            cols.push({ key: 'unitNet', label: 'Unit net', right: true });
+        if (showTaxRate)
+            cols.push({ key: 'tax', label: 'Tax', right: true });
+        if (showNet)
+            cols.push({ key: 'net', label: 'Net', right: true });
+        if (showGross)
+            cols.push({ key: 'gross', label: 'Gross', right: true });
+        const head = {
+            ...thStyle,
+            fontSize,
+            fontWeight: headerBold ? 600 : 400,
+            color: headerColor,
+            background: headerBg,
+            borderBottom: `1px solid ${borderColor}`,
+            borderRight: `1px solid ${borderColor}`,
+        };
+        const cell = (right, fill) => ({
+            ...tdStyle,
+            fontSize,
+            textAlign: right ? 'right' : 'left',
+            background: fill,
+            borderBottom: `1px solid ${borderColor}`,
+            borderRight: `1px solid ${borderColor}`,
+        });
+        return (_jsx(Section, { marginTop: asNum(props.marginTop, 0), marginBottom: asNum(props.marginBottom, 12), children: _jsxs("table", { style: { width: '100%', borderCollapse: 'collapse', border: `1px solid ${borderColor}` }, children: [_jsx("thead", { children: _jsx("tr", { children: cols.map((c) => (_jsx("th", { style: { ...head, textAlign: c.right ? 'right' : 'left' }, children: c.label }, c.key))) }) }), _jsx("tbody", { children: sampleInvoice.lines.map((l, i) => {
+                            const fill = zebra && i % 2 === 1 ? '#f8fafc' : undefined;
+                            const values = {
+                                lp: String(l.ordinal),
+                                name: l.name,
+                                unit: l.unit,
+                                qty: String(l.quantity),
+                                unitNet: money(l.unitNetPrice),
+                                tax: pct(l.taxRate),
+                                net: money(l.netValue),
+                                gross: money(l.grossValue),
+                            };
+                            return (_jsx("tr", { children: cols.map((c) => (_jsx("td", { style: cell(c.right, fill), children: values[c.key] }, c.key))) }, l.ordinal));
+                        }) })] }) }));
+    },
+});
+const InvoiceVatSummary = invoiceSection({
+    label: 'VAT summary',
+    fields: {
+        fontSize: { type: 'number', label: 'Font size' },
+        headerBold: radio('Header bold'),
+        headerBackground: createColorField({ label: 'Header background' }),
+        headerColor: createColorField({ label: 'Header text color' }),
+        borderColor: createColorField({ label: 'Border color' }),
+        showTotalRow: radio('Show total row'),
+        totalLabel: { type: 'text', label: 'Total row label' },
+        marginTop: { type: 'number', label: 'Margin top (px)' },
+        marginBottom: { type: 'number', label: 'Margin bottom (px)' },
+    },
+    defaultProps: {
+        fontSize: 8,
+        headerBold: true,
+        headerBackground: '',
+        headerColor: '',
+        borderColor: '#cbd5e1',
+        showTotalRow: true,
+        totalLabel: 'Total',
+        marginTop: 0,
+        marginBottom: 12,
+    },
+    render: (props) => {
+        const inv = sampleInvoice;
+        const fontSize = asNum(props.fontSize, 8);
+        const headerBold = asBool(props.headerBold, true);
+        const headerBg = asColor(props.headerBackground);
+        const headerColor = asColor(props.headerColor);
+        const borderColor = asColor(props.borderColor, '#cbd5e1') ?? '#cbd5e1';
+        const headers = ['Tax rate', 'Net', 'VAT', 'Gross'];
+        const head = (i) => ({
+            ...thStyle,
+            fontSize,
+            fontWeight: headerBold ? 600 : 400,
+            color: headerColor,
+            background: headerBg,
+            textAlign: i === 0 ? 'left' : 'right',
+            borderBottom: `1px solid ${borderColor}`,
+            borderRight: `1px solid ${borderColor}`,
+        });
+        const cell = (right, bold) => ({
+            ...tdStyle,
+            fontSize,
+            fontWeight: bold ? 700 : 400,
+            textAlign: right ? 'right' : 'left',
+            borderBottom: `1px solid ${borderColor}`,
+            borderRight: `1px solid ${borderColor}`,
+        });
+        return (_jsx(Section, { marginTop: asNum(props.marginTop, 0), marginBottom: asNum(props.marginBottom, 12), children: _jsxs("table", { style: { width: '100%', borderCollapse: 'collapse', border: `1px solid ${borderColor}` }, children: [_jsx("thead", { children: _jsx("tr", { children: headers.map((h, i) => (_jsx("th", { style: head(i), children: h }, h))) }) }), _jsxs("tbody", { children: [inv.vatSummary.map((v) => (_jsxs("tr", { children: [_jsx("td", { style: cell(), children: pct(v.taxRate) }), _jsx("td", { style: cell(true), children: money(v.netTotal) }), _jsx("td", { style: cell(true), children: money(v.vatAmount) }), _jsx("td", { style: cell(true), children: money(v.grossTotal) })] }, v.taxRate))), asBool(props.showTotalRow, true) ? (_jsxs("tr", { children: [_jsx("td", { style: cell(false, true), children: props.totalLabel || 'Total' }), _jsx("td", { style: cell(true, true), children: money(inv.netTotal) }), _jsx("td", { style: cell(true, true), children: money(inv.taxTotal) }), _jsx("td", { style: cell(true, true), children: money(inv.grossTotal) })] })) : null] })] }) }));
+    },
+});
+const InvoiceTotals = invoiceSection({
+    label: 'Totals & amount in words',
+    fields: {
+        align: alignField(),
+        fontSize: { type: 'number', label: 'Font size' },
+        color: createColorField({ label: 'Text color' }),
+        amountDueColor: createColorField({ label: 'Amount due color' }),
+        amountDueBold: radio('Amount due bold'),
+        amountInWordsItalics: radio('Amount in words italics'),
+        showPaid: radio('Show paid'),
+        showAmountDue: radio('Show amount due'),
+        showGross: radio('Show gross'),
+        showAmountInWords: radio('Show amount in words'),
+        labelPaid: { type: 'text', label: 'Paid label' },
+        labelAmountDue: { type: 'text', label: 'Amount due label' },
+        labelGross: { type: 'text', label: 'Gross label' },
+        labelInWords: { type: 'text', label: 'In words label' },
+        marginTop: { type: 'number', label: 'Margin top (px)' },
+        marginBottom: { type: 'number', label: 'Margin bottom (px)' },
+    },
+    defaultProps: {
+        align: 'right',
+        fontSize: 10,
+        color: '#0f172a',
+        amountDueColor: '',
+        amountDueBold: true,
+        amountInWordsItalics: true,
+        showPaid: true,
+        showAmountDue: true,
+        showGross: true,
+        showAmountInWords: true,
+        labelPaid: 'Paid',
+        labelAmountDue: 'Amount due',
+        labelGross: 'Total',
+        labelInWords: 'In words',
+        marginTop: 0,
+        marginBottom: 16,
+    },
+    render: (props) => {
+        const inv = sampleInvoice;
+        const align = asAlign(props.align, 'right');
+        const fontSize = asNum(props.fontSize, 10);
+        const color = asColor(props.color, '#0f172a');
+        const amountDueColor = asColor(props.amountDueColor) ?? color;
+        return (_jsx(Section, { marginTop: asNum(props.marginTop, 0), marginBottom: asNum(props.marginBottom, 16), children: _jsxs("div", { style: { textAlign: align, fontSize, color }, children: [asBool(props.showPaid, true) ? (_jsxs("div", { children: [props.labelPaid || 'Paid', ": ", money(inv.paidTotal), " ", inv.currency] })) : null, asBool(props.showAmountDue, true) ? (_jsxs("div", { style: {
+                            fontWeight: asBool(props.amountDueBold, true) ? 700 : 400,
+                            color: amountDueColor,
+                        }, children: [props.labelAmountDue || 'Amount due', ": ", money(inv.amountDue), " ", inv.currency] })) : null, asBool(props.showGross, true) ? (_jsxs("div", { children: [props.labelGross || 'Total', ": ", money(inv.grossTotal), " ", inv.currency] })) : null, asBool(props.showAmountInWords, true) ? (_jsxs("div", { style: {
+                            fontStyle: asBool(props.amountInWordsItalics, true) ? 'italic' : 'normal',
+                            marginTop: 6,
+                        }, children: [props.labelInWords || 'In words', ": ", inv.amountInWords, " ", inv.currency] })) : null] }) }));
+    },
+});
+function renderTextBlock(props, defaults) {
+    const align = asAlign(props.align, 'left');
+    const fontSize = asNum(props.fontSize, defaults.fontSize);
+    const color = asColor(props.color, '#0f172a');
+    const raw = typeof props.text === 'string' ? props.text : '';
+    return (_jsxs(Section, { marginTop: asNum(props.marginTop, 0), marginBottom: asNum(props.marginBottom, defaults.marginBottom), children: [asBool(props.showTopDivider, defaults.showTopDivider) ? (_jsx("hr", { style: { border: 0, borderTop: '1px solid #e5e7eb', margin: '0 0 8px' } })) : null, raw ? (_jsx("div", { style: {
+                    whiteSpace: 'pre-wrap',
+                    textAlign: align,
+                    fontSize,
+                    color,
+                    fontWeight: asBool(props.bold, false) ? 700 : 400,
+                    fontStyle: asBool(props.italics, false) ? 'italic' : 'normal',
+                }, children: interpolate(raw) })) : (_jsx("div", { style: { fontSize: 11, color: '#94a3b8', textAlign: align }, children: defaults.emptyHint }))] }));
+}
+const InvoiceNotes = invoiceSection({
+    label: 'Notes (free text)',
+    fields: {
+        text: { type: 'textarea', label: 'Notes text' },
+        align: alignField(),
+        fontSize: { type: 'number', label: 'Font size' },
+        color: createColorField({ label: 'Text color' }),
+        bold: radio('Bold'),
+        italics: radio('Italics'),
+        showTopDivider: radio('Top divider'),
+        marginTop: { type: 'number', label: 'Margin top (px)' },
+        marginBottom: { type: 'number', label: 'Margin bottom (px)' },
+    },
+    defaultProps: {
+        text: '',
+        align: 'left',
+        fontSize: 11,
+        color: '#0f172a',
+        bold: false,
+        italics: false,
+        showTopDivider: false,
+        marginTop: 0,
+        marginBottom: 8,
+    },
+    render: (props) => renderTextBlock(props, {
+        fontSize: 11,
+        showTopDivider: false,
+        marginBottom: 8,
+        emptyHint: `Free text — supports {{var invoice.number}} tokens`,
+    }),
+});
+const InvoiceSpacer = invoiceSection({
+    label: 'Spacer',
+    fields: {
+        height: { type: 'number', label: 'Height (px)' },
+        backgroundColor: createColorField({ label: 'Background color' }),
+    },
+    defaultProps: {
+        height: 16,
+        backgroundColor: '',
+    },
+    render: (props) => {
+        const height = Math.min(120, Math.max(4, asNum(props.height, 16)));
+        const bg = asColor(props.backgroundColor);
+        return (_jsx("div", { style: {
+                height,
+                width: '100%',
+                background: bg ?? 'transparent',
+                margin: '0',
+            }, "aria-hidden": true }));
+    },
+});
+const InvoiceDivider = invoiceSection({
+    label: 'Divider',
+    fields: {
+        thickness: { type: 'number', label: 'Thickness (px)' },
+        color: createColorField({ label: 'Color' }),
+        style: {
+            type: 'select',
+            label: 'Style',
+            options: [
+                { label: 'Solid', value: 'solid' },
+                { label: 'Dashed', value: 'dashed' },
+            ],
+        },
+        widthPercent: { type: 'number', label: 'Width %' },
+        align: alignField(),
+        marginY: { type: 'number', label: 'Vertical margin (px)' },
+    },
+    defaultProps: {
+        thickness: 1,
+        color: '#e5e7eb',
+        style: 'solid',
+        widthPercent: 100,
+        align: 'left',
+        marginY: 8,
+    },
+    render: (props) => {
+        const thickness = Math.min(8, Math.max(1, asNum(props.thickness, 1)));
+        const color = asColor(props.color, '#e5e7eb') ?? '#e5e7eb';
+        const widthPercent = Math.min(100, Math.max(10, asNum(props.widthPercent, 100)));
+        const align = asAlign(props.align, 'left');
+        const marginY = asNum(props.marginY, 8);
+        const dashed = props.style === 'dashed';
+        const justify = align === 'center' ? 'center' : align === 'right' ? 'flex-end' : 'flex-start';
+        return (_jsx("div", { style: { display: 'flex', justifyContent: justify, margin: `${marginY}px 0` }, children: _jsx("div", { style: {
+                    width: `${widthPercent}%`,
+                    borderTop: `${thickness}px ${dashed ? 'dashed' : 'solid'} ${color}`,
+                } }) }));
+    },
+});
+const InvoiceLogo = invoiceSection({
+    label: 'Logo',
+    fields: {
+        imageSource: createImageSourceField(),
+        src: createImageUrlField('Image URL'),
+        assetId: createImageAssetField('Image'),
+        width: { type: 'number', label: 'Width (px)' },
+        maxHeight: { type: 'number', label: 'Max height (px)' },
+        align: alignField(),
+        marginBottom: { type: 'number', label: 'Margin bottom (px)' },
+    },
+    defaultProps: {
+        imageSource: 'url',
+        src: '',
+        assetId: '',
+        width: 140,
+        maxHeight: 80,
+        align: 'center',
+        marginBottom: 12,
+    },
+    resolveFields: (data, { fields }) => {
+        const source = data.props['imageSource'] === 'library' ? 'library' : 'url';
+        const next = { ...fields };
+        if (source === 'library') {
+            delete next['src'];
+        }
+        else {
+            delete next['assetId'];
+        }
+        return next;
+    },
+    resolveData: async ({ props }) => {
+        const source = props['imageSource'] === 'library' ? 'library' : 'url';
+        let src = typeof props['src'] === 'string' ? props['src'] : '';
+        const assetId = typeof props['assetId'] === 'string' ? props['assetId'] : '';
+        if (source === 'library' && assetId) {
+            try {
+                const detail = await fetchAssetDetail(assetId);
+                src = toAbsoluteAssetUrl(detail.url);
+            }
+            catch {
+                /* keep previous src */
+            }
+        }
+        if (source === 'url') {
+            return { props: { ...props, imageSource: 'url', assetId: '', src } };
+        }
+        return { props: { ...props, imageSource: 'library', assetId, src } };
+    },
+    render: (props) => {
+        const src = typeof props.src === 'string' ? props.src.trim() : '';
+        const width = asNum(props.width, 140);
+        const maxHeight = asNum(props.maxHeight, 80);
+        const align = asAlign(props.align, 'center');
+        const marginBottom = asNum(props.marginBottom, 12);
+        const imgMargin = align === 'center' ? '0 auto' : align === 'right' ? '0 0 0 auto' : '0';
+        return (_jsx("div", { style: { textAlign: align, marginBottom, width: '100%' }, children: src ? (_jsx("img", { src: src, alt: "Logo", style: {
+                    display: 'block',
+                    width,
+                    maxWidth: '100%',
+                    maxHeight,
+                    height: 'auto',
+                    objectFit: 'contain',
+                    margin: imgMargin,
+                } })) : (_jsx("div", { style: {
+                    display: 'inline-block',
+                    width,
+                    maxWidth: '100%',
+                    minHeight: 40,
+                    maxHeight,
+                    background: '#e2e8f0',
+                    color: '#64748b',
+                    fontSize: 12,
+                    lineHeight: '40px',
+                    textAlign: 'center',
+                    margin: imgMargin,
+                }, children: "[Logo]" })) }));
+    },
+});
+/* -------------------------------------------------------------------------- */
+/* InvoiceFooter                                                              */
+/* -------------------------------------------------------------------------- */
+const DEFAULT_FOOTER_TEXT = 'Thank you for your business.\n{{var seller.legalName}} · Tax ID {{var seller.taxId}}';
+const InvoiceFooter = invoiceSection({
+    label: 'Footer / legal',
+    fields: {
+        text: { type: 'textarea', label: 'Footer text' },
+        align: alignField(),
+        fontSize: { type: 'number', label: 'Font size' },
+        color: createColorField({ label: 'Text color' }),
+        bold: radio('Bold'),
+        italics: radio('Italics'),
+        showTopDivider: radio('Top divider'),
+        marginTop: { type: 'number', label: 'Margin top (px)' },
+        marginBottom: { type: 'number', label: 'Margin bottom (px)' },
+    },
+    defaultProps: {
+        text: DEFAULT_FOOTER_TEXT,
+        align: 'center',
+        fontSize: 9,
+        color: '#0f172a',
+        bold: false,
+        italics: false,
+        showTopDivider: true,
+        marginTop: 0,
+        marginBottom: 8,
+    },
+    render: (props) => renderTextBlock({ ...props, text: props.text || DEFAULT_FOOTER_TEXT }, {
+        fontSize: 9,
+        showTopDivider: true,
+        marginBottom: 8,
+        emptyHint: DEFAULT_FOOTER_TEXT,
+    }),
+});
+/* -------------------------------------------------------------------------- */
+/* Config export                                                              */
+/* -------------------------------------------------------------------------- */
+/**
+ * The invoice renderer map — **the React half only**, keyed by namespaced block
+ * name (feature 096, T303; `contracts/block-definition.md` §4.3).
+ *
+ * **The `invoice` category is gone.** It is declared by `invoices` (with a
+ * `weight`, which is what makes `invoices` the namer) and jointly by `ksef`,
+ * and served merged by `GET /api/v1/admin/cms/page-builder/config`. Switching
+ * `invoices` off therefore leaves the section titled by `ksef`'s declaration
+ * with `ksef.InvoiceSection` still insertable — which a category list in this
+ * file could not express.
+ *
+ * **Every entry is this module's own.** A block another module declares is not
+ * bound here: its binding lives with its declarant, and no page-builder
+ * component contribution kind (α, F7's roadmap row) is built. The editor
+ * reaches such a block through the served descriptor instead —
+ * `withDescribedInvoiceBlocks` (`./described-blocks.tsx`,
+ * `specs/134-paid-module-extraction/` T138) makes a present contributor's block
+ * insertable and configurable with a neutral canvas stand-in, and keeps a stored
+ * block nothing covers as FR-019's placeholder. The PDF — the legal document —
+ * renders it through the contributor's registration on the backend.
+ */
+export const invoicePuckConfig = {
+    components: {
+        'invoices.InvoiceHeader': InvoiceHeader,
+        'invoices.InvoiceParties': InvoiceParties,
+        'invoices.InvoiceLineItems': InvoiceLineItems,
+        'invoices.InvoiceVatSummary': InvoiceVatSummary,
+        'invoices.InvoiceTotals': InvoiceTotals,
+        'invoices.InvoiceNotes': InvoiceNotes,
+        'invoices.InvoiceSpacer': InvoiceSpacer,
+        'invoices.InvoiceDivider': InvoiceDivider,
+        'invoices.InvoiceLogo': InvoiceLogo,
+        'invoices.InvoiceFooter': InvoiceFooter,
+    },
+};
+/**
+ * The invoice palette's one section.
+ *
+ * **Derived from the renderer map rather than written out** (FR-008, SC-005):
+ * this file no longer holds a mapping from a category to a list of block names,
+ * which is what let a section list five of another module's blocks. The
+ * *authoritative* declarations are `invoices`' and `ksef`'s `blockCategories`,
+ * merged and presence-filtered by
+ * `GET /api/v1/admin/cms/page-builder/config`; this local derivation is what
+ * the editor renders until the invoice builder reads that descriptor, and it
+ * carries no name of its own.
+ */
+export const invoicePuckPalette = {
+    invoice: {
+        title: 'Invoice sections',
+        components: Object.keys(invoicePuckConfig.components ?? {}),
+    },
+};
+//# sourceMappingURL=invoice-puck-config.js.map