web-doc 0.9.0 → 0.11.0

package/dist/edit/pdf/types.d.ts

@@ -244,6 +244,41 @@ export interface TextLayoutLine {
     readonly fontSize: number;
     readonly color: string;
 }
+/**
+ * The font a PDF text element is drawn in, as a browser can load it: a host
+ * typing over the element shows the text in the document's own glyphs and
+ * metrics. Exactly one of `face` and `missing` is set.
+ */
+export interface TextFont {
+    readonly elementId: string;
+    /** The same for every element drawn in this font, so a host loads each face once. */
+    readonly key: string;
+    /** The family the file declares, as `textStyle.fontFamily` reports it. */
+    readonly family: string;
+    /**
+     * An OpenType or TrueType file for `FontFace`: a TrueType program with
+     * the OS/2, name and post tables a subset left out added, or a CFF program
+     * wrapped as OpenType with a Unicode cmap built from its glyph names (Adobe
+     * Glyph List names, `uniXXXX` and `uXXXX`). The program's own glyphs and
+     * widths are kept. Subset fonts hold only the glyphs the file uses, often
+     * not even a space, which the file places by positioning instead; a browser
+     * draws other characters in a fallback face. The file declares a
+     * regular face: its glyphs already carry the weight and slant, so load it
+     * with the default descriptors and do not ask the browser for bold or
+     * italic on top.
+     */
+    readonly face?: {
+        readonly data: Uint8Array;
+        readonly format: "opentype" | "truetype";
+    };
+    /**
+     * Why there is no face: the font is not embedded (a host shows it by name,
+     * as PDF readers do), or it is embedded in a form no browser loads: a
+     * CID-keyed CFF font, a Type 1 or Type 3 font, a font whose glyphs have no
+     * code points, or a program this reader cannot read.
+     */
+    readonly missing?: "not-embedded" | "cid-keyed" | "type1" | "no-unicode" | "unreadable";
+}
 /** The drawn geometry of a `text`, `textBox` or `table` element. */
 export interface TextLayout {
     readonly elementId: string;
@@ -282,6 +317,11 @@ export interface PdfEditSession extends EditSessionBase<PdfOperation, PdfElement
     save(options?: PdfSaveOptions): Promise<SavedDocument>;
     /** Lines, glyph boxes and styles of a `text`, `textBox` or `table` element. */
     getTextLayout(elementId: string, options?: ReadOptions): Promise<ReadItem<TextLayout>>;
+    /**
+     * The font a `text` or `textBox` element is drawn in, as a browser loads it,
+     * or why it cannot be loaded; see `TextFont`.
+     */
+    getTextFont(elementId: string, options?: ReadOptions): Promise<ReadItem<TextFont>>;
     /** The text position nearest to a page-space point; none on a page without text. */
     positionAt(pageIndex: number, point: PagePoint, options?: ReadOptions): Promise<ReadItem<TextPosition>>;
     /** The rectangles a range covers, one per line fragment, in reading order. */

package/dist/edit/pptx/elements.d.ts

@@ -4,7 +4,8 @@ import { type Matrix, type PlacedFrame, type Xfrm } from "./geometry.js";
 import type { DeckModel, SlideRecord } from "./model.js";
 import { type StyleSource } from "./style.js";
 import { type TextModel } from "./text.js";
-import type { PptxElement, PptxPlaceholder } from "./types.js";
+import { type TextSpan } from "../range-style.js";
+import type { PptxElement, PptxPlaceholder, PptxTextStyle } from "./types.js";
 /** What the engine knows about one element beyond what it reports. */
 export interface ShapeRecord {
     readonly element: PptxElement;
@@ -28,6 +29,8 @@ export interface ShapeRecord {
     /** Inside the fallback branch of `mc:AlternateContent`. */
     readonly readOnly: boolean;
     readonly parent?: ShapeRecord;
+    /** The style a span of the shape's text shows: what every run it covers shares. */
+    readonly styleOf?: (span: TextSpan) => Partial<PptxTextStyle> | undefined;
 }
 export interface SlideElements {
     readonly slide: SlideRecord;

package/dist/edit/pptx/elements.js

@@ -1,6 +1,7 @@
 import { groupMatrix, IDENTITY, multiply, placeFrame, readXfrm, } from "./geometry.js";
 import { resolveTextStyle, readShapeStyle } from "./style.js";
 import { firstTextRun, readTableCells, readTextModel, } from "./text.js";
+import { runsCovering, sharedStyle } from "../range-style.js";
 /*
  * The elements of a slide, read from its XML: every child of the shape tree
  * with its frame (own, or inherited from the layout and master for a
@@ -236,6 +237,11 @@ function readRecord(context, node, parents, parent, readOnly, walk) {
         ...(text ? { text } : {}),
         readOnly,
         ...(parent ? { parent } : {}),
+        ...(text && txBody
+            ? {
+                styleOf: (span) => rangeStyleOf(context, placeholder, txBody, text, span),
+            }
+            : {}),
     };
 }
 function operationsFor(kind, hasText) {
@@ -285,6 +291,35 @@ export function listStylesOf(context, txBody, placeholder) {
         lists.push(defaults);
     return lists;
 }
+/**
+ * The style a span of a text body shows: each run it covers resolves through
+ * its paragraph and the inherited lists, and the properties they all share
+ * are kept. An empty paragraph reads its end-of-paragraph properties.
+ */
+function rangeStyleOf(context, placeholder, txBody, text, span) {
+    const lists = listStylesOf(context, txBody, placeholder);
+    const styleOf = (paragraph, rPr) => resolveTextStyle({
+        ...(rPr ? { rPr: { part: context.part, node: rPr } } : {}),
+        ...(paragraph.pPr
+            ? { pPr: { part: context.part, node: paragraph.pPr } }
+            : {}),
+        level: paragraph.level,
+        lists,
+        fonts: context.fonts,
+    });
+    const runs = text.paragraphs.flatMap((paragraph) => paragraph.runs.map((run) => ({
+        start: run.start,
+        end: run.end,
+        style: () => styleOf(paragraph, run.rPr),
+    })));
+    const covered = runsCovering(runs, span);
+    if (covered.length > 0)
+        return sharedStyle(covered.map((run) => run.style()));
+    const paragraph = text.paragraphs.find((candidate) => candidate.start <= span.start && span.start <= candidate.end) ?? text.paragraphs[0];
+    return paragraph
+        ? sharedStyle([styleOf(paragraph, paragraph.endParaRPr)])
+        : undefined;
+}
 function textStyleOf(context, placeholder, txBody, text) {
     const first = firstTextRun(text);
     const paragraph = first?.paragraph ?? text.paragraphs[0];

package/dist/edit/pptx/engine.d.ts

@@ -3,11 +3,13 @@ import type { EditEngine, EngineBatch, EngineChange, MaterializedDocument, Mater
 import { OoxmlPackage } from "../ooxml/package.js";
 import type { EditFindOptions, EditOperation, ElementQuery, OperationIssue, PagePoint, TextTarget } from "../types.js";
 import { DeckModel } from "./model.js";
-import type { PptxElement, PptxLayoutInfo, PptxSlideInfo } from "./types.js";
+import type { PptxElement, PptxLayoutInfo, PptxSlideInfo, PptxTextStyle } from "./types.js";
+import { type TextSpan } from "../range-style.js";
 /** The reads behind `getSlides` and `getLayouts`, beyond the core engine interface. */
 export interface PptxEngineReads {
     slides(signal: AbortSignal): Promise<readonly PptxSlideInfo[]>;
     layouts(signal: AbortSignal): Promise<readonly PptxLayoutInfo[]>;
+    textStyle(id: string, span: TextSpan | undefined, signal: AbortSignal): Promise<Partial<PptxTextStyle> | undefined>;
 }
 export declare class PptxEditEngine implements EditEngine, PptxEngineReads {
     #private;
@@ -32,6 +34,8 @@ export declare class PptxEditEngine implements EditEngine, PptxEngineReads {
     elementsAt(pageIndex: number, point: PagePoint, signal: AbortSignal): Promise<readonly PptxElement[]>;
     findText(query: string, options: EditFindOptions, signal: AbortSignal): Promise<readonly TextTarget[]>;
     slides(signal: AbortSignal): Promise<readonly PptxSlideInfo[]>;
+    /** The style a span of a shape's text shows; none for an element without text or a span past it. */
+    textStyle(id: string, span: TextSpan | undefined, signal: AbortSignal): Promise<Partial<PptxTextStyle> | undefined>;
     layouts(signal: AbortSignal): Promise<readonly PptxLayoutInfo[]>;
     dispose(): Promise<void>;
 }

package/dist/edit/pptx/engine.js

@@ -8,6 +8,7 @@ import { DeckModel } from "./model.js";
 import { pptxHandlers } from "./handlers.js";
 import { issueCollector, } from "./operations.js";
 import { pptxOperationSchemas } from "./schemas.js";
+import { spanFits } from "../range-style.js";
 const SLIDE_PART = /^\/ppt\/slides\/slide(\d+)\.xml$/i;
 const SLIDE_RELS = /^\/ppt\/slides\/_rels\/slide(\d+)\.xml\.rels$/i;
 export class PptxEditEngine {
@@ -357,6 +358,16 @@ export class PptxEditEngine {
             });
         return out;
     }
+    /** The style a span of a shape's text shows; none for an element without text or a span past it. */
+    async textStyle(id, span, signal) {
+        const record = await this.#locate(id, signal);
+        if (!record?.styleOf || !record.text)
+            return undefined;
+        const range = span ?? { start: 0, end: record.text.text.length };
+        if (!spanFits(range, record.text.text.length))
+            return undefined;
+        return record.styleOf(range);
+    }
     async layouts(signal) {
         const model = await this.model(signal);
         return model.layouts.map((layout) => ({

package/dist/edit/pptx/handler.js

@@ -88,6 +88,14 @@ export function createOoxmlEditHandler() {
                 return pptx().layouts(signal);
             case "edit-docx-revisions":
                 return docx().revisions(payload.id, signal);
+            case "edit-docx-text-style": {
+                const { id, span } = payload;
+                return docx().textStyle(id, span, signal);
+            }
+            case "edit-pptx-text-style": {
+                const { id, span } = payload;
+                return pptx().textStyle(id, span, signal);
+            }
             case "edit-dispose":
                 await state?.dispose();
                 state = undefined;

package/dist/edit/pptx/provider.d.ts

@@ -1,8 +1,9 @@
 import type { EditEngineContext } from "../engine.js";
 import { type OoxmlEditProviderOptions } from "../ooxml/worker.js";
 import { WorkerEngineClient } from "../worker-engine.js";
+import type { TextSpan } from "../range-style.js";
 import type { PptxEngineReads } from "./engine.js";
-import type { PptxLayoutInfo, PptxSlideInfo } from "./types.js";
+import type { PptxLayoutInfo, PptxSlideInfo, PptxTextStyle } from "./types.js";
 export type PptxEditProviderOptions = OoxmlEditProviderOptions;
 /**
  * Starts the OOXML edit worker for `original` as a PPTX engine. Loaded
@@ -14,4 +15,5 @@ export declare class PptxEditEngineClient extends WorkerEngineClient implements
     start(original: Uint8Array): Promise<void>;
     slides(signal: AbortSignal): Promise<readonly PptxSlideInfo[]>;
     layouts(signal: AbortSignal): Promise<readonly PptxLayoutInfo[]>;
+    textStyle(id: string, span: TextSpan | undefined, signal: AbortSignal): Promise<Partial<PptxTextStyle> | undefined>;
 }

package/dist/edit/pptx/provider.js

@@ -37,4 +37,7 @@ export class PptxEditEngineClient extends WorkerEngineClient {
     layouts(signal) {
         return this.request("edit-pptx-layouts", undefined, signal);
     }
+    textStyle(id, span, signal) {
+        return this.request("edit-pptx-text-style", { id, span }, signal);
+    }
 }

package/dist/edit/pptx/session.d.ts

@@ -1,7 +1,7 @@
 import type { DescribeOptions, DocumentDescription, EditCheckpoint, OutlineOptions, OutlineResult, TargetCandidate, TargetQuery, ToolCall, ToolCallOptions, ToolResult, ToolSet } from "../ai/types.js";
-import type { EditSessionCore } from "../engine.js";
-import type { ApplyOptions, AssetOptions, EditFindOptions, EditOperation, EditReceipt, EditState, ElementQuery, HistoryOptions, OperationSchemaSet, PagePoint, ReadItem, ReadOptions, ReadResult, SavedDocument, TextTarget } from "../types.js";
-import type { PptxDeleteElementOperation, PptxDeleteSlideOperation, PptxDuplicateSlideOperation, PptxEditSession, PptxElement, PptxFields, PptxInsertImageOperation, PptxInsertSlideOperation, PptxInsertTableOperation, PptxInsertTextBoxOperation, PptxLayoutInfo, PptxMoveElementOperation, PptxMoveSlideOperation, PptxOperation, PptxReplaceTextOperation, PptxResizeElementOperation, PptxSaveOptions, PptxSetShapeStyleOperation, PptxSetTableCellOperation, PptxSetTextStyleOperation, PptxSlideInfo } from "./types.js";
+import type { EditSessionAccess, EditSessionCore } from "../engine.js";
+import type { ApplyOptions, AssetOptions, EditFindOptions, EditOperation, EditReceipt, EditState, ElementQuery, HistoryOptions, OperationSchemaSet, PagePoint, ReadItem, ReadOptions, ReadResult, SavedDocument, TextRange, TextTarget } from "../types.js";
+import type { PptxDeleteElementOperation, PptxDeleteSlideOperation, PptxDuplicateSlideOperation, PptxEditSession, PptxElement, PptxFields, PptxInsertImageOperation, PptxInsertSlideOperation, PptxInsertTableOperation, PptxInsertTextBoxOperation, PptxLayoutInfo, PptxMoveElementOperation, PptxMoveSlideOperation, PptxOperation, PptxReplaceTextOperation, PptxResizeElementOperation, PptxSaveOptions, PptxSetShapeStyleOperation, PptxSetTableCellOperation, PptxSetTextStyleOperation, PptxSlideInfo, PptxTextStyle } from "./types.js";
 /**
  * The PPTX session: the core session narrowed to PPTX operations and
  * elements, plus the slide and layout reads. Each typed method is `apply()`
@@ -10,7 +10,7 @@ import type { PptxDeleteElementOperation, PptxDeleteSlideOperation, PptxDuplicat
 export declare class PptxSession implements PptxEditSession {
     #private;
     readonly format: "pptx";
-    constructor(core: EditSessionCore);
+    constructor(core: EditSessionCore, access?: EditSessionAccess);
     get sessionId(): string;
     get state(): EditState;
     get schemas(): OperationSchemaSet;
@@ -24,6 +24,11 @@ export declare class PptxSession implements PptxEditSession {
     addAsset(data: Uint8Array, options?: AssetOptions): Promise<string>;
     getElements(query?: ElementQuery, options?: ReadOptions): Promise<ReadResult<PptxElement>>;
     getElement(id: string, options?: ReadOptions): Promise<ReadItem<PptxElement>>;
+    /**
+     * The elements under a point, top-most first: those whose frame holds it,
+     * and before them a shape whose text is painted there past its frame, as
+     * text wrapped below a short box is.
+     */
     elementsAt(pageIndex: number, point: PagePoint, options?: ReadOptions): Promise<ReadResult<PptxElement>>;
     findText(query: string, options?: EditFindOptions): Promise<ReadResult<TextTarget>>;
     getOutline(options?: OutlineOptions): Promise<OutlineResult>;
@@ -37,6 +42,10 @@ export declare class PptxSession implements PptxEditSession {
     callTool(call: ToolCall, options?: ToolCallOptions): Promise<ToolResult>;
     getSlides(options?: ReadOptions): Promise<ReadResult<PptxSlideInfo>>;
     getLayouts(options?: ReadOptions): Promise<ReadResult<PptxLayoutInfo>>;
+    getTextStyle(fields: {
+        readonly target: string;
+        readonly range?: TextRange;
+    }, options?: ReadOptions): Promise<ReadItem<Partial<PptxTextStyle>>>;
     replaceText(fields: PptxFields<PptxReplaceTextOperation>, options?: ApplyOptions): Promise<EditReceipt>;
     setTextStyle(fields: PptxFields<PptxSetTextStyleOperation>, options?: ApplyOptions): Promise<EditReceipt>;
     setShapeStyle(fields: PptxFields<PptxSetShapeStyleOperation>, options?: ApplyOptions): Promise<EditReceipt>;

package/dist/edit/pptx/session.js

@@ -2,6 +2,7 @@ import { ViewerError } from "../../errors.js";
 import { readDescription, readOutline } from "../ai/outline.js";
 import { resolveTargets } from "../ai/targets.js";
 import { buildToolSet, callTool as runTool } from "../ai/tools.js";
+import { spanOnTarget } from "../range-style.js";
 /**
  * The PPTX session: the core session narrowed to PPTX operations and
  * elements, plus the slide and layout reads. Each typed method is `apply()`
@@ -11,8 +12,11 @@ export class PptxSession {
     format = "pptx";
     #core;
     #tools;
-    constructor(core) {
+    /** The shown deck's text runs; absent in a headless session, which hits frames only. */
+    #access;
+    constructor(core, access) {
         this.#core = core;
+        this.#access = access;
     }
     get sessionId() {
         return this.#core.sessionId;
@@ -53,8 +57,31 @@ export class PptxSession {
     getElement(id, options) {
         return this.#core.getElement(id, options);
     }
-    elementsAt(pageIndex, point, options) {
-        return this.#core.elementsAt(pageIndex, point, options);
+    /**
+     * The elements under a point, top-most first: those whose frame holds it,
+     * and before them a shape whose text is painted there past its frame, as
+     * text wrapped below a short box is.
+     */
+    async elementsAt(pageIndex, point, options) {
+        const framed = (await this.#core.elementsAt(pageIndex, point, options));
+        const access = this.#access;
+        if (!access)
+            return framed;
+        const origins = (await access.getTextRuns(pageIndex, options?.signal))
+            .filter((run) => run.shapeOrigin && runHolds(run, point))
+            .map((run) => run.shapeOrigin);
+        if (origins.length === 0)
+            return framed;
+        const all = (await this.getElements({ pageIndex }, options)).items;
+        const painted = all.filter((element) => element.text !== undefined &&
+            !framed.items.some((hit) => hit.id === element.id) &&
+            origins.some((origin) => originOf(element, origin)));
+        if (painted.length === 0)
+            return framed;
+        return Object.freeze({
+            ...framed,
+            items: Object.freeze([...painted, ...framed.items]),
+        });
     }
     findText(query, options) {
         return this.#core.findText(query, options);
@@ -92,6 +119,10 @@ export class PptxSession {
     getLayouts(options) {
         return this.#core.readItems(options, (engine, signal) => pptxReads(engine).layouts(signal));
     }
+    async getTextStyle(fields, options) {
+        const span = spanOnTarget(fields.target, fields.range);
+        return this.#core.readItem(options, (engine, signal) => pptxReads(engine).textStyle(fields.target, span, signal));
+    }
     replaceText(fields, options) {
         return this.apply([{ op: "replaceText", ...fields }], options);
     }
@@ -139,7 +170,20 @@ export class PptxSession {
 function pptxReads(engine) {
     const candidate = engine;
     if (typeof candidate.slides !== "function" ||
-        typeof candidate.layouts !== "function")
+        typeof candidate.layouts !== "function" ||
+        typeof candidate.textStyle !== "function")
         throw new ViewerError("edit-unsupported", "The engine does not provide the PPTX reads", { details: { format: "pptx", reason: "no-reads" } });
     return candidate;
 }
+/** Whether a run's box holds a point. */
+function runHolds(run, point) {
+    return (point.x >= run.x &&
+        point.x <= run.x + run.width &&
+        point.y >= run.y &&
+        point.y <= run.y + run.height);
+}
+/** Whether a shape's frame starts where a run says its shape does, to half a pixel. */
+function originOf(element, origin) {
+    const frame = element.frame ?? element.bounds;
+    return (Math.abs(frame.x - origin.x) <= 0.5 && Math.abs(frame.y - origin.y) <= 0.5);
+}

package/dist/edit/pptx/types.d.ts

@@ -1,4 +1,4 @@
-import type { ApplyOptions, BinaryData, EditColor, EditElement, EditReceipt, EditSessionBase, PagePoint, PageRect, ReadOptions, ReadResult, SavedDocument, SaveOptions, TextRange } from "../types.js";
+import type { ApplyOptions, BinaryData, EditColor, EditElement, EditReceipt, EditSessionBase, PagePoint, PageRect, ReadItem, ReadOptions, ReadResult, SavedDocument, SaveOptions, TextRange } from "../types.js";
 export type PptxElementKind = "shape" | "image" | "table" | "connector" | "group" | "other";
 export type PptxTextAlign = "left" | "center" | "right" | "justify";
 /** The style of the first run with text, resolved through the placeholder chain and the theme. */
@@ -201,6 +201,16 @@ export interface PptxEditSession extends EditSessionBase<PptxOperation, PptxElem
     getSlides(options?: ReadOptions): Promise<ReadResult<PptxSlideInfo>>;
     /** Every layout of every master, for `insertSlide`. */
     getLayouts(options?: ReadOptions): Promise<ReadResult<PptxLayoutInfo>>;
+    /**
+     * The text style a range of a shape's text shows: each property every run
+     * it covers shares, a property they differ on left out. Without a range,
+     * the whole text; a collapsed range reads the run before it, whose style
+     * text typed there takes. `undefined` for an element without text.
+     */
+    getTextStyle(fields: {
+        readonly target: string;
+        readonly range?: TextRange;
+    }, options?: ReadOptions): Promise<ReadItem<Partial<PptxTextStyle>>>;
     /** Replaces the whole text of a shape, or the part a range covers. */
     replaceText(fields: PptxFields<PptxReplaceTextOperation>, options?: ApplyOptions): Promise<EditReceipt>;
     /** Changes run and paragraph properties; unspecified ones keep their bytes. */

package/dist/edit/range-style.d.ts

@@ -0,0 +1,24 @@
+import type { TextRange } from "./types.js";
+/** Half-open UTF-16 offsets in an element's text. */
+export interface TextSpan {
+    readonly start: number;
+    readonly end: number;
+}
+/**
+ * The span a range names on its target, or `undefined` for no range (the
+ * whole text). Both ends must lie on the target.
+ */
+export declare function spanOnTarget(target: string, range: TextRange | undefined): TextSpan | undefined;
+/**
+ * The runs a span covers. A collapsed span reads the run before it, whose
+ * style text typed there takes, or the first run after it at the very start.
+ */
+export declare function runsCovering<R extends TextSpan>(runs: readonly R[], span: TextSpan): R[];
+/**
+ * What every style has in common: a property two of them differ on, or one
+ * some leave out, is left out. Values compare as JSON, so a theme colour and
+ * its plain form differ.
+ */
+export declare function sharedStyle<T extends object>(styles: readonly T[]): Partial<T> | undefined;
+/** Whether a span lies inside a text of `length` code units. */
+export declare function spanFits(span: TextSpan, length: number): boolean;

package/dist/edit/range-style.js

@@ -0,0 +1,46 @@
+import { ViewerError } from "../errors.js";
+/**
+ * The span a range names on its target, or `undefined` for no range (the
+ * whole text). Both ends must lie on the target.
+ */
+export function spanOnTarget(target, range) {
+    if (!range)
+        return undefined;
+    if (range.start.elementId !== target || range.end.elementId !== target)
+        throw new ViewerError("invalid-operation", "Both ends of the range must lie on the target", { details: { target } });
+    return { start: range.start.offset, end: range.end.offset };
+}
+/**
+ * The runs a span covers. A collapsed span reads the run before it, whose
+ * style text typed there takes, or the first run after it at the very start.
+ */
+export function runsCovering(runs, span) {
+    if (span.start < span.end)
+        return runs.filter((run) => run.start < span.end && run.end > span.start);
+    const before = runs
+        .filter((run) => run.start < span.start && run.end >= span.start)
+        .at(-1);
+    const at = before ?? runs.find((run) => run.start >= span.start);
+    return at ? [at] : [];
+}
+/**
+ * What every style has in common: a property two of them differ on, or one
+ * some leave out, is left out. Values compare as JSON, so a theme colour and
+ * its plain form differ.
+ */
+export function sharedStyle(styles) {
+    const [first, ...rest] = styles;
+    if (!first)
+        return undefined;
+    const shared = {};
+    for (const key of Object.keys(first)) {
+        const value = JSON.stringify(first[key]);
+        if (rest.every((style) => key in style && JSON.stringify(style[key]) === value))
+            shared[key] = first[key];
+    }
+    return shared;
+}
+/** Whether a span lies inside a text of `length` code units. */
+export function spanFits(span, length) {
+    return span.start >= 0 && span.start <= span.end && span.end <= length;
+}

package/dist/viewport.js

@@ -156,6 +156,8 @@ export class ViewerViewport {
     }
     replaceDocument(info, changedPages, revision) {
         const previous = this.#info;
+        const painted = this.#painted.get(this.#contentRevision);
+        this.#painted.clear();
         this.#info = info;
         this.#contentRevision = revision ?? this.#contentRevision + 1;
         // Only pages whose content or size changed get a new render key; the
@@ -172,9 +174,15 @@ export class ViewerViewport {
             const size = info.pageSizes?.[pageIndex];
             const before = previous?.pageSizes?.[pageIndex];
             const resized = size?.width !== before?.width || size?.height !== before?.height;
-            if (pageIndex >= from || changed.has(pageIndex) || resized)
+            if (pageIndex >= from || changed.has(pageIndex) || resized) {
                 this.#pageRevisions[pageIndex] =
                     (this.#pageRevisions[pageIndex] ?? 0) + 1;
+            }
+            else if (painted?.has(pageIndex) && this.#slots.has(pageIndex)) {
+                // A completed, retained page is still current. Carry its queued
+                // notification forward instead of losing it at the next frame.
+                this.#markPainted(pageIndex, this.#contentRevision);
+            }
         }
         // Slots stay mounted and repaint in place; the browser clamps the scroll
         // position itself once the spacer takes the new document's height.
@@ -371,6 +379,8 @@ export class ViewerViewport {
                 slot.controller?.abort();
                 slot.root.remove();
                 this.#slots.delete(pageIndex);
+                for (const pages of this.#painted.values())
+                    pages.delete(pageIndex);
             }
         for (let pageIndex = range.start; pageIndex < range.end; pageIndex += 1) {
             const slot = this.#slots.get(pageIndex) ?? this.#createSlot(pageIndex);
@@ -443,41 +453,86 @@ export class ViewerViewport {
         slot.controller = controller;
         const generation = ++slot.generation;
         const zoom = this.#host.state.zoom;
+        const devicePixelRatio = window.devicePixelRatio || 1;
+        const pageRevision = this.#pageRevisions[pageIndex] ?? 0;
         const contentRevision = this.#contentRevision;
+        // Adapters resize and paint their target asynchronously. Never give them
+        // the visible canvas: resizing clears it before the next frame is ready.
+        const canvas = document.createElement("canvas");
+        const textLayer = document.createElement("div");
+        const highlightLayer = document.createElement("div");
+        textLayer.style.cssText = slot.textLayer.style.cssText;
+        highlightLayer.style.cssText = slot.highlightLayer.style.cssText;
+        const isCurrent = () => !this.#destroyed &&
+            !controller.signal.aborted &&
+            this.#slots.get(pageIndex) === slot &&
+            slot.controller === controller &&
+            slot.generation === generation &&
+            (this.#pageRevisions[pageIndex] ?? 0) === pageRevision &&
+            this.#host.state.zoom === zoom &&
+            (window.devicePixelRatio || 1) === devicePixelRatio;
+        let rendering;
         try {
-            let renderError;
-            const rendering = this.#host
-                .renderPage(pageIndex, slot.canvas, {
+            rendering = this.#host.renderPage(pageIndex, canvas, {
                 zoom,
-                devicePixelRatio: window.devicePixelRatio || 1,
+                devicePixelRatio,
                 priority: pageIndex === this.#host.state.pageIndex ? "visible" : "adjacent",
                 signal: controller.signal,
+            });
+            const preparingText = this.#host
+                .getTextRuns(pageIndex, controller.signal)
+                .then(async (runs) => {
+                await rendering;
+                if (!isCurrent())
+                    return;
+                await this.#buildTextLayers(textLayer, highlightLayer, pageIndex, runs, zoom, controller.signal);
             })
-                .catch((error) => {
-                renderError = error;
+                .then(() => true, (error) => {
+                if (isCurrent())
+                    slot.root.dataset.renderError =
+                        error instanceof Error ? error.message : String(error);
+                // A valid raster still publishes without unavailable geometry.
+                // Never retain partial or previous text/highlight hit targets.
+                for (const layer of [textLayer, highlightLayer]) {
+                    layer.replaceChildren();
+                    resetOverlay(layer);
+                }
+                return false;
             });
-            const runs = await this.#host.getTextRuns(pageIndex, controller.signal);
-            if (controller.signal.aborted || slot.generation !== generation)
-                return;
-            await this.#buildTextLayers(slot.textLayer, slot.highlightLayer, pageIndex, runs, zoom, controller.signal);
-            if (controller.signal.aborted || slot.generation !== generation)
-                return;
-            await rendering;
-            if (renderError)
-                throw renderError;
-            if (controller.signal.aborted || slot.generation !== generation)
+            const [, textReady] = await Promise.all([rendering, preparingText]);
+            if (!isCurrent())
                 return;
-            const cssWidth = slot.canvas.width / (window.devicePixelRatio || 1);
-            const cssHeight = slot.canvas.height / (window.devicePixelRatio || 1);
+            const context = slot.canvas.getContext("2d");
+            if (!context)
+                throw new Error("Canvas 2D context is unavailable");
+            // Publish the completed raster and its matching text geometry in one
+            // synchronous commit, keeping the mounted page and layer identities.
+            slot.canvas.width = canvas.width;
+            slot.canvas.height = canvas.height;
+            context.drawImage(canvas, 0, 0);
+            replaceTextLayer(slot.textLayer, textLayer);
+            replaceTextLayer(slot.highlightLayer, highlightLayer);
+            const cssWidth = canvas.width / devicePixelRatio;
+            const cssHeight = canvas.height / devicePixelRatio;
             slot.root.style.width = `${cssWidth}px`;
             slot.root.style.height = `${cssHeight}px`;
+            if (textReady)
+                delete slot.root.dataset.renderError;
             this.#markPainted(pageIndex, contentRevision);
         }
         catch (error) {
-            if (!controller.signal.aborted) {
+            if (isCurrent()) {
                 slot.root.dataset.renderError =
                     error instanceof Error ? error.message : String(error);
             }
+            controller.abort();
+        }
+        finally {
+            // A cancelled adapter may still be writing. Release its backing store
+            // only once it has stopped, without affecting the committed page.
+            await rendering?.catch(() => undefined);
+            canvas.width = 0;
+            canvas.height = 0;
         }
     }
     async #buildTextLayers(textLayer, highlightLayer, pageIndex, runs, zoom, signal) {
@@ -817,6 +872,7 @@ export class ViewerViewport {
         });
     }
     #clearSlots() {
+        this.#painted.clear();
         for (const slot of this.#slots.values()) {
             slot.controller?.abort();
             slot.root.remove();
@@ -824,6 +880,13 @@ export class ViewerViewport {
         this.#slots.clear();
     }
 }
+function replaceTextLayer(target, source) {
+    const children = document.createDocumentFragment();
+    while (source.firstChild)
+        children.append(source.firstChild);
+    target.style.cssText = source.style.cssText;
+    target.replaceChildren(children);
+}
 function naturalPageSize(info, pageIndex) {
     const candidate = info?.pageSizes?.[pageIndex];
     return candidate &&

package/dist/worker-protocol.d.ts

@@ -2,7 +2,7 @@ import type { DocumentFormat, DocumentInfo, ResourceLimits, TextRun, ViewerError
 import type { EditableFormat } from "./edit/types.js";
 export type DocumentWorkerOperation = "init" | "open" | "get-info" | "render" | "get-text-map" | "close" | "destroy";
 /** Operations of an edit engine worker; payloads mirror the engine interface. */
-export type EditWorkerOperation = "edit-init" | "edit-open" | "edit-validate" | "edit-apply" | "edit-materialize" | "edit-restore" | "edit-put-asset" | "edit-elements" | "edit-element" | "edit-elements-at" | "edit-find-text" | "edit-text-layout" | "edit-position-at" | "edit-range-rects" | "edit-render-without" | "edit-page-layout" | "edit-pptx-slides" | "edit-pptx-layouts" | "edit-docx-revisions" | "edit-dispose";
+export type EditWorkerOperation = "edit-init" | "edit-open" | "edit-validate" | "edit-apply" | "edit-materialize" | "edit-restore" | "edit-put-asset" | "edit-elements" | "edit-element" | "edit-elements-at" | "edit-find-text" | "edit-text-layout" | "edit-text-font" | "edit-position-at" | "edit-range-rects" | "edit-render-without" | "edit-page-layout" | "edit-pptx-slides" | "edit-pptx-layouts" | "edit-docx-revisions" | "edit-docx-text-style" | "edit-pptx-text-style" | "edit-dispose";
 export type WorkerOperation = DocumentWorkerOperation | EditWorkerOperation;
 export interface WorkerRequest {
     readonly kind: "request";