makersclaw 0.2.0 → 0.3.1

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

@@ -0,0 +1,179 @@
+"use client";
+
+// QuoteDocument — the default business document: a quote, an estimate or
+// an invoice, from data. The quote-builder and proposal blocks print
+// through it; an app can too (renderPdf(<QuoteDocument … />)).
+//
+// The layout is the classic one people trust: who it is from at the top
+// left, what it is and its number at the top right, then who it is for,
+// the dates and the amount in a row of labelled fields, the lines in a
+// table, the sums flush right, and notes, terms and how to pay at the
+// foot. One accent (the theme's primary): the bar along the top edge and
+// the amount due. Everything else is ink and grey on paper.
+import { Image, View } from "@react-pdf/renderer";
+import {
+  PdfBadge,
+  PdfCallout,
+  PdfCol,
+  PdfDivider,
+  PdfDocument,
+  PdfField,
+  PdfHeading,
+  PdfLabel,
+  PdfLines,
+  PdfRow,
+  PdfStack,
+  PdfTable,
+  PdfText,
+  PdfTotals,
+} from "./primitives";
+import { formatMoney, formatPdfDate, formatQuantity, quoteTotals } from "./money";
+
+const WORDS = {
+  quote: { title: "Quote", to: "Prepared for", date: "Issued", until: "Valid until", total: "Total" },
+  estimate: { title: "Estimate", to: "Prepared for", date: "Issued", until: "Valid until", total: "Estimated total" },
+  invoice: { title: "Invoice", to: "Billed to", date: "Issued", until: "Due", total: "Amount due" },
+};
+
+/** A quote, estimate or invoice. See README ## QuoteDocument for every prop. */
+export function QuoteDocument({
+  kind = "quote",
+  number,
+  title,
+  issued,
+  until,
+  from = {},
+  to = {},
+  items = [],
+  currency = "USD",
+  locale = "en-US",
+  dateLocale = "en-GB",
+  taxRate,
+  taxLabel,
+  discount,
+  paid,
+  status,
+  statusTone = "success",
+  notes,
+  terms,
+  payment,
+  reference,
+  footer,
+  size = "A4",
+}) {
+  const w = WORDS[kind] ?? WORDS.quote;
+  const sums = quoteTotals({ items, discount, taxRate, paid });
+  const money = (n) => formatMoney(n, currency, locale);
+  const docTitle = title ?? w.title;
+  const fromLines = [from.name, ...(from.lines ?? []), from.email, from.phone, from.taxId ? `Tax ID ${from.taxId}` : null];
+  const toLines = [to.name, to.company, ...(to.lines ?? []), to.email];
+  const amountLabel = kind === "invoice" && sums.paid > 0 ? "Balance due" : w.total;
+  const hasSums = sums.discount > 0 || sums.tax > 0 || sums.paid > 0;
+
+  return (
+    <PdfDocument
+      title={[docTitle, number].filter(Boolean).join(" ")}
+      author={from.name}
+      subject={to.company ?? to.name}
+      size={size}
+      footer={footer ?? [from.name, from.email, from.website].filter(Boolean).join("  ·  ")}
+    >
+      {/* Top: the sender (logo or name), and what this is. */}
+      <PdfRow justify="between" align="start" gap={24}>
+        <PdfCol>
+          {from.logo ? <Image src={from.logo} style={{ height: 28, objectFit: "contain", objectPosition: "left", marginBottom: 10, alignSelf: "flex-start" }} /> : null}
+          <PdfLines lines={fromLines} first={!from.logo} />
+        </PdfCol>
+        <PdfCol flex={0} style={{ alignItems: "flex-end" }}>
+          <PdfHeading level={1} align="right">
+            {docTitle}
+          </PdfHeading>
+          {number ? (
+            <PdfText tone="muted" align="right" style={{ marginTop: 4 }}>
+              {number}
+            </PdfText>
+          ) : null}
+          {status ? (
+            <View style={{ marginTop: 8, alignSelf: "flex-end" }}>
+              <PdfBadge tone={statusTone}>{status}</PdfBadge>
+            </View>
+          ) : null}
+        </PdfCol>
+      </PdfRow>
+
+      <PdfDivider space={24} />
+
+      {/* Who it is for, the dates, and the one number that matters. */}
+      <PdfRow gap={24} align="start">
+        <PdfCol flex={1.6}>
+          <PdfLabel>{w.to}</PdfLabel>
+          <PdfLines lines={toLines} />
+        </PdfCol>
+        <PdfCol>
+          <PdfStack gap={10}>
+            {issued ? <PdfField label={w.date}>{formatPdfDate(issued, dateLocale)}</PdfField> : null}
+            {until ? <PdfField label={w.until}>{formatPdfDate(until, dateLocale)}</PdfField> : null}
+            {reference ? <PdfField label="Reference">{reference}</PdfField> : null}
+          </PdfStack>
+        </PdfCol>
+        <PdfCol style={{ alignItems: "flex-end" }}>
+          <PdfLabel align="right">{amountLabel}</PdfLabel>
+          <PdfText bold size="xl" tone="accent" align="right">
+            {money(sums.due)}
+          </PdfText>
+        </PdfCol>
+      </PdfRow>
+
+      {/* The lines. */}
+      <PdfTable
+        style={{ marginTop: 28 }}
+        empty="No line items yet."
+        columns={[
+          { key: "description", label: "Description", flex: 3 },
+          { key: "quantity", label: "Qty", width: 48, align: "right", render: (r) => [formatQuantity(r.quantity ?? 1, locale), r.unit].filter(Boolean).join(" ") },
+          { key: "unitPrice", label: "Unit price", width: 84, align: "right", render: (r) => money(r.unitPrice) },
+          { key: "amount", label: "Amount", width: 88, align: "right", render: (r, i) => money(sums.lines[i]) },
+        ]}
+        rows={items.map((it, i) => ({ ...it, id: it.id ?? i, detail: [it.detail, it.discountPercent ? `${formatQuantity(it.discountPercent, locale)}% off` : null].filter(Boolean).join(" · ") || undefined }))}
+      />
+
+      <PdfTotals
+        rows={[
+          hasSums && { label: "Subtotal", value: money(sums.subtotal) },
+          sums.discount > 0 && { label: discount?.label ?? (discount?.percent ? `Discount (${formatQuantity(discount.percent, locale)}%)` : "Discount"), value: `-${money(sums.discount)}` },
+          sums.tax > 0 && { label: taxLabel ?? `Tax (${formatQuantity(taxRate, locale)}%)`, value: money(sums.tax) },
+          sums.paid > 0 && { label: "Total", value: money(sums.total) },
+          sums.paid > 0 && { label: "Paid", value: `-${money(sums.paid)}` },
+          { label: amountLabel, value: money(sums.due), strong: true },
+        ]}
+      />
+
+      {/* The foot: notes, terms, how to pay. */}
+      {notes || terms || payment ? (
+        <PdfStack gap={16} style={{ marginTop: 32 }} wrap={false}>
+          {notes ? <PdfCallout title="Notes">{notes}</PdfCallout> : null}
+          {terms || payment ? (
+            <PdfRow gap={24}>
+              {terms ? (
+                <PdfCol>
+                  <PdfHeading level={3} style={{ marginBottom: 3 }}>
+                    Terms
+                  </PdfHeading>
+                  <PdfText tone="muted">{terms}</PdfText>
+                </PdfCol>
+              ) : null}
+              {payment ? (
+                <PdfCol>
+                  <PdfHeading level={3} style={{ marginBottom: 3 }}>
+                    How to pay
+                  </PdfHeading>
+                  {Array.isArray(payment) ? <PdfLines lines={payment} first={false} /> : <PdfText tone="muted">{payment}</PdfText>}
+                </PdfCol>
+              ) : null}
+            </PdfRow>
+          ) : null}
+        </PdfStack>
+      ) : null}
+    </PdfDocument>
+  );
+}

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

@@ -0,0 +1,193 @@
+// The PDF's colours, from the workspace theme.
+//
+// A PDF cannot read a CSS variable: every colour in it is a concrete
+// value written into the file. So the theme is read ONCE, at the moment
+// the PDF is made, from the page's own variables (--color-primary…), and
+// passed into the document as plain values. Change the theme and the next
+// PDF follows; a PDF already made keeps the colours it was made with.
+//
+// Two schemes:
+//   paper  (the default) — what gets printed, emailed, signed. White paper,
+//          near-black ink, grey rules, and the theme's PRIMARY as the one
+//          accent. A dark workspace still sends a light invoice. When the
+//          theme's primary is too pale to read on white (a mint, a lemon),
+//          the text uses a darker shade of it (accentInk, 4.5:1 or more)
+//          while bars and fills keep the colour itself.
+//   theme  — the workspace's own background, text and borders, for a PDF
+//          meant to be read on screen in the brand's look.
+//
+// No colour value is written in this file: the paper constants are byte
+// triples turned into strings at run time, and everything else is read
+// from the page. Everything but resolvePdfTheme() is a plain function, so
+// it runs in node and on the server (where the fallback theme is used).
+
+/** The slots read from the page. */
+export const PDF_SLOTS = ["background", "foreground", "muted", "muted-foreground", "border", "primary", "primary-foreground", "success", "warning", "destructive", "info"];
+
+const clamp = (n, lo = 0, hi = 255) => Math.max(lo, Math.min(hi, n));
+const byte = (n) => clamp(Math.round(n)).toString(16).padStart(2, "0");
+
+/** [r, g, b] (0-255) → a "#rrggbb" string. */
+export function toHex([r, g, b]) {
+  return "#" + byte(r) + byte(g) + byte(b);
+}
+
+/** "#rrggbb" → [r, g, b], or null. */
+export function parseHex(value) {
+  const m = /^#?([0-9a-f]{6})$/i.exec(String(value ?? "").trim());
+  if (!m) return null;
+  const n = parseInt(m[1], 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+
+/** t of colour a over (1 - t) of colour b. */
+export function mix(a, b, t) {
+  const x = parseHex(a);
+  const y = parseHex(b);
+  if (!x || !y) return a ?? b;
+  const k = clamp(t, 0, 1);
+  return toHex([0, 1, 2].map((i) => x[i] * k + y[i] * (1 - k)));
+}
+
+/** WCAG relative luminance of a hex colour (0 black … 1 white). */
+export function luminance(hex) {
+  const c = parseHex(hex);
+  if (!c) return 0;
+  const lin = c.map((v) => {
+    const s = v / 255;
+    return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2];
+}
+
+/** WCAG contrast ratio of two hex colours (1 … 21). */
+export function contrast(a, b) {
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+/** `colour`, darkened toward `ink` (or lightened, on a dark ground) until
+ *  it reads on `ground` at `ratio` — the shade used for accent TEXT. */
+export function readableOn(colour, ground, ink, ratio = 4.5) {
+  if (!parseHex(colour)) return ink;
+  if (contrast(colour, ground) >= ratio) return colour;
+  for (let t = 0.9; t >= 0; t -= 0.05) {
+    const c = mix(colour, ink, t);
+    if (contrast(c, ground) >= ratio) return c;
+  }
+  return ink;
+}
+
+/** Black or white, whichever reads better on `fill`. */
+export function inkOn(fill) {
+  return luminance(fill) > 0.179 ? PAPER.ink : PAPER.paper;
+}
+
+// Print constants: paper, ink, a quiet grey for secondary text (4.5:1 on
+// the paper), a hairline rule and a faint band.
+const PAPER = {
+  paper: toHex([255, 255, 255]),
+  ink: toHex([23, 23, 27]),
+  muted: toHex([107, 107, 118]),
+  rule: toHex([226, 226, 231]),
+  band: toHex([246, 246, 248]),
+};
+
+// The fallback accent and tones: used on the server and wherever the page
+// has no theme to read.
+const FALLBACK = {
+  primary: toHex([36, 99, 235]),
+  success: toHex([21, 112, 58]),
+  warning: toHex([154, 74, 6]),
+  destructive: toHex([192, 28, 28]),
+  info: toHex([29, 78, 216]),
+};
+
+/** The theme a PDF is drawn with, from slot → hex (as read from the page).
+ *
+ *    paper, ink, muted, rule, band   the page, body text, secondary text,
+ *                                    hairlines, a faint fill (table head)
+ *    accent                          the theme's primary, for bars and fills
+ *    accentInk                       the accent as text: 4.5:1 on the paper
+ *    accentSoft                      a light tint of it, for a callout
+ *    onAccent                        text on an accent fill
+ *    success, warning, danger, info  status tones, readable on the paper
+ *    font, fontBold                  the PDF's faces (see registerPdfFont)
+ */
+export function buildPdfTheme(slots = {}, { scheme = "paper", font } = {}) {
+  const s = Object.fromEntries(Object.entries(slots).filter(([, v]) => parseHex(v)));
+  const own = scheme === "theme" && s.background && s.foreground;
+  const paper = own ? s.background : PAPER.paper;
+  const ink = own ? s.foreground : PAPER.ink;
+  const muted = own ? readableOn(s["muted-foreground"] ?? mix(ink, paper, 0.62), paper, ink, 4.5) : PAPER.muted;
+  const rule = own ? (s.border ?? mix(ink, paper, 0.14)) : PAPER.rule;
+  const band = own ? (s.muted ?? mix(ink, paper, 0.05)) : PAPER.band;
+  const accent = s.primary ?? FALLBACK.primary;
+  const tone = (slot) => readableOn(s[slot] ?? FALLBACK[slot], paper, ink, 4.5);
+  return {
+    scheme: own ? "theme" : "paper",
+    paper,
+    ink,
+    muted,
+    rule,
+    band,
+    accent,
+    accentInk: readableOn(accent, paper, ink, 4.5),
+    accentSoft: mix(accent, paper, 0.08),
+    onAccent: own && s["primary-foreground"] && contrast(s["primary-foreground"], accent) >= 4.5 ? s["primary-foreground"] : inkOn(accent),
+    success: tone("success"),
+    warning: tone("warning"),
+    danger: tone("destructive"),
+    info: tone("info"),
+    font: font?.family ?? "Helvetica",
+    fontBold: font?.bold ?? font?.family ?? "Helvetica-Bold",
+  };
+}
+
+/** The theme with nothing read from a page: paper, ink and a blue accent. */
+export const DEFAULT_PDF_THEME = buildPdfTheme({});
+
+// ---- the browser half -------------------------------------------------------
+
+/** Read the workspace theme from the CSS variables in effect at `root`
+ *  (default: <body>, so a data-theme or a theme scoped to an ancestor
+ *  counts) and build the PDF theme. A hidden probe takes
+ *  `color: var(--color-<slot>)`; the browser resolves var(), color-mix()
+ *  and oklch() into its computed colour, and a 1×1 canvas turns that into
+ *  bytes whatever syntax it came back in. On the server it returns the
+ *  fallback theme. */
+export function resolvePdfTheme(root, options) {
+  if (typeof document === "undefined") return buildPdfTheme({}, options);
+  const host = root ?? document.body;
+  if (!host) return buildPdfTheme({}, options);
+  const probe = document.createElement("span");
+  probe.setAttribute("aria-hidden", "true");
+  probe.style.position = "absolute";
+  probe.style.visibility = "hidden";
+  probe.style.pointerEvents = "none";
+  host.appendChild(probe);
+  const canvas = document.createElement("canvas");
+  canvas.width = 1;
+  canvas.height = 1;
+  const ctx = canvas.getContext("2d", { willReadFrequently: true });
+  const slots = {};
+  try {
+    for (const slot of PDF_SLOTS) {
+      probe.style.color = "";
+      probe.style.color = `var(--color-${slot})`;
+      const computed = getComputedStyle(probe).color;
+      if (!computed || !ctx) continue;
+      ctx.clearRect(0, 0, 1, 1);
+      ctx.fillStyle = "transparent";
+      ctx.fillStyle = computed;
+      ctx.fillRect(0, 0, 1, 1);
+      const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+      if (a === 0) continue;
+      // A translucent token (a tint) is laid on the paper, as it would print.
+      slots[slot] = a >= 255 ? toHex([r, g, b]) : mix(toHex([r, g, b]), PAPER.paper, a / 255);
+    }
+  } finally {
+    probe.remove();
+  }
+  return buildPdfTheme(slots, options);
+}

package/registry/blocks/pdf-viewer/README.md

@@ -0,0 +1,191 @@
+# PdfViewer
+
+A PDF on screen, in the workspace theme. The pages scroll in one column;
+a rail of thumbnails sits on the left and a page box in the toolbar
+jumps anywhere. Zoom by steps, fit the width, fit the page, or hold
+Ctrl/⌘ and scroll (a trackpad pinch works too) — the line under the
+pointer stays put. ⌘F finds words in the text: every match is marked on
+the page, Enter walks them.
+
+People can highlight. Select a sentence and a small bar offers
+**Highlight**, **Add note** and **Copy**. A highlight shows as a marker
+stroke in a theme colour; its note sits in the Highlights list beside
+the pages, where it is edited, recoloured or deleted (with Undo). Every
+change shows at once and saves through your callback; when a save fails,
+the change goes back and a toast says why.
+
+A narrow viewer (under 900px wide — a phone, a side column) turns the
+page rail and the Highlights list into sheets. Long files stay fast:
+only the pages near the window are drawn. Password-protected files ask
+for their password. A file that will not open says why and offers Try
+again.
+
+It is [React-PDF](https://github.com/wojtekmaj/react-pdf) (MIT) over
+Mozilla's [PDF.js](https://github.com/mozilla/pdf.js) (Apache-2.0)
+underneath: they parse and draw the pages and the selectable text. The
+toolbar, rails, search, highlights and states are ours, in the kit. The
+blocks built on this one (proposal-accept, a contract review screen…)
+import it, never `react-pdf` or `pdfjs-dist`.
+
+```jsx
+import { PdfViewer } from "../components/blocks/pdf-viewer";   // a Makersclaw app ("./blocks/pdf-viewer" from components/)
+import { PdfViewer } from "@/components/makersclaw/blocks/pdf-viewer";   // a shadcn project
+```
+
+`PdfViewer` is a client component: render it from a `"use client"`
+component. The helpers (`findMatches`, `toPageRects`, `sortHighlights`…)
+are plain functions and work on the server.
+
+## The file, and the worker
+
+`file` is a URL (same origin, or a server that allows CORS), a `Blob` /
+`File` (an upload, or a PDF made with the `pdf-document` block), or the
+bytes (`ArrayBuffer` / `Uint8Array`, copied — your buffer stays usable).
+
+PDF.js parses in a Web Worker. Nothing to set up: the block points
+PDF.js at `new URL("pdfjs-dist/build/pdf.worker.min.mjs", import.meta.url)`,
+which the app's bundler resolves at build time and emits as a hashed
+file under `/_next/static/media/`, with the base path applied. So the
+worker ships with the app, always matches the PDF.js version that calls
+it, and comes from the app's own origin — no file in `public/`, no CDN.
+
+## The data
+
+A highlight is one row:
+
+```js
+{
+  id: "hl_81",                 // yours
+  page: 3,                     // 1-based
+  rects: [{ x, y, w, h }],     // fractions of the page (0…1), top-left origin — hold at any zoom
+  text: "Fees rise by 4% at each annual renewal",   // the words highlighted
+  note: "Ask for a 3% cap.",   // optional
+  tone: "warning",             // warning (default) · info · success · destructive · primary
+  author: "Priya Raman",       // optional, shown under the note
+  createdAt: "2026-09-21",     // optional
+}
+```
+
+`rects` may be left out: a highlight given only by its `text` (and
+optionally its `page`) is placed where those words first appear, once
+the pages' text has been read. That is how an agent or a server flags a
+clause without knowing any geometry. A quote that is not in the text is
+listed under "Not found in the text". Store the `rects` the viewer sends
+you in `onHighlight` — they are exact; placing by words is close (the
+width inside a line is shared out by characters) and assumes pages that
+are not rotated.
+
+Store a highlight as a row in its own table (`document_id`, `page`,
+`rects` jsonb, `text`, `note`, `tone`, `author`, `created_at`).
+
+## Props
+
+- `file` — the PDF (see above). `null` shows the empty state.
+- `title` — names the viewer for screen readers and shows in the
+  toolbar on a wide viewer. Default `"PDF document"` for readers, nothing
+  shown.
+- `fileName` — what Download saves as. Default: the title + `.pdf`.
+- `highlights` — the rows above. Default `[]`.
+- `onHighlight(h)` — save a new highlight: `h` is `{ page, rects, text,
+  note, tone }`. Return `{ ok: true, id }` (your id replaces the viewer's
+  temporary one) or `{ ok: false, error }` (a throw counts as failed): it
+  is removed and a toast shows `error`. **Without `onHighlight` the viewer
+  is read-only**: no selection bar, and the Highlights list (shown only
+  when there are highlights) cannot edit.
+- `onHighlightChange(id, patch)` — `patch` is `{ note }` or `{ tone }`.
+  Same return; a failure puts the old value back.
+- `onHighlightDelete(id)` — called 5 seconds after a delete, once the
+  Undo in its toast has passed (or at once if the viewer unmounts). Same
+  return; a failure puts the highlight back.
+- `initialPage` — the page to open on. Default `1`.
+- `onPageChange(page, pageCount)` — whenever the page at the top of the
+  window changes.
+- `defaultZoom` — `"fit"` (width, the default) · `"page"` · a number
+  (`1` is 100%).
+- `thumbnails` — the page rail. Default `true`.
+- `search` — find in the text. Default `true`.
+- `download` — the Download button. Default `true`.
+- `notes` — open the Highlights list on a wide viewer at first. Default:
+  open when there are highlights.
+- `height` — the viewer's height, any CSS length. Default
+  `"min(80vh, 860px)"`; it never goes under 384px.
+- `loading` — `true` shows the skeleton (while you fetch or make the
+  file) instead of the empty state.
+- `emptyTitle` · `emptyBody` — the words when `file` is empty. Default
+  "No document yet" / "When a PDF is attached, it shows here."
+- `viewerRef` — a ref from `usePdfViewer()`; `ref.current` then has
+  `goToPage(n)`, `goToHighlight(id)`, `search(text)`, `setZoom(z)`, and
+  `page` / `pageCount`.
+- `className` — added to the frame (a margin, a width). Its border,
+  radius and height are the block's; set height through `height`.
+
+Keys, while focus is in the viewer: ⌘/Ctrl + F find, Enter / Shift+Enter
+next / previous match, Esc closes find; ⌘/Ctrl + `+` / `-` zoom, `0`
+fits the width; Page Up / Page Down and the arrows scroll; Tab reaches
+every control and each page thumbnail. Notes: ⌘/Ctrl + Enter saves, Esc
+cancels.
+
+## Example
+
+```jsx
+"use client";
+import { useState } from "react";
+import { PdfViewer } from "../components/blocks/pdf-viewer";
+import { insertRow, updateRow, deleteRow } from "../lib/actions";
+
+const source = "public.highlights";
+
+export function ContractReview({ doc, rows }) {
+  const [highlights, setHighlights] = useState(rows);
+  return (
+    <PdfViewer
+      file={doc.url}
+      title={doc.title}
+      highlights={highlights}
+      onHighlight={async (h) => {
+        const r = await insertRow({ source, values: { document_id: doc.id, ...h } });
+        if (r.ok) setHighlights((list) => [...list, { ...h, id: r.id }]);
+        return r;
+      }}
+      onHighlightChange={async (id, patch) => {
+        const r = await updateRow({ source, id, patch });
+        if (r.ok) setHighlights((list) => list.map((x) => (x.id === id ? { ...x, ...patch } : x)));
+        return r;
+      }}
+      onHighlightDelete={async (id) => {
+        const r = await deleteRow({ source, id });
+        if (r.ok) setHighlights((list) => list.filter((x) => x.id !== id));
+        return r;
+      }}
+    />
+  );
+}
+```
+
+Preview a PDF you make (the `pdf-document` block):
+
+```jsx
+const { blob } = usePdf(() => <QuoteDocument {...quote} />, [quote]);
+<PdfViewer file={blob} loading={!blob} title={`Quote ${quote.number}`} thumbnails={false} />
+```
+
+## What it will not do
+
+- Edit the PDF: fill its forms, sign it, rotate or reorder pages, or
+  write highlights into the file. Highlights are rows you store; the PDF
+  is untouched. (For signing, the `signature-pad` block.)
+- Search across a line break in one phrase: PDF.js splits text into
+  lines, and a match must sit inside one (like most quick finds).
+- Highlight in a scanned PDF (an image with no text layer): there is no
+  text to select or find.
+- Keep the old pages up while a NEW file loads: a changed `file` shows
+  the skeleton until it has opened.
+- Open a URL on another origin that does not allow CORS: fetch it on
+  your server and pass the bytes.
+- Print; the browser's own PDF reader does that from Download.
+
+## Credits
+
+Built on [React-PDF](https://github.com/wojtekmaj/react-pdf) by Wojciech
+Maj (MIT) and [PDF.js](https://github.com/mozilla/pdf.js) by Mozilla
+(Apache-2.0), used unmodified. See THIRD-PARTY-NOTICES.md.

package/registry/blocks/pdf-viewer/block.json

@@ -0,0 +1,14 @@
+{
+  "name": "pdf-viewer",
+  "title": "PdfViewer",
+  "description": "A PDF on screen, in the workspace theme (react-pdf + pdf.js): pages in one smooth scrolling column (only the pages near the window are drawn, so long files stay fast), a thumbnail rail, a page box, zoom by steps, fit width, fit page and Ctrl/⌘ + wheel or pinch, find in the text with every match marked, and highlights with notes: select text, choose Highlight or Add note, and it saves through onHighlight; notes are edited in a side list, colours are theme tokens, delete has Undo. Opens a URL, a Blob or bytes; password-protected files ask for the password; a narrow viewer turns its rails into sheets. The pdf.js worker ships with the app (no public/ file, no CDN).",
+  "useWhen": "A screen shows an existing PDF: a contract or proposal to review, a signed agreement, an uploaded invoice or statement, a report, a generated quote before it is sent; or people mark up a PDF and leave notes on passages. Pair it with pdf-document to preview a PDF you make. Not for making PDFs (pdf-document), for rich text people edit (doc-editor), or for marking up a screenshot (annotate).",
+  "tags": ["pdf", "viewer", "document", "reader", "preview", "highlight", "annotate", "notes", "search", "thumbnails", "zoom", "contract", "proposal", "react-pdf", "pdfjs"],
+  "exports": ["PdfViewer", "usePdfViewer", "HIGHLIGHT_TONES", "findMatches", "toPageRects", "mergeRects", "sortHighlights", "highlightAt", "fitScale", "ZOOM_STEPS"],
+  "files": ["index.js", "pdf-viewer.jsx", "notes.jsx", "helpers.js", "pdfjs.js", "ssr-shim.js", "ssr-shim-end.js"],
+  "requires": [],
+  "dependencies": {
+    "react-pdf": "11.0.0",
+    "pdfjs-dist": "6.3.289"
+  }
+}