@formepdf/mcp 0.5.0

package/dist/templates/report.js

@@ -0,0 +1,179 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Document, Page, View, Text, Svg, Table, Row, Cell, Fixed, PageBreak, StyleSheet } from '@formepdf/react';
+const styles = StyleSheet.create({
+    sectionTitle: { fontSize: 20, fontWeight: 700, color: '#0f172a', marginBottom: 12 },
+    bodyText: { fontSize: 10, color: '#334155', lineHeight: 1.6, marginBottom: 12 },
+    introText: { fontSize: 10, color: '#334155', lineHeight: 1.6, marginBottom: 16 },
+    headerFooterText: { fontSize: 8, color: '#94a3b8' },
+    headerBar: { flexDirection: 'row', justifyContent: 'space-between', paddingBottom: 8, borderBottomWidth: 1, borderColor: '#e2e8f0', marginBottom: 16 },
+    footerBar: { flexDirection: 'row', justifyContent: 'space-between', paddingTop: 8, borderTopWidth: 1, borderColor: '#e2e8f0' },
+    tableHeaderCell: { padding: 8 },
+    tableHeaderText: { fontSize: 9, fontWeight: 700, color: '#ffffff', textAlign: 'right' },
+    tableCell: { padding: 8 },
+    tableCellText: { fontSize: 9, color: '#334155', textAlign: 'right' },
+    chartTitle: { fontSize: 10, fontWeight: 700, color: '#334155', marginBottom: 6 },
+    recCard: { flexDirection: 'row', gap: 24, marginBottom: 16, padding: 16, backgroundColor: '#f8fafc', borderRadius: 4, borderLeftWidth: 3, borderColor: '#0f172a' },
+    recBadge: { width: 24, height: 24, backgroundColor: '#0f172a', borderRadius: 12, justifyContent: 'center', alignItems: 'center' },
+    recBadgeText: { fontSize: 10, fontWeight: 700, color: '#ffffff', lineHeight: 1.2 },
+    recTitle: { fontSize: 11, fontWeight: 700, color: '#0f172a', marginBottom: 4 },
+    recBody: { fontSize: 9, color: '#475569', lineHeight: 1.5 },
+    recLabel: { fontSize: 8, fontWeight: 700, color: '#64748b' },
+    recValue: { fontSize: 8, color: '#334155' },
+});
+// ── Chart SVG generators ─────────────────────────────────────────────
+const CHART_COLORS = ['#3b82f6', '#0f172a', '#64748b', '#94a3b8', '#cbd5e1'];
+function renderBarChart(tableData) {
+    const totals = tableData.map((r) => ({
+        label: r.region,
+        value: parseFloat(r.q1.replace(/[$,]/g, '')) + parseFloat(r.q2.replace(/[$,]/g, ''))
+            + parseFloat(r.q3.replace(/[$,]/g, '')) + parseFloat(r.q4.replace(/[$,]/g, '')),
+    }));
+    const maxVal = Math.max(...totals.map(t => t.value));
+    const w = 230, h = 150;
+    const barAreaTop = 8, barAreaBottom = h - 20;
+    const barAreaH = barAreaBottom - barAreaTop;
+    const barW = Math.min(32, (w - 20) / totals.length - 8);
+    const gap = (w - barW * totals.length) / (totals.length + 1);
+    let svg = '';
+    // Grid lines
+    for (let i = 0; i <= 4; i++) {
+        const y = barAreaTop + (barAreaH / 4) * i;
+        svg += `<line x1="0" y1="${y}" x2="${w}" y2="${y}" stroke="#e2e8f0" stroke-width="0.5"/>`;
+    }
+    // Bars and labels
+    totals.forEach((t, i) => {
+        const x = gap + i * (barW + gap);
+        const barH = (t.value / maxVal) * barAreaH;
+        const y = barAreaBottom - barH;
+        svg += `<rect x="${x}" y="${y}" width="${barW}" height="${barH}" fill="${CHART_COLORS[i % CHART_COLORS.length]}" rx="2"/>`;
+        // Region label below bar
+        const labelX = x + barW / 2;
+        svg += `<rect x="${labelX - 2}" y="${barAreaBottom + 4}" width="4" height="4" fill="${CHART_COLORS[i % CHART_COLORS.length]}" rx="1"/>`;
+    });
+    return svg;
+}
+/** Approximate a circular arc as cubic bezier segments. */
+function arcPath(cx, cy, r, startAngle, endAngle) {
+    let path = '';
+    const step = Math.PI / 2; // max 90 degrees per segment
+    let a1 = startAngle;
+    while (a1 < endAngle - 0.001) {
+        const a2 = Math.min(a1 + step, endAngle);
+        const alpha = a2 - a1;
+        const k = (4 / 3) * Math.tan(alpha / 4);
+        const x1 = cx + r * Math.cos(a1), y1 = cy + r * Math.sin(a1);
+        const x2 = cx + r * Math.cos(a2), y2 = cy + r * Math.sin(a2);
+        const cp1x = x1 - k * r * Math.sin(a1), cp1y = y1 + k * r * Math.cos(a1);
+        const cp2x = x2 + k * r * Math.sin(a2), cp2y = y2 - k * r * Math.cos(a2);
+        if (a1 === startAngle) {
+            path += `M ${f(x1)} ${f(y1)} `;
+        }
+        path += `C ${f(cp1x)} ${f(cp1y)} ${f(cp2x)} ${f(cp2y)} ${f(x2)} ${f(y2)} `;
+        a1 = a2;
+    }
+    return path;
+}
+function f(n) { return n.toFixed(2); }
+function renderDonutChart(tableData) {
+    const totals = tableData.map((r) => ({
+        label: r.region,
+        value: parseFloat(r.q1.replace(/[$,]/g, '')) + parseFloat(r.q2.replace(/[$,]/g, ''))
+            + parseFloat(r.q3.replace(/[$,]/g, '')) + parseFloat(r.q4.replace(/[$,]/g, '')),
+    }));
+    const sum = totals.reduce((s, t) => s + t.value, 0);
+    const cx = 55, cy = 75, r = 48, innerR = 28;
+    let svg = '';
+    let angle = -Math.PI / 2; // start at top
+    totals.forEach((t, i) => {
+        const sliceAngle = (t.value / sum) * Math.PI * 2;
+        if (sliceAngle < 0.01) {
+            angle += sliceAngle;
+            return;
+        }
+        const endAngle = angle + sliceAngle;
+        const ix2 = cx + innerR * Math.cos(endAngle), iy2 = cy + innerR * Math.sin(endAngle);
+        const innerPath = arcPathReverse(cx, cy, innerR, angle, endAngle);
+        const fullD = arcPath(cx, cy, r, angle, endAngle) + `L ${f(ix2)} ${f(iy2)} ` + innerPath + 'Z';
+        svg += `<path d="${fullD}" fill="${CHART_COLORS[i % CHART_COLORS.length]}"/>`;
+        angle = endAngle;
+    });
+    return svg;
+}
+/** Reverse arc: draws from endAngle back to startAngle using line-to after the first point. */
+function arcPathReverse(cx, cy, r, startAngle, endAngle) {
+    const step = Math.PI / 2;
+    const segments = [];
+    let a = startAngle;
+    while (a < endAngle - 0.001) {
+        const a2 = Math.min(a + step, endAngle);
+        segments.push({ a1: a, a2 });
+        a = a2;
+    }
+    // Reverse and draw each segment backwards
+    let path = '';
+    for (let i = segments.length - 1; i >= 0; i--) {
+        const { a1, a2 } = segments[i];
+        const alpha = a2 - a1;
+        const k = (4 / 3) * Math.tan(alpha / 4);
+        const x1 = cx + r * Math.cos(a1), y1 = cy + r * Math.sin(a1);
+        const x2 = cx + r * Math.cos(a2), y2 = cy + r * Math.sin(a2);
+        const cp1x = x1 - k * r * Math.sin(a1), cp1y = y1 + k * r * Math.cos(a1);
+        const cp2x = x2 + k * r * Math.sin(a2), cp2y = y2 - k * r * Math.cos(a2);
+        // Draw from (x2,y2) to (x1,y1) with swapped control points
+        path += `C ${f(cp2x)} ${f(cp2y)} ${f(cp1x)} ${f(cp1y)} ${f(x1)} ${f(y1)} `;
+    }
+    return path;
+}
+function renderLineChart(tableData) {
+    const quarters = ['q1', 'q2', 'q3', 'q4'];
+    const qTotals = quarters.map(q => tableData.reduce((sum, r) => sum + parseFloat(r[q].replace(/[$,]/g, '')), 0));
+    const minVal = Math.min(...qTotals) * 0.9;
+    const maxVal = Math.max(...qTotals) * 1.05;
+    const w = 484, h = 140;
+    const padL = 16, padR = 16, padT = 12, padB = 24;
+    const plotW = w - padL - padR, plotH = h - padT - padB;
+    let svg = '';
+    // Grid lines
+    for (let i = 0; i <= 4; i++) {
+        const y = padT + (plotH / 4) * i;
+        svg += `<line x1="${padL}" y1="${y}" x2="${w - padR}" y2="${y}" stroke="#e2e8f0" stroke-width="0.5"/>`;
+    }
+    // Plot points
+    const points = qTotals.map((v, i) => ({
+        x: padL + (plotW / (quarters.length - 1)) * i,
+        y: padT + plotH - ((v - minVal) / (maxVal - minVal)) * plotH,
+    }));
+    // Fill area under the line
+    const areaPath = `M ${f(points[0].x)} ${f(padT + plotH)} L ${points.map(p => `${f(p.x)} ${f(p.y)}`).join(' L ')} L ${f(points[points.length - 1].x)} ${f(padT + plotH)} Z`;
+    svg += `<path d="${areaPath}" fill="#3b82f6" fill-opacity="0.08"/>`;
+    // Line
+    const linePath = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${f(p.x)} ${f(p.y)}`).join(' ');
+    svg += `<path d="${linePath}" fill="none" stroke="#3b82f6" stroke-width="2"/>`;
+    // Dots
+    points.forEach(p => {
+        svg += `<circle cx="${f(p.x)}" cy="${f(p.y)}" r="3.5" fill="#ffffff" stroke="#3b82f6" stroke-width="2"/>`;
+    });
+    // Quarter markers on x-axis
+    points.forEach((p) => {
+        svg += `<line x1="${f(p.x)}" y1="${f(padT + plotH)}" x2="${f(p.x)}" y2="${f(padT + plotH + 4)}" stroke="#94a3b8" stroke-width="1"/>`;
+    });
+    return svg;
+}
+// ── Template ─────────────────────────────────────────────────────────
+export default function Report(data) {
+    const tableData = data.sections[1].tableData || [];
+    return (_jsxs(Document, { title: data.title, author: data.author, children: [_jsx(Page, { size: "Letter", margin: 72, children: _jsxs(View, { style: { flexGrow: 1, justifyContent: 'center' }, children: [_jsxs(View, { style: { backgroundColor: '#0f172a', padding: 32, borderRadius: 4, marginBottom: 32 }, children: [_jsx(Text, { style: { fontSize: 32, fontWeight: 700, color: '#ffffff' }, children: data.title }), _jsx(Text, { style: { fontSize: 14, color: '#94a3b8', marginTop: 12 }, children: data.subtitle })] }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 24 }, children: [_jsxs(View, { children: [_jsx(Text, { style: { fontSize: 10, color: '#64748b' }, children: "Prepared by" }), _jsx(Text, { style: { fontSize: 12, fontWeight: 700, color: '#1e293b', marginTop: 4 }, children: data.author }), _jsx(Text, { style: { fontSize: 10, color: '#64748b', marginTop: 2 }, children: data.department })] }), _jsxs(View, { style: { alignItems: 'flex-end' }, children: [_jsx(Text, { style: { fontSize: 10, color: '#64748b' }, children: "Date" }), _jsx(Text, { style: { fontSize: 12, fontWeight: 700, color: '#1e293b', marginTop: 4 }, children: data.date }), _jsx(Text, { style: { fontSize: 10, color: '#64748b', marginTop: 2 }, children: data.classification })] })] })] }) }), _jsxs(Page, { size: "Letter", margin: 54, children: [_jsx(Fixed, { position: "header", children: _jsxs(View, { style: styles.headerBar, children: [_jsx(Text, { style: styles.headerFooterText, children: data.company }), _jsx(Text, { style: styles.headerFooterText, children: data.title })] }) }), _jsx(Fixed, { position: "footer", children: _jsxs(View, { style: styles.footerBar, children: [_jsx(Text, { style: styles.headerFooterText, children: data.classification }), _jsxs(Text, { style: styles.headerFooterText, children: ["Page ", '{{pageNumber}}', " of ", '{{totalPages}}'] })] }) }), _jsx(Text, { style: styles.sectionTitle, children: "Table of Contents" }), data.sections.map((section, i) => (_jsx(View, { href: `#${section.title}`, style: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 6, borderBottomWidth: 1, borderColor: '#f1f5f9' }, children: _jsxs(Text, { style: { fontSize: 10, color: '#2563eb', textDecoration: 'underline' }, children: [i + 1, ". ", section.title] }) }, i))), _jsx(PageBreak, {}), _jsxs(Text, { bookmark: data.sections[0].title, style: styles.sectionTitle, children: ["1. ", data.sections[0].title] }), (data.sections[0].paragraphs || []).map((p, i) => (_jsx(Text, { style: styles.bodyText, children: p }, i))), data.keyMetrics && (_jsx(View, { style: { flexDirection: 'row', gap: 12, marginTop: 8, marginBottom: 24 }, children: data.keyMetrics.map((metric, i) => (_jsxs(View, { style: { flexGrow: 1, padding: 16, backgroundColor: '#f8fafc', borderRadius: 4, borderWidth: 1, borderColor: '#e2e8f0' }, children: [_jsx(Text, { style: { fontSize: 20, fontWeight: 700, color: '#0f172a' }, children: metric.value }), _jsx(Text, { style: { fontSize: 9, color: '#64748b', marginTop: 4 }, children: metric.label })] }, i))) })), _jsx(PageBreak, {}), _jsxs(Text, { bookmark: data.sections[1].title, style: styles.sectionTitle, children: ["2. ", data.sections[1].title] }), _jsx(Text, { style: styles.introText, children: data.sections[1].intro }), _jsxs(Table, { columns: [
+                            { width: { fraction: 0.28 } },
+                            { width: { fraction: 0.18 } },
+                            { width: { fraction: 0.18 } },
+                            { width: { fraction: 0.18 } },
+                            { width: { fraction: 0.18 } }
+                        ], children: [_jsxs(Row, { header: true, style: { backgroundColor: '#0f172a' }, children: [_jsx(Cell, { style: styles.tableHeaderCell, children: _jsx(Text, { style: { fontSize: 9, fontWeight: 700, color: '#ffffff' }, children: "Region" }) }), _jsx(Cell, { style: styles.tableHeaderCell, children: _jsx(Text, { style: styles.tableHeaderText, children: "Q1" }) }), _jsx(Cell, { style: styles.tableHeaderCell, children: _jsx(Text, { style: styles.tableHeaderText, children: "Q2" }) }), _jsx(Cell, { style: styles.tableHeaderCell, children: _jsx(Text, { style: styles.tableHeaderText, children: "Q3" }) }), _jsx(Cell, { style: styles.tableHeaderCell, children: _jsx(Text, { style: styles.tableHeaderText, children: "Q4" }) })] }), tableData.map((row, i) => (_jsxs(Row, { style: { backgroundColor: i % 2 === 0 ? '#ffffff' : '#f8fafc' }, children: [_jsx(Cell, { style: styles.tableCell, children: _jsx(Text, { style: { fontSize: 9, color: '#334155', fontWeight: 700 }, children: row.region }) }), _jsx(Cell, { style: styles.tableCell, children: _jsx(Text, { style: styles.tableCellText, children: row.q1 }) }), _jsx(Cell, { style: styles.tableCell, children: _jsx(Text, { style: styles.tableCellText, children: row.q2 }) }), _jsx(Cell, { style: styles.tableCell, children: _jsx(Text, { style: styles.tableCellText, children: row.q3 }) }), _jsx(Cell, { style: styles.tableCell, children: _jsx(Text, { style: styles.tableCellText, children: row.q4 }) })] }, i)))] }), _jsx(PageBreak, {}), _jsxs(Text, { bookmark: data.sections[2].title, style: styles.sectionTitle, children: ["3. ", data.sections[2].title] }), _jsx(Text, { style: styles.introText, children: data.sections[2].intro }), _jsxs(View, { style: { flexDirection: 'row', gap: 16, marginBottom: 24 }, children: [_jsxs(View, { style: { flexGrow: 1 }, children: [_jsx(Text, { style: styles.chartTitle, children: "Revenue by Region" }), _jsxs(View, { style: { backgroundColor: '#f8fafc', borderRadius: 4, borderWidth: 1, borderColor: '#e2e8f0', padding: 8 }, children: [_jsx(Svg, { width: 230, height: 150, viewBox: "0 0 230 150", content: renderBarChart(tableData) }), _jsx(View, { style: { gap: 3, marginTop: 8 }, children: tableData.map((row, i) => (_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 4 }, children: [_jsx(View, { style: { width: 8, height: 8, borderRadius: 2, backgroundColor: CHART_COLORS[i % CHART_COLORS.length] } }), _jsx(Text, { style: { fontSize: 7, color: '#64748b' }, children: row.region })] }, i))) })] })] }), _jsxs(View, { style: { flexGrow: 1 }, children: [_jsx(Text, { style: styles.chartTitle, children: "Market Share" }), _jsxs(View, { style: { backgroundColor: '#f8fafc', borderRadius: 4, borderWidth: 1, borderColor: '#e2e8f0', padding: 8 }, children: [_jsx(View, { style: { alignItems: 'center' }, children: _jsx(Svg, { width: 110, height: 150, viewBox: "0 0 110 150", content: renderDonutChart(tableData) }) }), _jsx(View, { style: { gap: 3, marginTop: 8 }, children: tableData.map((row, i) => {
+                                                    const total = tableData.reduce((s, r) => s + parseFloat(r.q1.replace(/[$,]/g, '')) + parseFloat(r.q2.replace(/[$,]/g, ''))
+                                                        + parseFloat(r.q3.replace(/[$,]/g, '')) + parseFloat(r.q4.replace(/[$,]/g, '')), 0);
+                                                    const rowTotal = parseFloat(row.q1.replace(/[$,]/g, '')) + parseFloat(row.q2.replace(/[$,]/g, ''))
+                                                        + parseFloat(row.q3.replace(/[$,]/g, '')) + parseFloat(row.q4.replace(/[$,]/g, ''));
+                                                    const pct = ((rowTotal / total) * 100).toFixed(0);
+                                                    return (_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 3 }, children: [_jsx(View, { style: { width: 8, height: 8, borderRadius: 2, backgroundColor: CHART_COLORS[i % CHART_COLORS.length] } }), _jsxs(Text, { style: { fontSize: 7, color: '#64748b' }, children: [row.region, " ", pct, "%"] })] }, i));
+                                                }) })] })] })] }), _jsx(Text, { style: styles.chartTitle, children: "Quarterly Growth Trend" }), _jsxs(View, { style: { backgroundColor: '#f8fafc', borderRadius: 4, borderWidth: 1, borderColor: '#e2e8f0', paddingVertical: 12, marginBottom: 24 }, children: [_jsx(Svg, { width: 484, height: 140, viewBox: "0 0 484 140", content: renderLineChart(tableData) }), _jsx(View, { style: { position: 'relative', height: 14, marginTop: 4 }, children: ['Q1', 'Q2', 'Q3', 'Q4'].map((q, i) => (_jsx(Text, { style: { position: 'absolute', left: 16 + (452 / 3) * i - 12, width: 24, fontSize: 8, color: '#64748b', textAlign: 'center' }, children: q }, i))) })] }), _jsx(PageBreak, {}), _jsxs(Text, { bookmark: data.sections[3].title, style: styles.sectionTitle, children: ["4. ", data.sections[3].title] }), _jsx(Text, { style: styles.introText, children: data.sections[3].intro }), (data.sections[3].items || []).map((item, i) => (_jsxs(View, { style: styles.recCard, children: [_jsx(View, { style: styles.recBadge, children: _jsx(Text, { style: styles.recBadgeText, children: i + 1 }) }), _jsxs(View, { style: { flexGrow: 1, flexShrink: 1 }, children: [_jsx(Text, { style: styles.recTitle, children: item.title }), _jsx(Text, { style: styles.recBody, children: item.description }), _jsxs(View, { style: { flexDirection: 'row', gap: 16, marginTop: 8 }, children: [_jsxs(View, { style: { flexDirection: 'row', gap: 4 }, children: [_jsx(Text, { style: styles.recLabel, children: "Priority:" }), _jsx(Text, { style: styles.recValue, children: item.priority })] }), _jsxs(View, { style: { flexDirection: 'row', gap: 4 }, children: [_jsx(Text, { style: styles.recLabel, children: "Timeline:" }), _jsx(Text, { style: styles.recValue, children: item.timeline })] })] })] })] }, i)))] })] }));
+}

package/dist/templates/shipping-label.d.ts

@@ -0,0 +1,2 @@
+import type { ShippingLabelData } from '../schemas/shipping-label.js';
+export default function ShippingLabel(data: ShippingLabelData): import("react/jsx-runtime").JSX.Element;

package/dist/templates/shipping-label.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Document, Page, View, Text } from '@formepdf/react';
+export default function ShippingLabel(data) {
+    return (_jsx(Document, { title: `Shipping Label - ${data.tracking}`, children: _jsxs(Page, { size: { width: 288, height: 432 }, margin: 16, children: [_jsxs(View, { style: { marginBottom: 12, padding: 8 }, children: [_jsx(Text, { style: { fontSize: 7, fontWeight: 700, color: '#64748b', textTransform: 'uppercase', letterSpacing: 1, marginBottom: 4 }, children: "From" }), _jsx(Text, { style: { fontSize: 8, color: '#334155' }, children: data.from.name }), _jsx(Text, { style: { fontSize: 8, color: '#334155' }, children: data.from.address }), _jsx(Text, { style: { fontSize: 8, color: '#334155' }, children: data.from.cityStateZip })] }), _jsx(View, { style: { borderTopWidth: 2, borderColor: '#0f172a', marginBottom: 12 } }), _jsxs(View, { style: { padding: 12, marginBottom: 12 }, children: [_jsx(Text, { style: { fontSize: 7, fontWeight: 700, color: '#64748b', textTransform: 'uppercase', letterSpacing: 1, marginBottom: 8 }, children: "To" }), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: '#0f172a' }, children: data.to.name }), _jsx(Text, { style: { fontSize: 10, color: '#0f172a', marginTop: 4 }, children: data.to.address }), data.to.address2 && (_jsx(Text, { style: { fontSize: 10, color: '#0f172a' }, children: data.to.address2 })), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: '#0f172a', marginTop: 2 }, children: data.to.cityStateZip })] }), _jsxs(View, { style: { marginBottom: 8, padding: 8 }, children: [_jsx(View, { style: { alignItems: 'center', marginBottom: 8 }, children: _jsxs(View, { style: { flexDirection: 'row', gap: 2 }, children: [_jsx(View, { style: { width: 2, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 3, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 2, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 3, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 2, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 3, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 2, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 3, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 2, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 3, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 2, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 2, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 3, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 2, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 3, height: 40, backgroundColor: '#0f172a' } })] }) }), _jsx(Text, { style: { fontSize: 8, fontWeight: 700, color: '#0f172a', letterSpacing: 2, textAlign: 'center' }, children: data.tracking })] }), _jsx(View, { style: { borderTopWidth: 1, borderColor: '#cbd5e1', marginBottom: 8 } }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', padding: 8 }, children: [_jsxs(View, { style: { flex: 1 }, children: [_jsx(Text, { style: { fontSize: 7, color: '#64748b', textTransform: 'uppercase', letterSpacing: 1 }, children: "Weight" }), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: '#0f172a', marginTop: 2 }, children: data.weight })] }), _jsxs(View, { style: { flex: 2, justifyContent: 'center', alignItems: 'center' }, children: [_jsx(Text, { style: { width: '100%', textAlign: 'center', fontSize: 7, color: '#64748b', textTransform: 'uppercase', letterSpacing: 1 }, children: "Dimensions" }), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: '#0f172a', marginTop: 2 }, children: data.dimensions })] }), _jsxs(View, { style: { flex: 1, justifyContent: 'center', alignItems: 'flex-end' }, children: [_jsx(Text, { style: { width: '100%', textAlign: 'right', fontSize: 7, color: '#64748b', textTransform: 'uppercase', letterSpacing: 1 }, children: "Service" }), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: '#0f172a', marginTop: 2 }, children: data.service })] })] }), data.stamps && data.stamps.length > 0 && (_jsx(View, { style: { flexDirection: 'row', gap: 8, marginTop: 8, padding: 8 }, children: data.stamps.map((stamp, i) => (_jsx(View, { style: { flex: 1, textAlign: 'center', paddingVertical: 6, paddingHorizontal: 12, borderWidth: 2, borderColor: '#dc2626', borderRadius: 2 }, children: _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: '#dc2626', textTransform: 'uppercase' }, children: stamp }) }, i))) }))] }) }));
+}

package/dist/tools/get-schema.d.ts

@@ -0,0 +1,6 @@
+export declare function getSchema(templateName: string): {
+    name: string;
+    description: string;
+    schema: Record<string, unknown>;
+    example: Record<string, unknown>;
+};

package/dist/tools/get-schema.js

@@ -0,0 +1,15 @@
+import { templates } from '../templates/index.js';
+import { zodToJsonSchema } from '../zod-to-json-schema.js';
+export function getSchema(templateName) {
+    const entry = templates[templateName];
+    if (!entry) {
+        const available = Object.keys(templates).join(', ');
+        throw new Error(`Template "${templateName}" not found. Available templates: ${available}`);
+    }
+    return {
+        name: templateName,
+        description: entry.description,
+        schema: zodToJsonSchema(entry.schema),
+        example: entry.example,
+    };
+}

package/dist/tools/list-templates.d.ts

@@ -0,0 +1,5 @@
+export declare function listTemplates(): {
+    name: string;
+    description: string;
+    fields: Record<string, string>;
+}[];

package/dist/tools/list-templates.js

@@ -0,0 +1,8 @@
+import { templates } from '../templates/index.js';
+export function listTemplates() {
+    return Object.entries(templates).map(([name, entry]) => ({
+        name,
+        description: entry.description,
+        fields: entry.fields,
+    }));
+}

package/dist/tools/render-custom.d.ts

@@ -0,0 +1,4 @@
+export declare function renderCustom(jsx: string, output?: string): Promise<{
+    path: string;
+    size: number;
+}>;

package/dist/tools/render-custom.js

@@ -0,0 +1,70 @@
+import { writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+import * as React from 'react';
+import * as FormeReact from '@formepdf/react';
+export async function renderCustom(jsx, output) {
+    // Lazy-import esbuild and core to avoid startup side effects with stdio
+    const [{ transform }, { renderDocument }] = await Promise.all([
+        import('esbuild'),
+        import('@formepdf/core'),
+    ]);
+    // Transpile JSX to JS
+    const result = await transform(jsx, {
+        loader: 'tsx',
+        jsx: 'transform',
+        jsxFactory: 'React.createElement',
+        jsxFragment: 'React.Fragment',
+    });
+    // Build the function body: provide all Forme components + React in scope
+    const componentNames = [
+        'Document', 'Page', 'View', 'Text', 'Image',
+        'Table', 'Row', 'Cell', 'Fixed', 'Svg', 'PageBreak',
+        'StyleSheet', 'Font',
+    ];
+    const preamble = componentNames
+        .map(name => `const ${name} = FormeReact.${name};`)
+        .join('\n');
+    const code = `${preamble}\n${result.code}`;
+    // Try evaluating as a bare JSX expression first (most common case).
+    // Strip trailing semicolons/whitespace so `return (expr)` works.
+    const trimmedCode = result.code.replace(/;\s*$/, '').trim();
+    let element = null;
+    try {
+        const exprFn = new Function('React', ...componentNames, `
+      return (${trimmedCode});
+    `);
+        element = exprFn(React, ...componentNames.map(n => FormeReact[n]));
+    }
+    catch {
+        // Not a bare expression — try as a script with named exports
+    }
+    // If bare expression didn't work, try as a script defining Template/App
+    if (!element || !React.isValidElement(element)) {
+        try {
+            const fn = new Function('React', 'FormeReact', `
+        ${code}
+        if (typeof Template !== 'undefined') return Template;
+        if (typeof App !== 'undefined') return App;
+        return null;
+      `);
+            element = fn(React, FormeReact);
+        }
+        catch {
+            // Fall through
+        }
+    }
+    // If we got a function, call it to get the element
+    if (typeof element === 'function') {
+        element = element({});
+    }
+    if (!element || !React.isValidElement(element)) {
+        throw new Error('Could not find a React element to render. Your JSX should either:\n' +
+            '- Be a single JSX expression (e.g. <Document>...</Document>)\n' +
+            '- Define a function called Template or App that returns JSX\n' +
+            '- Export a default function');
+    }
+    const pdfBytes = await renderDocument(element);
+    const outputPath = resolve(output || './custom.pdf');
+    await writeFile(outputPath, pdfBytes);
+    return { path: outputPath, size: pdfBytes.length };
+}

package/dist/tools/render-pdf.d.ts

@@ -0,0 +1,4 @@
+export declare function renderPdf(templateName: string, data: Record<string, unknown>, output?: string): Promise<{
+    path: string;
+    size: number;
+}>;

package/dist/tools/render-pdf.js

@@ -0,0 +1,20 @@
+import { writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+import { renderDocument } from '@formepdf/core';
+import { templates } from '../templates/index.js';
+export async function renderPdf(templateName, data, output) {
+    const entry = templates[templateName];
+    if (!entry) {
+        const available = Object.keys(templates).join(', ');
+        throw new Error(`Template "${templateName}" not found. Available templates: ${available}`);
+    }
+    // Validate data against schema
+    const parsed = entry.schema.parse(data);
+    // Render template to React element, then to PDF
+    const element = entry.fn(parsed);
+    const pdfBytes = await renderDocument(element);
+    // Write to disk
+    const outputPath = resolve(output || `./${templateName}.pdf`);
+    await writeFile(outputPath, pdfBytes);
+    return { path: outputPath, size: pdfBytes.length };
+}

package/dist/zod-to-json-schema.d.ts

@@ -0,0 +1,2 @@
+import type { z } from 'zod';
+export declare function zodToJsonSchema(schema: z.ZodType): Record<string, unknown>;

package/dist/zod-to-json-schema.js

@@ -0,0 +1,84 @@
+/// Converts a Zod schema to a JSON Schema object.
+/// Handles the subset of Zod types used in our template schemas.
+export function zodToJsonSchema(schema) {
+    return convert(schema);
+}
+function convert(schema) {
+    const def = schema._def;
+    if (!def)
+        return {};
+    const typeName = def.typeName;
+    switch (typeName) {
+        case 'ZodString': {
+            const result = { type: 'string' };
+            if (def.description)
+                result.description = def.description;
+            return result;
+        }
+        case 'ZodNumber': {
+            const result = { type: 'number' };
+            if (def.description)
+                result.description = def.description;
+            return result;
+        }
+        case 'ZodBoolean': {
+            const result = { type: 'boolean' };
+            if (def.description)
+                result.description = def.description;
+            return result;
+        }
+        case 'ZodArray': {
+            const result = {
+                type: 'array',
+                items: convert(def.type),
+            };
+            if (def.description)
+                result.description = def.description;
+            return result;
+        }
+        case 'ZodObject': {
+            const shape = def.shape();
+            const properties = {};
+            const required = [];
+            for (const [key, value] of Object.entries(shape)) {
+                properties[key] = convert(value);
+                // Check if the field is optional
+                if (!isOptional(value)) {
+                    required.push(key);
+                }
+            }
+            const result = {
+                type: 'object',
+                properties,
+            };
+            if (required.length > 0)
+                result.required = required;
+            if (def.description)
+                result.description = def.description;
+            return result;
+        }
+        case 'ZodOptional': {
+            const inner = convert(def.innerType);
+            return inner;
+        }
+        case 'ZodRecord': {
+            const result = {
+                type: 'object',
+                additionalProperties: convert(def.valueType),
+            };
+            if (def.description)
+                result.description = def.description;
+            return result;
+        }
+        case 'ZodUnknown':
+        case 'ZodAny': {
+            return {};
+        }
+        default:
+            return {};
+    }
+}
+function isOptional(schema) {
+    const typeName = schema._def?.typeName;
+    return typeName === 'ZodOptional' || typeName === 'ZodNullable';
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@formepdf/mcp",
+  "version": "0.5.0",
+  "description": "MCP server for Forme PDF rendering — generate PDFs from AI tools",
+  "type": "module",
+  "bin": {
+    "forme-mcp": "./dist/index.js"
+  },
+  "main": "./dist/index.js",
+  "scripts": {
+    "build": "tsc"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.27.0",
+    "@formepdf/react": "0.5.0",
+    "@formepdf/core": "0.5.0",
+    "esbuild": "^0.24.0",
+    "zod": "^3.24.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "react": "^19.0.0",
+    "typescript": "^5.7.0"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/formepdf/forme",
+    "directory": "packages/mcp"
+  }
+}