@quario/viewer 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -7,6 +7,38 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.0] - 2026-09-01
+
+### Changed
+
+- **The sheet is now page-shaped, so short reports reserve a full page.**
+  `page` sized the sheet's width and padding and ignored its height, so a
+  report shorter than a page was drawn on paper the shape of its own content —
+  an A4 half-page invoice came out twice as wide as it was tall while the PDF
+  export was a true A4 page. The sheet now takes at least one page of height as
+  well. It remains a minimum, so a longer report keeps growing on the one
+  continuous sheet, and nothing about a report of a page or more changes.
+
+  **This is visible if you size a container to the viewer.** An A4 sheet at
+  fit-width is roughly a thousand pixels tall against five hundred before, so a
+  box fitted to a short report roughly doubles. Set `zoom` to a percentage small
+  enough where the box has to stay small. The sheet still draws no page
+  boundaries.
+
+- **The adopted sheet's baseline face moved onto `.q-report`.** It was on
+  `.q-item` and `.q-table`, where a direct rule would have beaten a report's
+  own declared family. Same look; the fragment's new root is what carries it.
+
+### Fixed
+
+- **The sheet no longer draws report text in the platform's own face.** It
+  hard-coded `system-ui`, which is SF Pro on macOS, Segoe UI on Windows and
+  Roboto on Android — so the same report showed a different typeface to every
+  visitor, and none of them matched what the PDF exported. Text declaring no
+  `family` now renders in `sans-serif`, the same declaration the PDF target
+  resolves to Helvetica. The viewer's own chrome keeps `system-ui`, which is
+  what a toolbar should do.
+
 ## [0.1.0] - 2026-08-27
 
 ### Added

package/README.md

@@ -73,8 +73,8 @@ state: a slow render can never overwrite a newer one, and a superseded render fi
 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 sizes the white
-sheet (width and padding) the browser lays the report out on. The PDF target's own geometry lives
+`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.
 
@@ -223,6 +223,13 @@ they agree.
 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.
 
+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.

package/lib/index.js

@@ -34,15 +34,6 @@ import { REPORT } from "./style.js";
 import { EXPORTS, download, exportGroup } from "./toolbar.js";
 import { wanted } from "./zoom.js";
 
-let OPTION = ["page", "zoom", "filename", "colorScheme"];
-let SUBJECT = ["data", "report"];
-
-/** @type {(el: LitElement, changed: Map<string, unknown>) => boolean} */
-let optionWrite = (el, changed) => !el.hasUpdated || OPTION.some((key) => changed.has(key));
-
-/** @type {(changed: Map<string, unknown>) => boolean} */
-let subjectWrite = (changed) => SUBJECT.some((key) => changed.has(key));
-
 /** @type {(report: unknown, targets: unknown) => boolean} */
 let vacant = (report, targets) => report === undefined && targets === undefined;
 
@@ -202,10 +193,14 @@ export class QuarioViewer extends LitElement {
     // last good values and is stashed for the task, whose next run reports it
     // through the one failure channel; flipping validity re-runs the task by
     // epoch, because the render arguments themselves did not change.
-    if (optionWrite(this, changed)) this.#checkOptions(changed);
+    if (
+      !this.hasUpdated ||
+      ["page", "zoom", "filename", "colorScheme"].some((key) => changed.has(key))
+    )
+      this.#checkOptions(changed);
     // A new document is a new subject: dismissing the last failure said
     // nothing about this one.
-    if (subjectWrite(changed)) this.#dismissed = false;
+    if (["data", "report"].some((key) => changed.has(key))) this.#dismissed = false;
   }
 
   render() {
@@ -300,26 +295,6 @@ export class QuarioViewer extends LitElement {
     }
   }
 
-  /** @param {Map<string, unknown>} changed */
-  #commitPage(changed) {
-    let box = geometry(this.page);
-    if (!this.hasUpdated || changed.has("page")) {
-      this.#box = box;
-      this.#reapply = true;
-    }
-  }
-
-  /** @param {Map<string, unknown>} changed */
-  #commitZoom(changed) {
-    let mode = level(this.zoom);
-    // Committed only when the host wrote `zoom`, so re-validating on a
-    // filename change cannot clobber the mode the reader clicked to.
-    if (!this.hasUpdated || changed.has("zoom")) {
-      this.#mode = mode;
-      this.#reapply = true;
-    }
-  }
-
   /**
    * Each property validates and commits on its own, stashing the first
    * failure: one bad property must not block a good write to another. All
@@ -338,8 +313,22 @@ export class QuarioViewer extends LitElement {
   #checkOptions(changed) {
     let was = this.#invalid;
     this.#invalid = undefined;
-    this.#take(() => this.#commitPage(changed));
-    this.#take(() => this.#commitZoom(changed));
+    this.#take(() => {
+      let box = geometry(this.page);
+      if (!this.hasUpdated || changed.has("page")) {
+        this.#box = box;
+        this.#reapply = true;
+      }
+    });
+    this.#take(() => {
+      let mode = level(this.zoom);
+      // Committed only when the host wrote `zoom`, so re-validating on a
+      // filename change cannot clobber the mode the reader clicked to.
+      if (!this.hasUpdated || changed.has("zoom")) {
+        this.#mode = mode;
+        this.#reapply = true;
+      }
+    });
     this.#take(() => {
       this.#name = name(this.filename);
     });

package/lib/stage.js

@@ -58,7 +58,12 @@ export let SURFACE = css`
   transform-origin: 0 0;
   background: #fff;
   color: #000;
-  font: 10pt/1.4 system-ui, sans-serif;
+  /* Sheet geometry only. The report text's own family comes from the shared
+     report stylesheet, which the html target ships byte-identically -- a
+     preview and an export that disagree on typeface is the bug this splits
+     apart (docs/adr/0014). */
+  font-size: 10pt;
+  line-height: 1.4;
   box-shadow: var(--_sheet-shadow);
 }
 
@@ -107,7 +112,9 @@ let measure = (sheet, text, pxPerPt) => {
   probe.style.cssText =
     "position:absolute;visibility:hidden;white-space:nowrap;font:" +
     FACE +
-    "pt system-ui,sans-serif";
+    // The face the marking is actually drawn in, or the measurement sizes
+    // wording that will be laid out in something else.
+    "pt sans-serif";
   probe.textContent = text;
   sheet.append(probe);
   let width = probe.offsetWidth / pxPerPt;
@@ -154,7 +161,9 @@ let stampAt = (face, y) => {
   mark.style.top = y + "pt";
   let wording = document.createElement("span");
   wording.textContent = face.text;
-  wording.style.font = face.fontSize + "pt system-ui, sans-serif";
+  // The same face the PDF target draws the marking in (`families.sans[0]`,
+  // Helvetica): quario's own wording, so the two must not disagree either.
+  wording.style.font = face.fontSize + "pt sans-serif";
   wording.style.transform = "translate(-50%, -50%) rotate(" + face.turn + "deg)";
   mark.append(wording);
   return mark;
@@ -296,14 +305,20 @@ export let stage = () => {
     /**
      * Give the sheet its point geometry. Page points are CSS points, so the
      * host's values transfer unit-for-unit; the wrapper re-sizes against the
-     * result so the scroll extent keeps describing what is there. Height is
-     * the watermark stamp period (full page box), not a sheet height.
+     * result so the scroll extent keeps describing what is there.
+     *
+     * The sheet is the page's shape: its width, and at least one page tall,
+     * the same rule the editor's sheet follows. A minimum rather than a
+     * height, because the sheet stays one continuous surface -- so the height
+     * goes on serving as the watermark stamp period along it too
+     * (docs/adr/0035).
      *
      * @param {PageBox} next
      */
     resize: (next) => {
       page = next;
       sheet.style.width = next.width + "pt";
+      sheet.style.minHeight = next.height + "pt";
       sheet.style.padding = next.margin + "pt";
       marking(true);
       paint();

package/lib/style.js

@@ -23,6 +23,19 @@ import { css } from "lit";
 
 export let REPORT = css`
 /* shared:start */
+
+/*
+ * The baseline face hangs off the report root rather than off .q-item and
+ * .q-table: a direct rule beats an inherited one, so a rule on the items
+ * themselves would override the report default an author writes on the
+ * document, which the root carries as an inline font-family. The marking is
+ * outside the root and keeps its own rule for that reason.
+ */
+.q-report,
+.q-unlicensed {
+  font-family: sans-serif;
+}
+
 .q-table {
   width: 100%;
   border-collapse: collapse;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quario/viewer",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "The embeddable report viewer shell for quario — in the makings, not yet released",
   "homepage": "https://getquario.com",
   "license": "SEE LICENSE IN LICENSE",
@@ -48,28 +48,30 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.3",
-    "@quario/csv": "^0.1.0",
-    "@quario/html": "^0.1.0",
-    "@quario/pdf": "^0.1.0",
-    "@quario/xlsx": "^0.1.0",
+    "@quario/csv": "^0.2.0",
+    "@quario/html": "^0.2.0",
+    "@quario/pdf": "^0.2.0",
+    "@quario/xlsx": "^0.2.0",
     "@size-limit/preset-small-lib": "^13.0.3",
     "esbuild": "^0.28.2",
     "exceljs": "^4.4.0",
     "pdf-lib": "^1.17.1",
-    "quario": "^0.1.0",
+    "quario": "^0.2.0",
     "size-limit": "^13.0.3",
     "typescript": "^7.0.2"
   },
   "peerDependencies": {
-    "quario": "^0.1.0"
+    "quario": "^0.2.0"
   },
   "size-limit": [
     {
       "path": "lib/index.js",
       "ignore": [
-        "quario"
+        "quario",
+        "lit",
+        "@lit/task"
       ],
-      "limit": "14 kB"
+      "limit": "8.5 kB"
     }
   ],
   "engines": {