makersclaw 0.1.0 → 0.3.0

package/registry/blocks/pdf-document/index.js

@@ -0,0 +1,33 @@
+// The PdfDocument block — `makersclaw add pdf-document`. Fixed: compose it
+// through its props (README.md beside this file). Themed PDF primitives,
+// a ready invoice/quote layout, and renderPdf(doc) → Blob. The blocks that
+// print (quote-builder, proposal-accept…) import this one, never
+// @react-pdf/renderer directly. The sums and formatters in money.js and
+// the theme maths in theme.js run anywhere, the server included.
+export { renderPdf, usePdf, PdfDownloadButton, downloadBlob, registerPdfFont } from "./pdf-document";
+export {
+  PdfDocument,
+  PdfStack,
+  PdfRow,
+  PdfCol,
+  PdfText,
+  PdfHeading,
+  PdfLabel,
+  PdfField,
+  PdfDivider,
+  PdfCallout,
+  PdfBadge,
+  PdfTable,
+  PdfTotals,
+  PdfLines,
+  PdfView,
+  PdfRawText,
+  PdfImage,
+  PdfLink,
+  PdfThemeProvider,
+  usePdfTheme,
+  PDF_TYPE,
+} from "./primitives";
+export { QuoteDocument } from "./quote";
+export { quoteTotals, lineAmount, round2, formatMoney, formatQuantity, formatPdfDate } from "./money";
+export { resolvePdfTheme, buildPdfTheme, DEFAULT_PDF_THEME } from "./theme";

package/registry/blocks/pdf-document/money.js

@@ -0,0 +1,83 @@
+// Quote and invoice sums — plain functions, so a server action, a test or
+// the quote builder's live preview all get the same numbers the PDF prints.
+//
+// Amounts are in the currency's major unit (dollars, not cents) and every
+// sum is rounded to the cent line by line, the way an accountant writes
+// it: each line's amount is rounded, then added.
+
+/** Round to 2 decimals without the 1.005 → 1.00 float trap. */
+export const round2 = (n) => Math.round((Number(n) + Number.EPSILON) * 100) / 100;
+
+const num = (v) => {
+  const n = typeof v === "string" ? Number(v.replace(/[, ]/g, "")) : Number(v);
+  return Number.isFinite(n) ? n : 0;
+};
+
+/** One line's amount: quantity × unit price, less its own discount (%). */
+export function lineAmount(item) {
+  const gross = num(item?.quantity ?? 1) * num(item?.unitPrice);
+  const off = item?.discountPercent ? (gross * num(item.discountPercent)) / 100 : 0;
+  return round2(gross - off);
+}
+
+/** The sums of a quote or invoice.
+ *
+ *    items     [{ description, quantity, unitPrice, discountPercent?,
+ *                 taxable? (default true) }]
+ *    discount  { percent } or { amount } off the subtotal (optional)
+ *    taxRate   percent, on the taxable lines after the discount (optional)
+ *    paid      what has already been paid (an invoice's deposit)
+ *
+ *  → { lines: [amount…], subtotal, discount, tax, total, paid, due } */
+export function quoteTotals({ items = [], discount, taxRate, paid } = {}) {
+  const lines = items.map(lineAmount);
+  const subtotal = round2(lines.reduce((s, a) => s + a, 0));
+  const taxableBase = round2(lines.reduce((s, a, i) => (items[i]?.taxable === false ? s : s + a), 0));
+  let off = 0;
+  if (discount?.percent) off = round2((subtotal * num(discount.percent)) / 100);
+  else if (discount?.amount) off = round2(Math.min(num(discount.amount), subtotal));
+  // The discount is shared across lines in proportion, so tax falls on
+  // what is actually charged for the taxable ones.
+  const share = subtotal > 0 ? taxableBase / subtotal : 0;
+  const tax = taxRate ? round2(((taxableBase - off * share) * num(taxRate)) / 100) : 0;
+  const total = round2(subtotal - off + tax);
+  const already = round2(num(paid));
+  return { lines, subtotal, discount: off, tax, total, paid: already, due: round2(total - already) };
+}
+
+// Characters the PDF's built-in faces (WinAnsi) cannot draw, which Intl
+// puts in some locales' numbers: narrow and no-break spaces, the Unicode
+// minus. Swapped for their plain forms.
+const PLAIN = [
+  [/[   ]/g, " "],
+  [/−/g, "-"],
+];
+
+/** 1234.5 → "$1,234.50" in `currency` and `locale`, drawable by the PDF's
+ *  built-in fonts. A bad currency code falls back to the plain number. */
+export function formatMoney(amount, currency = "USD", locale = "en-US") {
+  let out;
+  try {
+    out = new Intl.NumberFormat(locale, { style: "currency", currency, minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(num(amount));
+  } catch {
+    out = `${num(amount).toFixed(2)} ${currency ?? ""}`.trim();
+  }
+  for (const [re, to] of PLAIN) out = out.replace(re, to);
+  return out;
+}
+
+/** A quantity as people write it: 3, 1.5, 0.25 — no trailing zeros. */
+export function formatQuantity(q, locale = "en-US") {
+  const out = new Intl.NumberFormat(locale, { maximumFractionDigits: 3 }).format(num(q));
+  return PLAIN.reduce((s, [re, to]) => s.replace(re, to), out);
+}
+
+/** "2026-09-23" (or a Date) → "23 Sep 2026" in `locale`; "" when empty.
+ *  A bare date string is read as that calendar day, not as UTC midnight. */
+export function formatPdfDate(value, locale = "en-GB") {
+  if (!value) return "";
+  const d = value instanceof Date ? value : /^\d{4}-\d{2}-\d{2}$/.test(String(value)) ? new Date(`${value}T12:00:00`) : new Date(value);
+  if (Number.isNaN(d.getTime())) return String(value);
+  const out = new Intl.DateTimeFormat(locale, { day: "numeric", month: "short", year: "numeric" }).format(d);
+  return PLAIN.reduce((s, [re, to]) => s.replace(re, to), out);
+}

package/registry/blocks/pdf-document/pdf-document.jsx

@@ -0,0 +1,144 @@
+"use client";
+
+// Making the PDF: renderPdf turns a document (the primitives, or
+// QuoteDocument) into a Blob in the workspace's theme; usePdf keeps one
+// fresh while its data changes (a live preview); PdfDownloadButton is the
+// "Download PDF" a screen puts beside it.
+//
+// The theme is read from the page at the moment of rendering (./theme.js):
+// a PDF cannot read CSS variables, so its colours are written in as values.
+// @react-pdf/renderer lays the document out in JS (no browser print, no
+// server), in the browser or in node alike.
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Font, pdf } from "@react-pdf/renderer";
+import { Button, toast } from "../../ui";
+import { PdfThemeProvider } from "./primitives";
+import { buildPdfTheme, resolvePdfTheme } from "./theme";
+
+let hyphenationOff = false;
+
+/** Render a PDF document to a Blob.
+ *
+ *    doc      a <PdfDocument>…</PdfDocument> or <QuoteDocument … /> element
+ *    options  theme   a theme from resolvePdfTheme/buildPdfTheme (default:
+ *                     read from the page now; the fallback on the server)
+ *             root    the element whose theme to read (default <body>)
+ *             scheme  "paper" (default: white paper, the theme's accent)
+ *                     or "theme" (the workspace's own background and ink)
+ *
+ *  Resolves to a Blob of type application/pdf; rejects when the document
+ *  cannot be laid out (a broken image URL, a font that will not load). */
+export async function renderPdf(doc, { theme, root, scheme = "paper" } = {}) {
+  if (!hyphenationOff) {
+    // Whole words only: a business document never splits "invoice" as
+    // "in-voice" at a line end.
+    Font.registerHyphenationCallback((word) => [word]);
+    hyphenationOff = true;
+  }
+  const t = theme ?? (typeof document === "undefined" ? buildPdfTheme({}, { scheme }) : resolvePdfTheme(root, { scheme }));
+  return pdf(<PdfThemeProvider theme={t}>{doc}</PdfThemeProvider>).toBlob();
+}
+
+/** Use a brand face in PDFs: registerPdfFont({ family: "Inter", regular:
+ *  url, bold: url }) — TTF or WOFF files the browser can fetch — then pass
+ *  `font: { family: "Inter", bold: "Inter-Bold" }` to buildPdfTheme, or
+ *  let renderPdf's theme carry it. Without one, PDFs use Helvetica, which
+ *  every reader has built in (it draws Latin text; for other scripts or
+ *  symbols like ₹, register a font that has them). */
+export function registerPdfFont({ family, regular, bold }) {
+  if (!family || !regular) return null;
+  Font.register({ family, src: regular });
+  if (bold) Font.register({ family: `${family}-Bold`, src: bold });
+  return { family, bold: bold ? `${family}-Bold` : family };
+}
+
+/** Keep a PDF of `build()` up to date: a live preview.
+ *
+ *    const { url, blob, loading, error, refresh } = usePdf(() => <QuoteDocument {...q} />, [q]);
+ *
+ *  Re-renders `delay` ms (default 400) after the deps settle, so typing in
+ *  a form does not lay out a PDF per key. `url` is an object URL for the
+ *  current Blob (revoked when it is replaced); `error` is the last
+ *  failure, cleared by the next success. `options` go to renderPdf. */
+export function usePdf(build, deps = [], { delay = 400, enabled = true, ...options } = {}) {
+  const [state, setState] = useState({ blob: null, url: null, loading: enabled, error: null });
+  const buildRef = useRef(build);
+  buildRef.current = build;
+  const optsRef = useRef(options);
+  optsRef.current = options;
+  const urlRef = useRef(null);
+  const run = useRef(0);
+  const [tick, setTick] = useState(0);
+
+  useEffect(() => {
+    if (!enabled) return undefined;
+    const id = ++run.current;
+    setState((s) => ({ ...s, loading: true }));
+    const timer = setTimeout(async () => {
+      try {
+        const blob = await renderPdf(buildRef.current(), optsRef.current);
+        if (id !== run.current) return;
+        const url = URL.createObjectURL(blob);
+        if (urlRef.current) URL.revokeObjectURL(urlRef.current);
+        urlRef.current = url;
+        setState({ blob, url, loading: false, error: null });
+      } catch (error) {
+        if (id !== run.current) return;
+        setState((s) => ({ ...s, loading: false, error }));
+      }
+    }, delay);
+    return () => clearTimeout(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [enabled, delay, tick, ...deps]);
+
+  useEffect(
+    () => () => {
+      run.current++;
+      if (urlRef.current) URL.revokeObjectURL(urlRef.current);
+    },
+    [],
+  );
+
+  const refresh = useCallback(() => setTick((n) => n + 1), []);
+  return { ...state, refresh };
+}
+
+/** Save a Blob as a file, the way a download link would. */
+export function downloadBlob(blob, fileName = "document.pdf") {
+  if (typeof document === "undefined" || !blob) return;
+  const url = URL.createObjectURL(blob);
+  // raw: an <a download> is how a browser saves a Blob; it is never shown.
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = fileName;
+  a.rel = "noopener";
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+
+/** A "Download PDF" button: renders `document` (an element, or a function
+ *  returning one) when pressed, then saves it as `fileName`. Busy while it
+ *  renders; a failure says so in a toast and the button is ready again.
+ *  Other props (variant, size, icon, label, disabled) are the kit
+ *  Button's; `options` go to renderPdf. */
+export function PdfDownloadButton({ document: doc, fileName = "document.pdf", label = "Download PDF", icon = "download", variant = "secondary", size = "md", options, disabled, className }) {
+  const [busy, setBusy] = useState(false);
+  const onClick = async () => {
+    setBusy(true);
+    try {
+      const blob = await renderPdf(typeof doc === "function" ? doc() : doc, options);
+      downloadBlob(blob, fileName);
+    } catch (e) {
+      toast.error("Couldn't make the PDF", { description: e?.message ? `${e.message}. Try again in a moment.` : "Try again in a moment." });
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (
+    <Button variant={variant} size={size} icon={icon} loading={busy} disabled={disabled || !doc} onClick={onClick} className={className}>
+      {label}
+    </Button>
+  );
+}

package/registry/blocks/pdf-document/primitives.jsx

@@ -0,0 +1,271 @@
+"use client";
+
+// The PDF primitives: a small set of parts that draw a clean business
+// document in the workspace's theme. They render INSIDE a PDF (the
+// @react-pdf/renderer tree), never into the page: compose them into a
+// document and pass it to renderPdf (./pdf-document) or PdfDownloadButton.
+//
+// Every colour comes from the theme in context (./theme.js — resolved from
+// the workspace's CSS variables when the PDF is made); a part takes a
+// `tone` name, never a colour. Type is one family (Helvetica, built into
+// every PDF reader, unless a brand font is registered) at a few fixed
+// sizes, on a 4pt rhythm.
+import { createContext, useContext } from "react";
+import { Document, Image, Link, Page, Text, View } from "@react-pdf/renderer";
+import { DEFAULT_PDF_THEME } from "./theme";
+
+const ThemeContext = createContext(DEFAULT_PDF_THEME);
+
+/** Wraps a PDF tree in a theme; renderPdf does this for you. */
+export function PdfThemeProvider({ theme, children }) {
+  return <ThemeContext.Provider value={theme ?? DEFAULT_PDF_THEME}>{children}</ThemeContext.Provider>;
+}
+
+/** The theme the PDF is being drawn with (./theme.js buildPdfTheme). */
+export function usePdfTheme() {
+  return useContext(ThemeContext);
+}
+
+/** The type scale, in points. Body is 9.5pt: a business document is read
+ *  at arm's length, and this is the size a good invoice uses. */
+export const PDF_TYPE = { xs: 7.5, sm: 8.5, md: 9.5, lg: 12, xl: 16, xxl: 24 };
+
+const TONE = (t, tone) =>
+  ({ default: t.ink, muted: t.muted, accent: t.accentInk, success: t.success, warning: t.warning, danger: t.danger, info: t.info, onAccent: t.onAccent })[tone] ?? t.ink;
+
+// Body leading, set on each text (a leading on the page is measured wrong
+// by the layout and lines overlap).
+const LEADING = 1.4; // always with an explicit fontSize: the leading is read against it
+
+const MARGINS = { compact: 36, normal: 48, roomy: 64 };
+
+/** The document: one flowing page (it breaks onto more by itself), the
+ *  brand's accent bar along the top edge, and a footer with the page
+ *  count on every page.
+ *
+ *    title, author, subject   the PDF's properties (a reader shows title)
+ *    size       "A4" (default) · "LETTER" · "LEGAL" · [width, height] pt
+ *    landscape  false
+ *    margin     compact (36pt) · normal (48pt, default) · roomy (64pt)
+ *    accentBar  true: a 4pt bar of the accent along the top of each page
+ *    footer     a line at the foot of each page (left); the page count
+ *               sits at the right. null: no footer at all. */
+export function PdfDocument({ title, author, subject, size = "A4", landscape = false, margin = "normal", accentBar = true, footer, children }) {
+  const t = usePdfTheme();
+  const m = MARGINS[margin] ?? MARGINS.normal;
+  return (
+    <Document title={title} author={author} subject={subject} creator={author} producer={author}>
+      <Page
+        size={size}
+        orientation={landscape ? "landscape" : "portrait"}
+        style={{ paddingTop: m, paddingBottom: m + (footer === null ? 0 : 20), paddingHorizontal: m, backgroundColor: t.paper, color: t.ink, fontFamily: t.font, fontSize: PDF_TYPE.md }}
+      >
+        {accentBar ? <View fixed style={{ position: "absolute", top: 0, left: 0, right: 0, height: 4, backgroundColor: t.accent }} /> : null}
+        {children}
+        {footer === null ? null : (
+          <View fixed style={{ position: "absolute", bottom: m - 16, left: m, right: m, flexDirection: "row", justifyContent: "space-between", fontSize: PDF_TYPE.xs, color: t.muted }}>
+            <Text>{footer ?? ""}</Text>
+            <Text render={({ pageNumber, totalPages }) => (totalPages > 1 ? `Page ${pageNumber} of ${totalPages}` : "")} />
+          </View>
+        )}
+      </Page>
+    </Document>
+  );
+}
+
+/** A column with a gap between its children (pt). */
+export function PdfStack({ gap = 8, style, children, wrap, break: pageBreak }) {
+  return (
+    <View wrap={wrap} break={pageBreak} style={[{ flexDirection: "column", gap }, style ?? {}]}>
+      {children}
+    </View>
+  );
+}
+
+/** A row. `justify` start · between · end; `align` start · center · end ·
+ *  baseline. Children share the width by their own `flex` (see PdfCol). */
+export function PdfRow({ gap = 16, justify = "start", align = "start", style, children, wrap }) {
+  const J = { start: "flex-start", between: "space-between", end: "flex-end", center: "center" };
+  const A = { start: "flex-start", center: "center", end: "flex-end", baseline: "baseline", stretch: "stretch" };
+  return (
+    <View wrap={wrap} style={[{ flexDirection: "row", gap, justifyContent: J[justify] ?? J.start, alignItems: A[align] ?? A.start }, style ?? {}]}>
+      {children}
+    </View>
+  );
+}
+
+/** One column of a PdfRow: `flex` its share (default 1), or `width` pt. */
+export function PdfCol({ flex = 1, width, style, children }) {
+  const size = width ? { width } : flex === 0 ? { flexGrow: 0, flexShrink: 0 } : { flexGrow: flex, flexShrink: 1, flexBasis: 0, minWidth: 0 };
+  return <View style={[size, style ?? {}]}>{children}</View>;
+}
+
+/** Text. size xs · sm · md (default) · lg · xl · xxl; tone default · muted
+ *  · accent · success · warning · danger · info; bold; align. */
+export function PdfText({ size = "md", tone = "default", bold = false, align, style, children, ...rest }) {
+  const t = usePdfTheme();
+  return (
+    <Text
+      {...rest}
+      style={[{ fontSize: PDF_TYPE[size] ?? PDF_TYPE.md, lineHeight: LEADING, color: TONE(t, tone), fontFamily: bold ? t.fontBold : t.font, textAlign: align }, style ?? {}]}
+    >
+      {children}
+    </Text>
+  );
+}
+
+/** A heading: level 1 (24pt, the document's name) · 2 (12pt, a section)
+ *  · 3 (9.5pt bold, a group inside one). Tight leading, never all caps. */
+export function PdfHeading({ level = 2, tone = "default", align, style, children }) {
+  const t = usePdfTheme();
+  const L = {
+    1: { fontSize: PDF_TYPE.xxl, lineHeight: 1.15, letterSpacing: -0.4 },
+    2: { fontSize: PDF_TYPE.lg, lineHeight: 1.3 },
+    3: { fontSize: PDF_TYPE.md, lineHeight: 1.4 },
+  };
+  return <Text style={[{ fontFamily: t.fontBold, color: TONE(t, tone), textAlign: align }, L[level] ?? L[2], style ?? {}]}>{children}</Text>;
+}
+
+/** The small muted line above a value: "Billed to", "Due". */
+export function PdfLabel({ align, style, children }) {
+  const t = usePdfTheme();
+  return <Text style={[{ fontSize: PDF_TYPE.sm, color: t.muted, marginBottom: 3, textAlign: align }, style ?? {}]}>{children}</Text>;
+}
+
+/** A label over a value, the unit of a document's header. */
+export function PdfField({ label, align, strong = false, tone, children }) {
+  return (
+    <View>
+      <PdfLabel align={align}>{label}</PdfLabel>
+      <PdfText bold={strong} tone={tone} align={align} size={strong ? "lg" : "md"}>
+        {children}
+      </PdfText>
+    </View>
+  );
+}
+
+/** A hairline rule. `space` is the room above and below it (pt). */
+export function PdfDivider({ space = 16, strong = false }) {
+  const t = usePdfTheme();
+  return <View style={{ height: strong ? 1 : 0.75, backgroundColor: strong ? t.ink : t.rule, marginVertical: space }} />;
+}
+
+/** A soft box: a note, a callout, payment details. tone accent (default,
+ *  the accent's tint with a bar at its edge) · neutral (the faint band). */
+export function PdfCallout({ tone = "accent", title, style, children }) {
+  const t = usePdfTheme();
+  const accent = tone === "accent";
+  return (
+    <View
+      wrap={false}
+      style={[
+        { backgroundColor: accent ? t.accentSoft : t.band, borderLeftWidth: accent ? 2 : 0, borderLeftColor: t.accent, paddingVertical: 10, paddingHorizontal: 12, borderRadius: 3 },
+        style ?? {},
+      ]}
+    >
+      {title ? <PdfHeading level={3} style={{ marginBottom: 3 }}>{title}</PdfHeading> : null}
+      {typeof children === "string" ? <PdfText>{children}</PdfText> : children}
+    </View>
+  );
+}
+
+/** A small pill: "Paid", "Accepted". tone accent · success · warning ·
+ *  danger · neutral. An outline, so it prints well in black and white. */
+export function PdfBadge({ tone = "accent", children }) {
+  const t = usePdfTheme();
+  const c = { accent: t.accentInk, success: t.success, warning: t.warning, danger: t.danger, neutral: t.muted }[tone] ?? t.accentInk;
+  return (
+    <View style={{ alignSelf: "flex-start", borderWidth: 1, borderColor: c, borderRadius: 3, paddingHorizontal: 6, paddingVertical: 2 }}>
+      <Text style={{ fontSize: PDF_TYPE.sm, fontFamily: t.fontBold, color: c }}>{children}</Text>
+    </View>
+  );
+}
+
+/** A table: a quiet header on the faint band, hairlines between rows, the
+ *  header repeated on every page it runs onto, a row never split.
+ *
+ *    columns  [{ key, label, flex? (default 1) | width? (pt), align?:
+ *              "left" | "right" | "center", render?(row) → string | node }]
+ *    rows     [{ … }]; a row's `detail` (string) prints as a muted second
+ *             line under the FIRST column
+ *    empty    what to print when there are no rows */
+export function PdfTable({ columns = [], rows = [], empty = "Nothing here.", style }) {
+  const t = usePdfTheme();
+  const cell = (c) => [c.width ? { width: c.width } : { flex: c.flex ?? 1, minWidth: 0 }, { paddingHorizontal: 6, textAlign: c.align ?? "left" }];
+  return (
+    <View style={style}>
+      <View fixed style={{ flexDirection: "row", backgroundColor: t.band, borderRadius: 3, paddingVertical: 6 }}>
+        {columns.map((c) => (
+          <Text key={c.key} style={[...cell(c), { fontSize: PDF_TYPE.sm, color: t.muted }]}>
+            {c.label}
+          </Text>
+        ))}
+      </View>
+      {rows.length === 0 ? (
+        <Text style={{ paddingVertical: 12, paddingHorizontal: 6, color: t.muted }}>{empty}</Text>
+      ) : (
+        rows.map((row, i) => (
+          <View key={row.id ?? i} wrap={false} style={{ flexDirection: "row", paddingVertical: 8, borderBottomWidth: 0.75, borderBottomColor: t.rule }}>
+            {columns.map((c, j) => {
+              const value = c.render ? c.render(row, i) : row[c.key];
+              return (
+                <View key={c.key} style={cell(c)}>
+                  {typeof value === "string" || typeof value === "number" ? (
+                    <Text style={{ textAlign: c.align ?? "left", fontFamily: j === 0 ? t.fontBold : t.font }}>{String(value)}</Text>
+                  ) : (
+                    value ?? null
+                  )}
+                  {j === 0 && row.detail ? <Text style={{ color: t.muted, fontSize: PDF_TYPE.sm, lineHeight: LEADING, marginTop: 2 }}>{row.detail}</Text> : null}
+                </View>
+              );
+            })}
+          </View>
+        ))
+      )}
+    </View>
+  );
+}
+
+/** The sums under a table, flush right: label and value per line, the
+ *  last `strong` line set larger over a rule.
+ *
+ *    rows   [{ label, value, strong?, tone? }]
+ *    width  the block's width (pt, default 220) */
+export function PdfTotals({ rows = [], width = 220 }) {
+  const t = usePdfTheme();
+  return (
+    <View wrap={false} style={{ alignSelf: "flex-end", width, marginTop: 12 }}>
+      {rows.filter(Boolean).map((r, i) => (
+        <View
+          key={r.label ?? i}
+          style={[
+            { flexDirection: "row", justifyContent: "space-between", paddingVertical: 3, paddingHorizontal: 6 },
+            r.strong ? { borderTopWidth: 1, borderTopColor: t.ink, marginTop: 6, paddingTop: 8 } : {},
+          ]}
+        >
+          <Text style={{ color: r.strong ? t.ink : t.muted, fontFamily: r.strong ? t.fontBold : t.font, fontSize: r.strong ? PDF_TYPE.lg : PDF_TYPE.md }}>{r.label}</Text>
+          <Text style={{ color: TONE(t, r.tone ?? "default"), fontFamily: r.strong ? t.fontBold : t.font, fontSize: r.strong ? PDF_TYPE.lg : PDF_TYPE.md }}>{r.value}</Text>
+        </View>
+      ))}
+    </View>
+  );
+}
+
+/** Lines of plain text (an address): each on its own line, muted after
+ *  the first unless `muted` is false. Empty lines are dropped. */
+export function PdfLines({ lines = [], first = true, muted = true, align }) {
+  const t = usePdfTheme();
+  return (
+    <View>
+      {lines.filter(Boolean).map((line, i) => (
+        <Text key={i} style={{ fontSize: PDF_TYPE.md, lineHeight: LEADING, textAlign: align, color: muted && !(first && i === 0) ? t.muted : t.ink, fontFamily: first && i === 0 ? t.fontBold : t.font }}>
+          {line}
+        </Text>
+      ))}
+    </View>
+  );
+}
+
+// The rest of @react-pdf/renderer's parts, under our names, so a block
+// built on this one never imports the library itself.
+export { View as PdfView, Text as PdfRawText, Image as PdfImage, Link as PdfLink };