@quario/viewer 0.3.0 → 0.5.0

package/CHANGELOG.md

@@ -7,6 +7,79 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.5.0] - 2026-09-05
+
+### Changed
+
+- **Previewing with `fonts` now needs `fontkit`, not `@pdf-lib/fontkit`.**
+  Install `fontkit` instead. The viewer measures host TrueType faces through
+  `@quario/layout`, whose optional parser this is; the old package crashed on
+  any OpenType face needing a shaping state machine, so those faces now
+  preview where they used to throw.
+
+- **The bar's controls are drawn icons.** The zoom trigger, the menu's check
+  and the error panel's dismiss are drawn from Lucide's set rather than by
+  hand, at one weight and one grid, and the dismiss no longer relies on the
+  host's font to draw a multiplication sign. They paint in `currentColor`, so
+  `--qv-icon` and `--qv-icon-active` still recolour them.
+
+- **An export button names its format in words.** Each one is a download icon
+  with `PDF`, `XLSX` or `CSV` beside it, in place of the sheet drawing that
+  lettered the format inside itself. The buttons are wider; the accessible
+  name is unchanged.
+
+### Fixed
+
+- **A zoom no longer leaves a page part-drawn.** Changing the zoom while a
+  page was still painting could leave that page carrying content at the old
+  scale on a canvas sized for the new one — the rest of it blank — and nothing
+  repainted it afterwards: scrolling away and back left it as it was. A page
+  whose paint is still in flight is now replaced rather than reused, so the
+  superseded paint has nowhere to land.
+
+## [0.4.0] - 2026-09-03
+
+### Added
+
+- **`fonts`.** The font mapping a host passes to `pdf({ fonts })`, so the
+  preview measures and draws in the same TrueType faces the document embeds.
+
+### Changed
+
+- **`renderComplete` and `rendered` settle once the pages on screen are
+  painted.** Both already answered for the newest render reaching the sheet;
+  what that means is now stated: the pages the reader can see carry their
+  pixels, and the pages further down the report do not hold the promise up.
+  A screenshot or a pixel-reading test taken at that moment sees what the
+  reader sees.
+
+- **A split slot's box now fills the split's height.** A slot's background and
+  border stopped at that slot's own content and now take the split's height,
+  the way a table cell's take their row's. See the `@quario/layout` changelog
+  for the rule and for what it costs a report that relied on the short box.
+
+- **The sheet has pages, and they break where the PDF's do.** The viewer
+  depends on `@quario/layout` and paints the same display list the pdf target
+  writes, one canvas per page, in the faces the document itself uses.
+  Zoom is a repaint, so text stays crisp at 200%; the menu's first row reads
+  "Fit page" and fit sizes one page to the width. Breaking:
+  `targets` is exports only — no `"html"` target is required or read — and a
+  `page` change re-lays the report out rather than resizing a sheet. The
+  unlicensed marking is painted per page from the list; the `--qv-mark`
+  token is gone with the DOM stamps.
+
+### Fixed
+
+- **A long report no longer asks for a backing store per page.** The viewer
+  paints the pages near the viewport — the ones on screen and one screenful
+  either side — and keeps every other page sized but blank. A report of a
+  few hundred pages used to ask the browser for gigabytes of canvas; past
+  what it would grant, pages came up blank with nothing reported, which on a
+  HiDPI display took only a moderately long report. Every page still holds
+  its place, so the scrollbar and the scroll extent are the whole report from
+  the first frame, and a zoom step now repaints a handful of pages instead of
+  walking the document.
+
 ## [0.3.0] - 2026-09-02
 
 ### Changed

package/README.md

@@ -1,24 +1,25 @@
 # @quario/viewer
 
 **The embeddable report viewer for [quario](https://www.npmjs.com/package/quario), as a custom
-element.** Write `<quario-viewer>`, assign it a compiled report, the targets to render with, and
-data; it displays the rendered report on a white sheet in its shadow root and offers export
-downloads for the exportable targets you passed.
+element.** Write `<quario-viewer>`, assign it a compiled report, the export targets you want, and
+data; it lays the report out on pages — the same pages the PDF target writes — paints them on a
+white sheet in its shadow root, and offers export downloads for the targets you passed.
 
-The viewer is not a render target and compiles nothing. You pass the configured targets you want;
-the viewer displays the `"html"` target's output and wires an export button to each exportable
-target in the list (`"pdf"`, `"xlsx"`, `"csv"`). The bar always carries the zoom control; with no
-exportable target it carries nothing else.
+The viewer is not a render target and compiles nothing. The sheet is `@quario/layout`'s display
+list, painted page by page; you pass the export targets you want, and the viewer wires a button
+to each (`"pdf"`, `"xlsx"`, `"csv"`). The bar always carries the zoom control; with no exportable
+target it carries nothing else.
 
 ## Install
 
 ```bash
-npm install quario @quario/html @quario/viewer
+npm install quario @quario/viewer
 ```
 
 The engine is a peer; the viewer itself depends on no target package. Install the targets you want
-beside it (`@quario/pdf`, `@quario/xlsx`, `@quario/csv`) and pass them in. Its own runtime dependency
-is [Lit](https://lit.dev) (`lit` + `@lit/task`), plain ESM like everything else here. ESM-only, and
+to export with (`@quario/pdf`, `@quario/xlsx`, `@quario/csv`) and pass them in. Its own runtime
+dependencies are [Lit](https://lit.dev) (`lit` + `@lit/task`) and `@quario/layout`, the paged
+layout it paints, plain ESM like everything else here. ESM-only, and
 browser-only by nature: the element needs a DOM. CSP-safe like the rest of quario. No
 string-to-code paths, chrome styled through constructed stylesheets, so your `style-src` never
 sees a style tag.
@@ -27,7 +28,6 @@ sees a style tag.
 
 ```js
 import { csv } from "@quario/csv";
-import { html } from "@quario/html";
 import { pdf } from "@quario/pdf";
 import { xlsx } from "@quario/xlsx";
 import { quario } from "quario";
@@ -35,14 +35,17 @@ import "@quario/viewer/register";
 
 const view = document.querySelector("quario-viewer");
 view.report = quario().report(schema, funcs);
-view.targets = [html(), pdf(), xlsx(), csv()];
+view.targets = [pdf(), xlsx(), csv()];
 view.data = data;
 view.filename = "sales";
 ```
 
 with `<quario-viewer></quario-viewer>` in your markup, sized by your own CSS. The element is
-`display: block`. Importing `@quario/viewer` defines nothing: the main entry exports the
-`QuarioViewer` class and is side-effect-free, and `@quario/viewer/register` performs the one-line
+`display: block`, and its chrome is laid out to fit a width of **320px** — a phone-width embed is
+the narrowest the bar is designed for. Narrower than that and the export buttons push the zoom
+control off the left of the bar, quietly: the bar does not wrap or scroll. Importing
+`@quario/viewer` defines nothing: the main entry exports the `QuarioViewer` class and is
+side-effect-free, and `@quario/viewer/register` performs the one-line
 `customElements.define("quario-viewer", QuarioViewer)`. A host that wants its own tag imports the
 class and defines it itself. The repository ships this wiring as a runnable page at
 `example/viewer.js`.
@@ -52,50 +55,51 @@ package to install. See [Using with React, Vue and Svelte](#using-with-react-vue
 
 ## Properties
 
-| Property      | Takes                                        | Default     |
-| ------------- | -------------------------------------------- | ----------- |
-| `report`      | A compiled report from a quario instance     | -           |
-| `targets`     | Target objects; one named `"html"` required  | -           |
-| `data`        | The render document                          | `undefined` |
-| `zoom`        | `"fit"` or a percentage between 25 and 200   | `"fit"`     |
-| `page`        | Sheet geometry (the pdf target's vocabulary) | A4, 54pt    |
-| `filename`    | Export download name, without extension      | `"report"`  |
-| `colorScheme` | `"light"`, `"dark"`, or `"auto"`             | `"light"`   |
-
-Properties, not attributes: `report`, `targets`, `data` and `page` are values no attribute could
-carry. `targets` mirrors `report.render(target, data)`: the `"html"` target renders the sheet, and
-`"pdf"`/`"xlsx"`/`"csv"` targets become export buttons, in the order given. The quario instance (and
-with it the license and the registry) stays yours: the element takes the compiled report, never a
-schema.
+| Property      | Takes                                           | Default     |
+| ------------- | ----------------------------------------------- | ----------- |
+| `report`      | A compiled report from a quario instance        | -           |
+| `targets`     | Export targets, possibly none                   | -           |
+| `data`        | The render document                             | `undefined` |
+| `zoom`        | `"fit"` or a percentage between 25 and 200      | `"fit"`     |
+| `page`        | Page geometry, as passed to `pdf({ page })`     | A4, 54pt    |
+| `fonts`       | The font mapping, as passed to `pdf({ fonts })` | none        |
+| `filename`    | Export download name, without extension         | `"report"`  |
+| `colorScheme` | `"light"`, `"dark"`, or `"auto"`                | `"light"`   |
+
+Properties, not attributes: `report`, `targets`, `data`, `page` and `fonts` are values no attribute
+could carry. `targets` mirrors `report.render(target, data)` for the exports: `"pdf"`/`"xlsx"`/`"csv"`
+targets become export buttons, in the order given, and the sheet needs none of them. The quario
+instance (and with it the license and the registry) stays yours: the element takes the compiled
+report, never a schema.
 
 Assigning `data` (or any of the others) re-renders. Rapid successive writes render only the newest
 state: a slow render can never overwrite a newer one, and a superseded render fires no event.
 Assignments are compared by identity, so to re-render from the same object, assign a fresh one
 (`view.data = { ...data }`).
 
-`page` is the pdf target's vocabulary and defaults, and it is **purely visual**: it gives the white
-sheet the browser lays the report out on its width, its padding, and at least one page of height. The PDF target's own geometry lives
-in the host's `pdf({ page })` configuration. Pass the same values to both so preview and export
-agree.
+`page` and `fonts` are the pdf target's own options: the viewer lays the report out on them, so
+passing the same values to the element and to `pdf({ page, fonts })` is what makes the preview
+page where the document pages, in the same faces. A `page` or `fonts` write re-lays the report
+out.
 
 ## Events and `renderComplete`
 
 ```js
 view.addEventListener("rendered", () => {});
 view.addEventListener("error", ({ detail: { error, kind } }) => {});
-await view.renderComplete; // true when the newest render reached the sheet
+await view.renderComplete; // true when the newest render landed on the sheet
 ```
 
-`rendered` fires each time a render reaches the sheet; `error` fires for every failure you should
+`rendered` fires each time a render lands on the sheet; `error` fires for every failure you should
 know about, with `detail.kind` naming which: `"mount-render"` until a render has ever landed,
 `"update-render"` after, `"export"` for a download that could not be produced. Both events are
 non-bubbling, like `<img>`'s. Listen on the element. (Because the event is named `error`, an
 inline `onerror` attribute on the element would fire too; `window.onerror` never sees it.)
 
-`renderComplete` awaits the newest render settling: `true` when it reached the sheet, `false` when
-it failed or there was nothing to render. It never rejects; failures arrive on the `error` event.
-Like every outcome here, it answers for the newest render only. A superseded render's failure is
-reported to no one.
+`renderComplete` awaits the newest render settling: `true` when it landed on the sheet with the pages
+on screen painted, `false` when it failed or there was nothing to render. It never rejects; failures
+arrive on the `error` event. `rendered` fires at that same moment. Like every outcome here, it
+answers for the newest render only. A superseded render's failure is reported to no one.
 
 Your own mistakes surface on the same channel: a report that is not compiled, a missing
 `"html"` target, or a malformed option property becomes a `TypeError` naming the property, on
@@ -200,54 +204,59 @@ listeners:
 
 ## Zoom
 
-The bar's magnifier opens the zoom menu: **Fit sheet** on its own, then 25%, 50%, 75%, 100%, 150%
-and 200%. A check marks the current mode — Fit sheet whenever the viewer is fitting, whatever
+The bar's magnifier opens the zoom menu: **Fit page** on its own, then 25%, 50%, 75%, 100%, 150%
+and 200%. A check marks the current mode — Fit page whenever the viewer is fitting, whatever
 percentage that came out at — and the percentage on screen is what the trigger is named after
 ("Zoom, 62%"), so nothing in the bar changes width as it moves. The `zoom` property picks the mode
 the viewer opens in: a percentage between 25 and 200 — continuous, not one of the menu's stops — or
 `"fit"`, the default. A percentage the menu does not offer leaves every row unchecked.
 
-Fit sizes the sheet to the viewer's width and **only ever shrinks**: given room to spare it stops at
+Fit sizes one page to the viewer's width and **only ever shrinks**: given room to spare it stops at
 100%, so the report is shown at its true point size rather than blown up. It has no floor, so a
 narrow pane fits at whatever percentage that takes — below 25% the menu has no row to return to it,
-and **Fit sheet** is the only way back. A fitted viewer follows its own box, so a collapsing panel
+and **Fit page** is the only way back. A fitted viewer follows its own box, so a collapsing panel
 or a resized window re-fits on its own.
 
-The preview **scales; it never reflows.** Zooming shrinks or enlarges the rendered sheet like a
-photograph. Line breaks, column widths and point sizes stay what they are at 100%, so the sheet
-stays the document the pdf target will page. Pass the same `page` values to preview and export so
-they agree.
+The preview **scales; it never reflows.** Zooming repaints the pages larger or smaller, like a
+photograph that stays sharp. Line breaks, column widths and point sizes stay what they are at
+100%, because the layout never changes under a zoom.
 
-## What the preview is
-
-On-screen layout is the browser's: one continuous sheet, no pagination. The PDF export paginates
-independently in the pdf target. The preview approximates; the exports are exact.
+Only the pages near the viewport are painted — the ones on screen and one screenful either side.
+Every page keeps its size, so the scrollbar and the scroll extent are the whole report from the
+start; a page further off is blank paper until you scroll to it, which is why a zoom step costs the
+same on a thousand-page report as on a five-page one.
 
-The sheet is page-shaped: `page` gives it both its width and at least one page of height, so a
-report shorter than a page sits on paper the shape of the page you configured rather than on a band
-the height of its own content. It is a minimum, so a longer report keeps growing on the one sheet.
-Sizing a container to a viewer showing a short report therefore reserves a full page — set `zoom`
-to a percentage small enough where the box has to stay small. The sheet still draws no page
-boundaries: only the pdf target knows where pages fall.
-
-The sheet is the html target's fragment, so a report with image items shows them through that
-target's `data:` URIs. A host page with a Content Security Policy needs `img-src data:` for them
-to display, the same deployment requirement the fragment carries anywhere else.
+## What the preview is
 
-Rendering an unlicensed evaluation, rotated watermarks sit on the sheet — one per page-sized band
-of the continuous preview — and scroll and zoom with the report, the way the PDF export marks every
-page. The wording arrives inside the html target's output, on its `.q-unlicensed` badge; the viewer
-hides that element from sight (keeping it readable by assistive technology) and draws the stamps on
-the sheet itself. A licensed render carries neither.
+The pages on screen are the pages the PDF export writes: both consume one layout, `@quario/layout`'s
+display list, laid out on your `page` and `fonts`. A report shorter than a page is one page; a
+longer one is as many as the layout breaks it into, stacked down the sheet. Sizing a container to a
+viewer showing a short report therefore reserves a full page — set `zoom` to a percentage small
+enough where the box has to stay small.
+
+Each page is a canvas, and text on it is drawn in the face the document will use. A TrueType
+family you pass as `fonts` is registered from your own bytes and drawn as the browser shapes it —
+the same shaping the PDF gets from the same file, so ligatures, joined scripts and accents look
+here the way they will on paper. Text in the built-in families is drawn character by character at
+the advances the layout measured, because the font a browser has for Helvetica, Times or Courier
+only stands in for the one the PDF writes, and the correction is what makes a line fill the same
+width and break in the same place the document does. Inside one run of a family you supply, a
+browser may kern by a fraction more than the document; where lines break and pages end is the
+layout's, and identical. Images are decoded from their bytes — no `data:` URIs, so a host page's
+Content Security Policy needs no `img-src` grant for them.
+
+Rendering an unlicensed evaluation, the marking is painted across every page, the way the PDF
+export marks every page: it rides on the layout, so what you see is what the document carries. A
+licensed render carries none.
 
 While a render is in flight a thin indeterminate bar sits on the toolbar's bottom edge, and the
 viewer reads `aria-busy="true"`. It reports that the viewer is working, not how far along. The
 engine streams events and cannot know how many are still coming.
 
 There is no Print button, because the sheet is the wrong thing to print. Your page's stylesheets do
-not cross into the shadow root, so `@media print` rules never reach the report; and above or below
-100% the sheet is under a `transform: scale()`, so printing the page puts the viewer's chrome on
-paper at whatever zoom the reader happened to leave it. What a printer wants is the pdf target's
+not cross into the shadow root, so `@media print` rules never reach the report; and the pages are
+painted at whatever zoom the reader happened to leave them, so printing the page puts the viewer's
+chrome on paper at that zoom. What a printer wants is the pdf target's
 document, the same bytes the PDF export hands over. A host that wants its own Print button owns
 two lines:
 
@@ -265,7 +274,7 @@ the export is, watermark and all.
 
 When a render or an export fails, the viewer says so on the **error panel**, a strip across the top
 of the sheet carrying a short label and the error's own message. It replaces rather than stacks, is
-dismissed by its own button, and is cleared by the next render that reaches the sheet. A successful
+dismissed by its own button, and is cleared by the next render that lands on the sheet. A successful
 export leaves it up, because the panel describes what you are looking at and a download says
 nothing about that.
 
@@ -284,18 +293,18 @@ part of this: `q.report(schema)` raises those before the viewer is ever handed a
 
 `colorScheme` paints the **chrome** — backdrop, bar, controls, progress strip, error
 panel — and never the sheet. `"light"` (the default) and `"dark"` pin; `"auto"` follows
-the OS via CSS `color-scheme`. The sheet stays white, watermark included.
+the OS via CSS `color-scheme`. The pages stay white, marking included.
 
 Chrome styles live on `--qv-*` custom properties under stable `qv-*` class names. A
 token set on the element (or an ancestor) always wins over the pin. The names are a
 reference seam, not a frozen vocabulary: backdrop and bar (`--qv-backdrop`, `--qv-bar`,
 `--qv-border`, `--qv-text`), controls (`--qv-icon`, `--qv-icon-active`, `--qv-hover`,
 `--qv-active`, `--qv-focus`), progress (`--qv-progress`), the error panel (`--qv-error`,
-`--qv-error-text`, `--qv-error-border`, `--qv-error-hover`), and the sheet's edge
-(`--qv-sheet-shadow`). `--qv-mark` is the watermark face and does not follow the scheme.
+`--qv-error-text`, `--qv-error-border`, `--qv-error-hover`), and the pages' edge
+(`--qv-sheet-shadow`).
 
-The report itself uses the viewer's built-in `q-*` stylesheet, the screen sibling of
-`@quario/html/style.css`.
+The report itself is paint, not markup: there is no report stylesheet to restyle, because what
+you see is the layout the PDF target writes.
 
 ## License
 

package/lib/button.js

@@ -18,6 +18,11 @@ export let BUTTON = css`
     border-radius: 5px;
     background: transparent;
     color: var(--_icon);
+    /* A form control does not inherit \`font\`, so the chrome's own 13px/1.4
+     system-ui stops at every button unless it is restated here. The shorthand
+     rather than \`font-family\` alone: the UA sets the shorthand, so restating
+     one longhand leaves size and line-height at the UA's. */
+    font: inherit;
     cursor: pointer;
   }
 
@@ -63,9 +68,11 @@ let fallback = (value, otherwise) => value ?? otherwise;
  * @param {{ title: string, label?: string, disabled?: boolean, name?: string,
  *   popover?: string, click?: () => void,
  *   content?: import('lit').TemplateResult }} control
- *   `label` is visible text for the controls that read as words; `content`
- *   is the icon template the zoom trigger and the export buttons pass
- *   instead. `name` marks an export button with the target it downloads, and
+ *   `content` is the icon a control draws and `label` the visible text it
+ *   reads as; an export button carries both, the zoom trigger and the panel's
+ *   dismiss the icon alone. Neither is ever the accessible name — `title` is,
+ *   which is why the icons are `aria-hidden`. `name` marks an export button
+ *   with the target it downloads, and
  *   `popover` names the menu this button opens — the platform then owns the
  *   opening and the invoker's own `aria-expanded`, which is why such a button
  *   needs no click of its own.
@@ -83,6 +90,6 @@ export let button = ({ title, label, disabled, name, popover, click, content })
     ?disabled=${disabled}
     @click=${click}
   >
-    ${fallback(label, content)}
+    ${content ?? nothing}${label ?? nothing}
   </button>
 `;

package/lib/check.js

@@ -1,14 +1,15 @@
 /**
  * What the host got wrong, named. The element's own mistakes — a report that
- * is not compiled, a missing html target, a malformed option property — are
- * definition-shaped: they describe the embedding, not the report, so each
- * check here throws a `TypeError` naming the property and the expectation.
- * The element rethrows them from its render task, which is how one channel
- * (the error event and the panel) carries every failure a host can cause.
+ * is not compiled, a malformed option property — are definition-shaped: they
+ * describe the embedding, not the report, so each check here throws a
+ * `TypeError` naming the property and the expectation. The element rethrows
+ * them from its render task, which is how one channel (the error event and
+ * the panel) carries every failure a host can cause.
  *
  * Pure policy, no DOM: this module is what the Node suite pins.
  */
 
+import { pageBox } from "@quario/layout";
 import { STEPS } from "./zoom.js";
 
 /** @type {(message: string) => never} */
@@ -16,12 +17,6 @@ let fail = (message) => {
   throw new TypeError("quario-viewer: " + message);
 };
 
-// The PdfPage vocabulary and defaults, mirrored from the pdf target: the
-// sheet is a visual stand-in for the page the host configured there, so the
-// same values must mean the same geometry.
-/** @type {Record<string, [number, number]>} */
-let SIZES = { A4: [595.28, 841.89], letter: [612, 792] };
-
 let REPORT = [
   (/** @type {any} */ report) => report && typeof report === "object",
   (/** @type {any} */ report) => typeof report.stream === "function",
@@ -31,69 +26,33 @@ let REPORT = [
 /** @type {(report: any) => boolean} */
 let compiled = (report) => REPORT.every((check) => check(report));
 
-/** @type {(target: any) => boolean} */
-let htmlTarget = (target) => target?.name === "html";
-
 /**
- * The target the sheet displays: the one named `"html"`, checked along with
- * the shapes around it.
+ * The shapes a render needs: a compiled report, and the export targets as an
+ * array — possibly empty, since the sheet is the layout's own and needs no
+ * target of the host's.
  *
  * @param {any} report
  * @param {any} targets
- * @returns {any} The html target.
  */
-export let display = (report, targets) => {
+export let exports = (report, targets) => {
   if (!compiled(report)) fail("report: expected a compiled report from a quario instance");
   if (!Array.isArray(targets)) fail("targets: expected an array of render targets");
-  let found = targets.find(htmlTarget);
-  if (!found) fail('targets: no "html" target — include html() to display');
-  return found;
-};
-
-/** @type {(size: unknown) => [number, number] | false} */
-let named = (size) =>
-  Object.hasOwn(SIZES, /** @type {string} */ (size)) && SIZES[/** @type {string} */ (size)];
-
-/** @type {(size: unknown) => any} */
-let measure = (size) => (Array.isArray(size) ? size : named(size));
-
-/** @type {(n: number) => boolean} */
-let positive = (n) => Number.isFinite(n) && n > 0;
-
-/** @type {(dimensions: any) => { width: number, height: number }} */
-let extents = (dimensions) => {
-  let width = +dimensions[0];
-  let height = +dimensions[1];
-  if (!positive(width) || !positive(height)) fail("page.size: expected finite positive dimensions");
-  return { width, height };
-};
-
-/** @type {(margin: number, width: number, height: number) => boolean} */
-let fits = (margin, width, height) =>
-  [Number.isFinite(margin), margin >= 0, 2 * margin < Math.min(width, height)].every(Boolean);
-
-/** @type {(page: any, width: number, height: number) => number} */
-let inset = (page, width, height) => {
-  let margin = page?.margin ?? 54;
-  if (!fits(margin, width, height))
-    fail("page.margin: expected a non-negative number smaller than half the page");
-  return margin;
 };
 
 /**
- * The sheet's geometry from the `page` property. Width and margin size the
- * sheet; height is the stamp period for the unlicensed watermark (full page
- * box, same as the PDF target — margin does not shrink it).
+ * The page geometry from the `page` property: the layout's own vocabulary and
+ * defaults, so the same values mean the same pages on screen and on paper.
+ * The layout names the mistake; this names the property.
  *
  * @param {any} page
  * @returns {{ width: number, height: number, margin: number }}
  */
 export let geometry = (page) => {
-  let size = page?.size ?? "A4";
-  let dimensions = measure(size);
-  if (!dimensions) fail('page.size: unknown page size "' + size + '"');
-  let { width, height } = extents(dimensions);
-  return { width, height, margin: inset(page, width, height) };
+  try {
+    return pageBox(page, "page");
+  } catch (error) {
+    return fail(/** @type {Error} */ (error).message);
+  }
 };
 
 /** @type {(mode: any, floor: number, ceiling: number) => boolean} */
@@ -135,8 +94,9 @@ export let name = (filename) => {
   return base;
 };
 
-/** @type {Record<string, string>} */
-let SCHEME = { light: "light", dark: "dark", auto: "light dark" };
+/** The schemes the property accepts. Two are their own CSS value; `auto` is
+ * the one that is not, so it is the only wording written here. */
+let SCHEMES = ["light", "dark", "auto"];
 
 /**
  * The used `color-scheme` from the `colorScheme` property. Light is the
@@ -149,6 +109,6 @@ let SCHEME = { light: "light", dark: "dark", auto: "light dark" };
  */
 export let scheme = (colorScheme) => {
   let pin = colorScheme ?? "light";
-  if (!Object.hasOwn(SCHEME, pin)) fail('colorScheme: expected "light", "dark", or "auto"');
-  return SCHEME[pin];
+  if (!SCHEMES.includes(pin)) fail('colorScheme: expected "light", "dark", or "auto"');
+  return pin === "auto" ? "light dark" : pin;
 };

package/lib/chrome.js

@@ -24,10 +24,10 @@
  * purpose: `:host` outranks that same host rule, so nothing outside can
  * shadow an alias by accident.
  *
- * Two of the sixteen are the sheet's rather than the chrome's: a color scheme
+ * One of the fifteen is the sheet's rather than the chrome's: a color scheme
  * paints chrome only (ADR 0018), so `--qv-sheet-shadow` is the sheet's edge
- * against the backdrop and `--qv-mark` is scheme-free by design. They are in
- * the block because it has no exceptions, not because they follow the pin.
+ * against the backdrop. It is in the block because it has no exceptions, not
+ * because it follows the pin.
  * `--qv-focus` and `--qv-progress` repeat the accent rather than chain a third
  * alias — a host is free to move one alone.
  *
@@ -68,7 +68,6 @@ export let CHROME = css`
       0 1px 2px light-dark(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.5)),
       0 6px 24px light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.45))
     );
-    --_mark: var(--qv-mark, #999);
   }
 
   .qv-viewer {
@@ -167,6 +166,25 @@ export let CHROME = css`
     display: flex;
     gap: 2px;
   }
+
+  /* An export button reads as a drawn download and the format in words, so it
+   takes the width its text needs rather than the icon-only box. */
+  .qv-exports .qv-button {
+    gap: 5px;
+    width: auto;
+    padding: 0 9px;
+  }
+
+  /* The base icon size, once per package rather than once per control: an
+   inline <svg> carrying a viewBox and no width falls back to 300x150, and
+   nothing in the chrome wants that. 18px is 0.75 of Lucide's 24 grid, which
+   puts its stroke 2 at 1.5px beside 13px text. The narrower selectors that
+   drop to 14px live with the controls they belong to — the menu's tick slot
+   in menu.js (ADR 0044). */
+  .qv-viewer svg {
+    width: 18px;
+    height: 18px;
+  }
 `;
 
 /**

package/lib/icons.js

@@ -0,0 +1,25 @@
+/**
+ * The icons @quario/viewer draws, vendored from Lucide: one export per icon,
+ * finished templates that carry no size. Chrome CSS decides that — 18px by
+ * default, 14px in the gutter and the menu's tick slot — because `x` appears
+ * in two contexts at once (ADR 0044).
+ *
+ * Generated by `scripts/icons.mjs` from lucide 1.40.0. Do not edit:
+ * `npm run icons` rewrites it, and `npm run check` regenerates it into a
+ * temp directory and compares.
+ *
+ * Lucide is ISC licensed. Copyright (c) 2026 Lucide Icons and Contributors.
+ */
+import { html, svg } from "lit";
+
+/** Upstream's grid and stroke, written once. */
+/** @type {(paths: import('lit').SVGTemplateResult) => import('lit').TemplateResult} */
+let icon = (paths) =>
+  html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths}</svg>`;
+
+export let check = icon(svg`<path d="M20 6 9 17l-5-5"/>`);
+export let download = icon(
+  svg`<path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/>`,
+);
+export let search = icon(svg`<path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/>`);
+export let x = icon(svg`<path d="M18 6 6 18"/><path d="m6 6 12 12"/>`);