@quario/viewer 0.2.0 → 0.4.0

package/lib/index.js

@@ -1,22 +1,24 @@
 /**
  * @quario/viewer — the embeddable viewer element. Not a render target: it
  * compiles nothing and never touches the event stream. `<quario-viewer>`
- * consumes a compiled report plus the host's configured targets through
- * properties, displays the html target's fragment on a shadow-DOM sheet, and
- * offers export downloads for whichever exportable targets the host passed.
- * Outcomes reach the host as `rendered` and `error` events, plus
- * `renderComplete`, the one awaitable for the newest render settling.
+ * consumes a compiled report plus the host's configured export targets
+ * through properties, lays the report out on pages through `@quario/layout`
+ * and paints them on a shadow-DOM sheet — the same list the pdf target
+ * writes, so the preview breaks its pages where the document does
+ * (docs/adr/0039) — and offers export downloads for whichever exportable
+ * targets the host passed. Outcomes reach the host as `rendered` and `error`
+ * events, plus `renderComplete`, the one awaitable for the newest render
+ * settling.
  *
  * Importing this module defines nothing: the element class is the export,
  * and `@quario/viewer/register` performs the one-line define for hosts that
  * want it (docs/adr/0005-the-surfaces-are-custom-elements.md).
  *
- * Escaping stays exclusively the html target's job (its documented output is
- * injected the documented way), and the viewer adds no report content of its
- * own. The unlicensed marking is the one thing it presents rather than merely
- * styles: the wording still arrives inside the fragment, and the stage draws
- * repeating watermarks on the scaled sheet — see
- * docs/adr/0017-the-viewer-watermarks-the-sheet.md.
+ * Nothing here is markup: the sheet is a stack of canvases, and the list's
+ * text reaches them as strings the painter draws, so the viewer has no
+ * markup edge and adds no report content of its own. The unlicensed marking
+ * rides on the list, one op per page, painted last — the same placement the
+ * pdf target writes (docs/adr/0017-the-viewer-watermarks-the-sheet.md).
  *
  * The error panel is the only wording the viewer authors, and it is not
  * report content: it names which failure occurred, because no error knows
@@ -24,13 +26,13 @@
  */
 import { Task, TaskStatus } from "@lit/task";
 import { LitElement, html } from "lit";
+import { layout } from "@quario/layout";
 import { BUTTON } from "./button.js";
 import { CHROME, progress } from "./chrome.js";
-import { display, geometry, level, name, scheme } from "./check.js";
+import { exports, geometry, level, name, scheme } from "./check.js";
 import { MENU, zoomMenu } from "./menu.js";
 import { PANEL, label, panel } from "./panel.js";
 import { SURFACE, stage } from "./stage.js";
-import { REPORT } from "./style.js";
 import { EXPORTS, download, exportGroup } from "./toolbar.js";
 import { wanted } from "./zoom.js";
 
@@ -45,18 +47,19 @@ let said = (error) => {
 
 // The properties are described once, in the hand-written public declarations,
 // and read back here — a second copy in JSDoc is a copy that drifts.
-/** @import { ViewableReport, ViewerPage } from './index.d.ts' */
+/** @import { ViewableReport, ViewerFonts, ViewerPage } from './index.d.ts' */
 
 /** The tag `@quario/viewer/register` defines the element under. */
 export const TAG = "quario-viewer";
 
 /**
  * The viewer element. Hosts assign `report`, `targets` and `data` (plus the
- * option properties `zoom`, `page`, `filename` and `colorScheme`) and listen for `rendered`
- * and `error`; rapid successive writes render only the newest state, because
- * the render pipeline is a task keyed on those properties and the task's own
- * call-id guard drops every superseded run whole — including its failure,
- * which is reported to no one (ADR 0005's narrowed guarantee).
+ * option properties `zoom`, `page`, `fonts`, `filename` and `colorScheme`)
+ * and listen for `rendered` and `error`; rapid successive writes render only
+ * the newest state, because the render pipeline is a task keyed on those
+ * properties and the task's own call-id guard drops every superseded run
+ * whole — including its failure, which is reported to no one (ADR 0005's
+ * narrowed guarantee).
  *
  * Removal is not destruction: disconnecting abandons in-flight work and
  * releases the resize observer, the properties persist, and reconnecting
@@ -66,7 +69,7 @@ export class QuarioViewer extends LitElement {
   // CHROME declares the default palette every other sheet paints from, so it
   // has to be in this list -- but anywhere in it: a custom property resolves
   // down the inherited chain, not by stylesheet order.
-  static styles = [CHROME, BUTTON, MENU, SURFACE, PANEL, REPORT];
+  static styles = [CHROME, BUTTON, MENU, SURFACE, PANEL];
 
   // Properties only, no attributes: `report`, `targets`, `data` and `page`
   // are values no attribute could carry, and one door beats two.
@@ -76,6 +79,7 @@ export class QuarioViewer extends LitElement {
     data: { attribute: false },
     zoom: { attribute: false },
     page: { attribute: false },
+    fonts: { attribute: false },
     filename: { attribute: false },
     colorScheme: { attribute: false },
   };
@@ -108,37 +112,49 @@ export class QuarioViewer extends LitElement {
   #exporting = new Set();
   /** @type {(() => void) | undefined} */
   #unwatch;
+  /** @type {Promise<void>} The newest swap's paint, which `renderComplete` waits behind. */
+  #painting = Promise.resolve();
 
   // The whole async pipeline: keyed on the render properties, re-run when one
-  // changes. The task's call-id guard is the latest-wins machinery; side
+  // changes — `page` and `fonts` among them, since either moves where the
+  // pages break. The task's call-id guard is the latest-wins machinery; side
   // effects — the stage swap and both events — live only in the callbacks
   // below, which that guard restricts to the newest run, never in the task
   // body a stale run still executes to completion. `null` is the "nothing to
   // show" result: unlike the task primitive's own initial-state symbol it
   // settles `taskComplete`, which is what lets `renderComplete` always answer.
   #task = new Task(this, {
-    args: () => [this.report, this.targets, this.data, this.#epoch],
-    task: async ([report, targets, data], { signal }) => {
+    args: () => [this.report, this.targets, this.data, this.page, this.fonts, this.#epoch],
+    task: async ([report, targets, data, page, fonts], { signal }) => {
       if (!this.#begin(report, targets)) return null;
-      let target = display(report, targets);
-      let fragment = await /** @type {any} */ (report).render(target, data);
+      // The sheet's own target: the layout list, on the host's page and
+      // fonts — the same two a host passes to `pdf()`, which is what makes
+      // the preview page where the document pages.
+      let target = layout({ page: /** @type {any} */ (page), fonts: /** @type {any} */ (fonts) });
+      let list = await /** @type {any} */ (report).render(target, data);
       // The engine takes no signal, so abandonment is the guards around this
       // body; the check only spares the swap when the answer arrives after a
       // disconnect mid-render.
       if (this.#drop(signal)) return this.#abandon();
-      return fragment;
+      return { list, fonts };
     },
-    onComplete: (fragment) => {
-      if (fragment === null || !this.isConnected) return;
-      this.#stage.swap(fragment);
-      this.#landed = true;
-      this.#stale = false;
-      // A render that reached the sheet takes the panel down: the panel says
-      // what is wrong with what the reader is looking at, and this is the
-      // moment that stops being true. A successful export is not that moment.
-      this.#failure = undefined;
-      this.#dismissed = false;
-      this.dispatchEvent(new CustomEvent("rendered"));
+    onComplete: (result) => {
+      if (result === null || !this.isConnected) return;
+      // The swap sizes every page before it settles, so the reader's place
+      // is held; the paint it awaits is what `rendered` waits for.
+      this.#painting = this.#stage.swap(result.list, result.fonts).then(() => {
+        this.#landed = true;
+        this.#stale = false;
+        // A render that reached the sheet takes the panel down: the panel
+        // says what is wrong with what the reader is looking at, and this is
+        // the moment that stops being true. A successful export is not that
+        // moment.
+        this.#failure = undefined;
+        this.#dismissed = false;
+        // After the paint, so the update the task queued has already run.
+        this.requestUpdate();
+        this.dispatchEvent(new CustomEvent("rendered"));
+      });
     },
     onError: (error) => {
       if (!this.isConnected) return;
@@ -161,6 +177,8 @@ export class QuarioViewer extends LitElement {
     this.zoom = undefined;
     /** @type {ViewerPage | undefined} */
     this.page = undefined;
+    /** @type {ViewerFonts | undefined} */
+    this.fonts = undefined;
     /** @type {string | undefined} */
     this.filename = undefined;
     /** @type {"light" | "dark" | "auto" | undefined} */
@@ -180,7 +198,7 @@ export class QuarioViewer extends LitElement {
       this.#task.status === TaskStatus.INITIAL
         ? this.#landed
         : this.#task.taskComplete.then(
-            () => this.#landed,
+            () => this.#painting.then(() => this.#landed),
             () => false,
           ),
     );
@@ -273,6 +291,7 @@ export class QuarioViewer extends LitElement {
     if (this.#invalid) throw this.#invalid;
     if (vacant(report, targets)) return null;
     if (!this.isConnected) return this.#abandon();
+    exports(report, targets);
     return true;
   }
 

package/lib/menu.js

@@ -1,6 +1,6 @@
 /**
  * The zoom menu: the magnifier trigger in the bar and the popover it opens —
- * "Fit sheet" above a separator, then the percentages `zoom.js` offers. It is
+ * "Fit page" above a separator, then the percentages `zoom.js` offers. It is
  * the whole zoom control; the live percentage is never drawn, it is what the
  * trigger is named after ("Zoom, 62%"), so the bar carries one icon rather
  * than a readout that changes width under the reader.
@@ -20,7 +20,7 @@
  * Radio semantics, not toggles: exactly one row is the current mode, and
  * choosing the one already checked settles as a no-op in the element's own
  * `#setMode`, so this module reports every row alike. The check follows
- * the mode rather than the measurement — "Fit sheet" is checked whenever the
+ * the mode rather than the measurement — "Fit page" is checked whenever the
  * viewer is fitting, whatever percentage that came out at, and a host-set
  * percentage the menu does not offer checks nothing.
  *
@@ -310,7 +310,7 @@ export let zoomMenu = ({ mode, percent, choose }) => html`
       @beforetoggle=${leaving}
       @keydown=${navigate}
     >
-      ${row("Fit sheet", "fit", mode === "fit", choose)}
+      ${row("Fit page", "fit", mode === "fit", choose)}
       <hr class="qv-separator" role="separator" />
       ${STEPS.map((step) => row(step + "%", step, mode === step, choose))}
     </div>