@aseity/idocs-preview 0.1.0 → 0.2.0

package/dist/core/protocol.d.ts

@@ -1,4 +1,4 @@
-import type { DisplayPage } from './display.js';
+import type { DisplayPage, GlyphOutline } from './display.js';
 export type DocumentKind = 'idoc' | 'docx';
 /**
  * Either end of the channel: a Worker (or a MessagePort) on the session side,
@@ -40,7 +40,7 @@ export interface ConversionLoss {
     [key: string]: unknown;
 }
 export interface PreviewImage {
-    format: 'png' | 'jpeg';
+    format: 'png' | 'jpeg' | 'svg+xml';
     bytes: Uint8Array;
     /**
      * A placeholder for an image `readResource` could not give or core could
@@ -48,9 +48,25 @@ export interface PreviewImage {
      * warning. Draw a placeholder box rather than `bytes`.
      */
     missing?: boolean;
+    /** Draw washed out, as Word's picture watermark: each channel `min(255, 205 + 0.3 × value)`. */
+    washout?: boolean;
 }
 /** A laid-out document: the whole layout converged, every page at once. */
+export interface FontUse {
+    file: string;
+    sha256: string;
+    faceIndex: number;
+    declaredFamily: string;
+    family: string;
+    style: string;
+    bold: boolean;
+    italic: boolean;
+    syntheticSlant: number;
+    substituted: boolean;
+}
 export interface PreviewDocument {
+    fonts?: FontUse[];
+    glyphOutlines?: GlyphOutline[];
     pageCount: number;
     pages: DisplayPage[];
     images: PreviewImage[];
@@ -64,9 +80,6 @@ export interface PreviewDocument {
 export type ResourceNeed = {
     kind: 'asset';
     name: string;
-} | {
-    kind: 'font';
-    name: string;
 };
 export type ToWorker = {
     type: 'init';
@@ -77,6 +90,7 @@ export type ToWorker = {
     kind: DocumentKind;
     name: string;
     bytes: Uint8Array;
+    progressive?: boolean;
 }
 /** Answers to a `needs` message; `bytes: null` means the host has none. */
  | {
@@ -87,14 +101,31 @@ export type ToWorker = {
         bytes: Uint8Array | null;
     }[];
 };
+export interface PreviewPage {
+    page: DisplayPage;
+    images: PreviewImage[];
+    glyphOutlines: GlyphOutline[];
+    pageCount: number;
+}
 export type FromWorker = {
+    type: 'pageReset';
+    id: number;
+} | {
+    type: 'page';
+    id: number;
+    json: string;
+    data: Uint8Array;
+    images: Uint8Array[];
+} | {
     type: 'needs';
     id: number;
     needs: ResourceNeed[];
 } | {
     type: 'opened';
     id: number;
-    document: PreviewDocument;
+    json: string;
+    images: Uint8Array[];
+    data: Uint8Array;
 } | {
     type: 'failed';
     id: number;

package/dist/core/wire.d.ts

@@ -0,0 +1,14 @@
+import type { Glyph, GlyphShape, LineGlyph } from './display.js';
+import type { PreviewDocument } from './protocol.js';
+interface Packed {
+    f64: Float64Array;
+    u32: Uint32Array;
+    count: number;
+    texts: string[];
+    shapes: GlyphShape[][];
+}
+export declare function packedGlyphs(glyphs: readonly Glyph[]): Packed | undefined;
+export declare function glyphX(glyphs: readonly LineGlyph[], index: number): number;
+export declare function glyphOffset(glyphs: readonly LineGlyph[], index: number): number;
+export declare function decodeCompact(json: string, data: Uint8Array, images: Uint8Array[]): PreviewDocument;
+export {};

package/dist/core/wire.js

@@ -0,0 +1,100 @@
+const glyphRecords = new WeakMap();
+const lineRecords = new WeakMap();
+export function packedGlyphs(glyphs) {
+    return glyphRecords.get(glyphs);
+}
+export function glyphX(glyphs, index) {
+    const packed = lineRecords.get(glyphs);
+    return packed ? packed.f64[index * 2] : glyphs[index].x;
+}
+export function glyphOffset(glyphs, index) {
+    const packed = lineRecords.get(glyphs);
+    return packed ? packed.u32[index * 4 + 2] : glyphs[index].offset;
+}
+function lazyArray(count, read) {
+    const target = new Array(count);
+    const indexOf = (key) => typeof key === 'string' && /^(0|[1-9]\d*)$/.test(key) ? Number(key) : -1;
+    return new Proxy(target, {
+        get(target, key, receiver) {
+            const index = indexOf(key);
+            return index >= 0 && index < count ? read(index) : Reflect.get(target, key, receiver);
+        },
+        has(target, key) {
+            const index = indexOf(key);
+            return index >= 0 && index < count || Reflect.has(target, key);
+        },
+        ownKeys() { return [...Array.from({ length: count }, (_, i) => String(i)), 'length']; },
+        getOwnPropertyDescriptor(target, key) {
+            const index = indexOf(key);
+            return index >= 0 && index < count
+                ? { value: read(index), writable: false, enumerable: true, configurable: true }
+                : Reflect.getOwnPropertyDescriptor(target, key);
+        },
+        set() { throw new TypeError('Compact preview glyph arrays are read-only'); },
+        deleteProperty() { throw new TypeError('Compact preview glyph arrays are read-only'); },
+        defineProperty() { throw new TypeError('Compact preview glyph arrays are read-only'); },
+    });
+}
+function range(value, kind, data) {
+    if (typeof value !== 'object' || value === null || !('offset' in value) || !('count' in value) || !('kind' in value)
+        || value.kind !== kind || typeof value.offset !== 'number' || typeof value.count !== 'number'
+        || !Number.isSafeInteger(value.offset) || !Number.isSafeInteger(value.count)
+        || value.offset < 0 || value.count < 0 || value.offset % 8 !== 0
+        || value.offset + value.count * (kind === 'glyph' ? 32 : 16) > data.byteLength) {
+        throw new Error('Invalid compact glyph range');
+    }
+    return { offset: value.offset, count: value.count, kind };
+}
+export function decodeCompact(json, data, images) {
+    const parsed = JSON.parse(json);
+    if (parsed.wireVersion !== 1 || !Array.isArray(parsed.texts) || !parsed.texts.every(text => typeof text === 'string')
+        || !Array.isArray(parsed.shapes) || parsed.images.length !== images.length || data.byteOffset % 8 !== 0
+        || new Uint8Array(new Uint32Array([1]).buffer)[0] !== 1)
+        throw new Error('Invalid compact preview');
+    const { texts, shapes, wireVersion: _, ...document } = parsed;
+    function records(value, kind) {
+        const { offset, count } = range(value, kind, data);
+        const bytes = count * (kind === 'glyph' ? 32 : 16);
+        const packed = {
+            f64: new Float64Array(data.buffer, data.byteOffset + offset, bytes / 8),
+            u32: new Uint32Array(data.buffer, data.byteOffset + offset, bytes / 4), count, texts, shapes,
+        };
+        if (kind === 'glyph')
+            for (let i = 0; i < count; i++) {
+                if (packed.u32[i * 8 + 5] >= texts.length || packed.u32[i * 8 + 6] > 7 || (packed.u32[i * 8 + 6] & 6) === 6 || packed.u32[i * 8 + 7] > shapes.length)
+                    throw new Error('Invalid compact glyph reference');
+            }
+        return packed;
+    }
+    function visitItems(items) {
+        for (const item of items) {
+            if (item.kind === 'glyphs') {
+                const p = records(item.glyphs, 'glyph');
+                const glyphs = lazyArray(p.count, i => {
+                    const flags = p.u32[i * 8 + 6];
+                    const shape = p.u32[i * 8 + 7];
+                    return {
+                        x: p.f64[i * 4], width: p.f64[i * 4 + 1], offset: p.u32[i * 8 + 4], text: texts[p.u32[i * 8 + 5]],
+                        shapes: shape === 0 ? [] : shapes[shape - 1],
+                        ...(flags & 1 ? { unmeasured: true } : {}),
+                        ...(flags & 2 ? { generated: 'automatic' } : flags & 4 ? { generated: 'manual' } : {}),
+                    };
+                });
+                glyphRecords.set(glyphs, p);
+                item.glyphs = glyphs;
+            }
+            else if (item.kind === 'clip' || item.kind === 'turn' || item.kind === 'transform')
+                visitItems(item.items);
+        }
+    }
+    for (const page of document.pages) {
+        visitItems(page.items);
+        for (const line of page.lines) {
+            const p = records(line.glyphs, 'line');
+            const glyphs = lazyArray(p.count, i => ({ x: p.f64[i * 2], offset: p.u32[i * 4 + 2] }));
+            lineRecords.set(glyphs, p);
+            line.glyphs = glyphs;
+        }
+    }
+    return { ...document, images: parsed.images.map((image, i) => ({ ...image, bytes: images[i] })) };
+}

package/dist/view/find.js

@@ -4,7 +4,7 @@ export function matchSelection(match) {
     return { story: match.story, start: match.start, end: match.end, reversed: false };
 }
 /** Reading order of the stories on one page. */
-const RANK = { header: 0, body: 1, footnotes: 2, footer: 3 };
+const RANK = { header: 0, body: 1, footnotes: 2, footer: 3, textbox: 4, lineNumber: 5 };
 function rank(story) {
     return RANK[storyKind(story)];
 }

package/dist/view/index.d.ts

@@ -1,4 +1,4 @@
-import type { DisplayPage, PreviewImage } from '../core/index.js';
+import type { GlyphOutline, DisplayPage, PreviewImage } from '../core/index.js';
 export { canvasFont, type CanvasFontInput, fontChain, type FontChainInput } from '../core/fonts.js';
 /**
  * Decoded images by resource index (`ImageItem.image`): a source is drawn
@@ -7,16 +7,19 @@ export { canvasFont, type CanvasFontInput, fontChain, type FontChainInput } from
  */
 export type PageImages = readonly (CanvasImageSource | null | undefined)[];
 /**
- * Decode every image resource of a document with `createImageBitmap`. A
+ * Decode raster resources as bitmaps and SVGs as vector image elements. A
  * placeholder resource (`missing`) or bytes the browser cannot decode give
  * `null`; the latter is reported through `onError`.
  */
-export declare function decodeImages(images: readonly PreviewImage[], onError?: (index: number, error: unknown) => void): Promise<(ImageBitmap | null)[]>;
+export type DecodedImage = ImageBitmap | (HTMLImageElement & {
+    close(): void;
+});
+export declare function decodeImages(images: readonly PreviewImage[], onError?: (index: number, error: unknown) => void): Promise<(DecodedImage | null)[]>;
 /**
  * Paint one page onto `ctx`, whose origin is the page's top-left corner and
  * whose unit is `pixelsPerPoint` device pixels.
  */
-export declare function paintPage(ctx: CanvasRenderingContext2D, page: DisplayPage, pixelsPerPoint: number, images?: PageImages): void;
+export declare function paintPage(ctx: CanvasRenderingContext2D, page: DisplayPage, pixelsPerPoint: number, images?: PageImages, outlines?: readonly GlyphOutline[]): void;
 export * from './shell.js';
 export * from './viewport.js';
 export * from './selection.js';

package/dist/view/index.js

@@ -1,4 +1,5 @@
-import { canvasFont } from '../core/fonts.js';
+import { packedGlyphs } from '../core/wire.js';
+import { canvasFont, CANVAS_TEXT_LANGUAGE } from '../core/fonts.js';
 export { canvasFont, fontChain } from '../core/fonts.js';
 /** Parsed paths, kept while the page's display list lives (redraws on zoom). */
 const paths = new WeakMap();
@@ -10,17 +11,15 @@ function path2d(item) {
     }
     return path;
 }
-/**
- * Decode every image resource of a document with `createImageBitmap`. A
- * placeholder resource (`missing`) or bytes the browser cannot decode give
- * `null`; the latter is reported through `onError`.
- */
 export function decodeImages(images, onError = (index, error) => console.warn(`image ${index} cannot be decoded`, error)) {
     return Promise.all(images.map(async (image, index) => {
         if (image.missing)
             return null;
         try {
-            return await createImageBitmap(new Blob([image.bytes], { type: `image/${image.format}` }));
+            if (image.format === 'svg+xml')
+                return await decodeSvg(image.bytes);
+            const bitmap = await createImageBitmap(new Blob([image.bytes], { type: `image/${image.format}` }));
+            return image.washout ? await washedOut(bitmap) : bitmap;
         }
         catch (error) {
             onError(index, error);
@@ -28,6 +27,50 @@ export function decodeImages(images, onError = (index, error) => console.warn(`i
         }
     }));
 }
+/** Keep vectors available for every Canvas zoom; ImageBitmap cannot decode SVG. */
+async function decodeSvg(bytes) {
+    const xml = new DOMParser().parseFromString(new TextDecoder().decode(bytes), 'image/svg+xml');
+    const root = xml.documentElement;
+    // Browsers give viewBox-only image documents a 300×150 viewport. Match the
+    // source's intrinsic ratio instead, including when just one dimension is set.
+    const box = root.viewBox.baseVal;
+    const width = root.getAttribute('width');
+    const height = root.getAttribute('height');
+    if (box.width > 0 && box.height > 0) {
+        if (!width)
+            root.setAttribute('width', String(height ? root.height.baseVal.value * box.width / box.height : box.width));
+        if (!height)
+            root.setAttribute('height', String(width ? root.width.baseVal.value * box.height / box.width : box.height));
+    }
+    const url = URL.createObjectURL(new Blob([new XMLSerializer().serializeToString(xml)], { type: 'image/svg+xml' }));
+    const image = Object.assign(new Image(), { close: () => URL.revokeObjectURL(url) });
+    image.src = url;
+    try {
+        await image.decode();
+        return image;
+    }
+    catch (error) {
+        image.close();
+        throw error;
+    }
+}
+/** Word's washout (#473): each channel `min(255, 205 + 0.3 × value)`. */
+async function washedOut(bitmap) {
+    const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        return bitmap;
+    ctx.drawImage(bitmap, 0, 0);
+    const pixels = ctx.getImageData(0, 0, bitmap.width, bitmap.height);
+    const data = pixels.data;
+    for (let i = 0; i < data.length; i += 4) {
+        for (let k = 0; k < 3; k++)
+            data[i + k] = Math.min(255, Math.round(205 + 0.3 * data[i + k]));
+    }
+    ctx.putImageData(pixels, 0, 0);
+    bitmap.close();
+    return createImageBitmap(canvas);
+}
 function paintImage(ctx, item, images) {
     const source = images[item.image];
     if (source) {
@@ -52,23 +95,50 @@ function paintImage(ctx, item, images) {
     ctx.stroke();
     ctx.restore();
 }
-function paintItems(ctx, items, images) {
+function paintItems(ctx, items, images, outlines) {
     for (const item of items) {
         switch (item.kind) {
             case 'glyphs':
-                ctx.font = canvasFont(item);
                 ctx.fillStyle = item.color;
-                // Every glyph at the x its metric profile gives, never scaled. A
-                // character nothing could measure gets a box over its estimated width,
-                // as the native snapshot draws a missing glyph.
-                for (const glyph of item.glyphs) {
-                    if (glyph.unmeasured) {
-                        ctx.strokeStyle = item.color;
-                        ctx.lineWidth = 0.5;
-                        ctx.strokeRect(glyph.x, item.lineTop, glyph.width, item.lineHeight);
+                ctx.font = canvasFont(item);
+                ctx.fontKerning = 'none';
+                // File mode supplies outlines; browser mode shares the measurement CSS.
+                const packed = packedGlyphs(item.glyphs);
+                const count = packed?.count ?? item.glyphs.length;
+                for (let i = 0; i < count; i++) {
+                    const glyph = packed ? undefined : item.glyphs[i];
+                    const x = packed ? packed.f64[i * 4] : glyph.x;
+                    const width = packed ? packed.f64[i * 4 + 1] : glyph.width;
+                    const text = packed ? packed.texts[packed.u32[i * 8 + 5]] : glyph.text;
+                    const unmeasured = packed ? (packed.u32[i * 8 + 6] & 1) !== 0 : glyph.unmeasured;
+                    const shapes = packed ? packed.shapes[packed.u32[i * 8 + 7] - 1] : glyph.shapes;
+                    if (shapes?.length) {
+                        for (const shape of shapes) {
+                            const outline = outlines[shape.outline];
+                            if (!outline)
+                                throw new Error(`Missing glyph outline ${shape.outline}`);
+                            ctx.save();
+                            const sx = item.scaleX ?? 1;
+                            ctx.transform(item.size * sx, 0, item.size * (item.syntheticSlant ?? 0) * sx, -item.size, x + shape.xOffset * item.size * sx, item.baseline - shape.yOffset * item.size);
+                            ctx.fill(path2d(outline));
+                            ctx.restore();
+                        }
+                    }
+                    else if (!unmeasured) {
+                        if (item.scaleX !== undefined) {
+                            ctx.save();
+                            ctx.translate(x, item.baseline);
+                            ctx.scale(item.scaleX, 1);
+                            ctx.fillText(text, 0, 0);
+                            ctx.restore();
+                        }
+                        else
+                            ctx.fillText(text, x, item.baseline);
                     }
                     else {
-                        ctx.fillText(glyph.text, glyph.x, item.baseline);
+                        ctx.strokeStyle = item.color;
+                        ctx.lineWidth = 0.5;
+                        ctx.strokeRect(x, item.lineTop, width, item.lineHeight);
                     }
                 }
                 break;
@@ -89,18 +159,62 @@ function paintItems(ctx, items, images) {
                 ctx.beginPath();
                 ctx.rect(item.rect.x, item.rect.y, item.rect.width, item.rect.height);
                 ctx.clip();
-                paintItems(ctx, item.items, images);
+                paintItems(ctx, item.items, images, outlines);
                 ctx.restore();
                 break;
             case 'turn':
                 ctx.save();
                 ctx.transform(0, 1, -1, 0, item.x, item.y);
-                paintItems(ctx, item.items, images);
+                paintItems(ctx, item.items, images, outlines);
+                ctx.restore();
+                break;
+            case 'transform':
+                ctx.save();
+                ctx.transform(...item.matrix);
+                paintItems(ctx, item.items, images, outlines);
                 ctx.restore();
                 break;
+            case 'shape': {
+                const path = path2d(item);
+                if (item.fill !== undefined) {
+                    if (typeof item.fill === 'string') {
+                        ctx.fillStyle = item.fill;
+                    }
+                    else {
+                        const paint = item.fill;
+                        const scale = 4;
+                        const tile = new OffscreenCanvas(paint.width * scale, paint.height * scale);
+                        const brush = tile.getContext('2d');
+                        if (!brush)
+                            throw new Error('Pattern canvas context unavailable');
+                        brush.scale(scale, scale);
+                        brush.fillStyle = paint.background;
+                        brush.fillRect(0, 0, paint.width, paint.height);
+                        brush.fillStyle = paint.foreground;
+                        for (const rectangle of paint.rects)
+                            brush.fillRect(...rectangle);
+                        const pattern = ctx.createPattern(tile, 'repeat');
+                        if (!pattern)
+                            throw new Error('Pattern fill unavailable');
+                        pattern.setTransform(new DOMMatrix().scale(1 / scale));
+                        ctx.fillStyle = pattern;
+                    }
+                    ctx.fill(path);
+                }
+                if (item.stroke) {
+                    ctx.save();
+                    ctx.strokeStyle = item.stroke.color;
+                    ctx.lineWidth = item.stroke.width;
+                    ctx.setLineDash(item.stroke.dash ?? []);
+                    ctx.stroke(path);
+                    ctx.restore();
+                }
+                break;
+            }
             case 'path': {
-                // Formula glyph outlines and stretchy delimiters come with the display
-                // list (KaTeX outlines in core), so no math font is needed here.
+                // Formula glyph outlines, stretchy delimiters and emphasis marks come
+                // with the display list (KaTeX outlines in core), so no math font is
+                // needed here.
                 ctx.save();
                 if (item.clip) {
                     ctx.beginPath();
@@ -109,7 +223,23 @@ function paintItems(ctx, items, images) {
                 }
                 ctx.transform(...item.transform);
                 ctx.fillStyle = item.color;
-                ctx.fill(path2d(item));
+                const browserFont = item.glyph?.text?.browser;
+                if (browserFont) {
+                    // Formula coordinates use an em square with an upward y axis.
+                    ctx.scale(1 / 100, -1 / 100);
+                    ctx.font = canvasFont({ ...browserFont, role: 'serif', size: 100 });
+                    ctx.fontKerning = 'none';
+                    ctx.fillText(item.glyph.char, 0, 0);
+                }
+                else {
+                    ctx.fill(path2d(item));
+                }
+                const stroke = item.glyph?.text?.standIn.strokeEm;
+                if (stroke && item.transform[3] !== 0) {
+                    ctx.strokeStyle = item.color;
+                    ctx.lineWidth = stroke * item.glyph.size / Math.abs(item.transform[3]);
+                    ctx.stroke(path2d(item));
+                }
                 ctx.restore();
                 break;
             }
@@ -123,15 +253,16 @@ function paintItems(ctx, items, images) {
  * Paint one page onto `ctx`, whose origin is the page's top-left corner and
  * whose unit is `pixelsPerPoint` device pixels.
  */
-export function paintPage(ctx, page, pixelsPerPoint, images = []) {
+export function paintPage(ctx, page, pixelsPerPoint, images = [], outlines = []) {
     ctx.save();
+    Object.assign(ctx, { lang: CANVAS_TEXT_LANGUAGE });
     ctx.setTransform(pixelsPerPoint, 0, 0, pixelsPerPoint, 0, 0);
     ctx.fillStyle = '#fff';
     ctx.fillRect(0, 0, page.width, page.height);
     ctx.textBaseline = 'alphabetic';
     ctx.textAlign = 'left';
     ctx.direction = 'ltr';
-    paintItems(ctx, page.items, images);
+    paintItems(ctx, page.items, images, outlines);
     ctx.restore();
 }
 // The shell (scrolling, zoom, virtualization, host interface): shell.ts.

package/dist/view/selection.js

@@ -1,29 +1,30 @@
+import { glyphX, glyphOffset } from '../core/wire.js';
 function textLength(line) {
     return line.text.length;
 }
 /** Right edge of glyph `k`: the next glyph's x, the last one's at the line end. */
 function glyphEnd(line, k) {
-    return k + 1 < line.glyphs.length ? line.glyphs[k + 1].x : line.x + line.width;
+    return k + 1 < line.glyphs.length ? glyphX(line.glyphs, k + 1) : line.x + line.width;
 }
 /** Offset of glyph `k`'s end within the line text. */
 function glyphEndOffset(line, k) {
-    return k + 1 < line.glyphs.length ? line.glyphs[k + 1].offset : textLength(line);
+    return k + 1 < line.glyphs.length ? glyphOffset(line.glyphs, k + 1) : textLength(line);
 }
 /** Offset (in the line text) of the glyph whose box holds `x`, or undefined outside the glyphs. */
 export function indexForX(line, x) {
     for (let k = 0; k < line.glyphs.length; k++) {
-        if (x >= line.glyphs[k].x && x < glyphEnd(line, k))
-            return line.glyphs[k].offset;
+        if (x >= glyphX(line.glyphs, k) && x < glyphEnd(line, k))
+            return glyphOffset(line.glyphs, k);
     }
     return undefined;
 }
 /** Offset (in the line text) of the glyph boundary nearest `x`: left half of a glyph before it, right half after. */
 export function closestIndexForX(line, x) {
     for (let k = 0; k < line.glyphs.length; k++) {
-        const start = line.glyphs[k].x;
+        const start = glyphX(line.glyphs, k);
         const end = glyphEnd(line, k);
         if (x < (start + end) / 2)
-            return line.glyphs[k].offset;
+            return glyphOffset(line.glyphs, k);
     }
     return textLength(line);
 }
@@ -31,7 +32,7 @@ export function closestIndexForX(line, x) {
 export function xForIndex(line, index) {
     for (let k = 0; k < line.glyphs.length; k++) {
         if (index < glyphEndOffset(line, k))
-            return line.glyphs[k].x;
+            return glyphX(line.glyphs, k);
     }
     return line.x + line.width;
 }

package/dist/view/shell.d.ts

@@ -45,6 +45,8 @@ export interface PreviewOptions extends ViewOptions {
     session?: SessionOptions;
     /** Shown while layout runs. */
     loadingText?: string;
+    /** Show the first page while later display pages are generated. Selection becomes available when open completes. */
+    progressive?: boolean;
 }
 export type PreviewState = 'empty' | 'loading' | 'ready' | 'error';
 export interface Preview {

package/dist/view/shell.js

@@ -153,7 +153,7 @@ export function mountPreview(container, doc, options = {}) {
         const ctx = canvas.getContext('2d');
         slot.pixelsPerPoint = PX_PER_PT * zoom * res.scale;
         if (ctx)
-            paintPage(ctx, doc.pages[index], slot.pixelsPerPoint, images);
+            paintPage(ctx, doc.pages[index], slot.pixelsPerPoint, images, doc.glyphOutlines);
         const { overlay } = slot;
         overlay.width = res.width;
         overlay.height = res.height;
@@ -321,6 +321,16 @@ export function createPreview(container, options = {}) {
     let view;
     let latest = 0;
     let destroyed = false;
+    let firstPage;
+    let firstImages = [];
+    const clearFirstPage = () => {
+        if (firstPage)
+            freeCanvas(firstPage);
+        firstPage = undefined;
+        for (const image of firstImages)
+            image?.close();
+        firstImages = [];
+    };
     const root = element('div', 'idocs-preview');
     Object.assign(root.style, { height: '100%', position: 'relative' });
     const status = element('div', 'idocs-preview-status');
@@ -340,13 +350,50 @@ export function createPreview(container, options = {}) {
             if (destroyed)
                 throw new Error('the preview was destroyed');
             const ticket = ++latest;
+            clearFirstPage();
             view?.destroy();
             view = undefined;
             doc = undefined;
             setState('loading', options.loadingText ?? '正在排版…');
             try {
-                const opened = await session.open(bytes, openOptions);
+                const opened = await session.open(bytes, {
+                    ...openOptions,
+                    onPage: options.progressive ? (part) => {
+                        openOptions?.onPage?.(part);
+                        if (ticket !== latest || destroyed || part.page.number !== 1)
+                            return;
+                        clearFirstPage();
+                        const canvas = element('canvas', 'idocs-preview-first-page');
+                        firstPage = canvas;
+                        const scale = Math.min(zoom * PX_PER_PT, Math.max(1, root.clientWidth - 32) / part.page.width);
+                        const resolution = canvasResolution(part.page.width * scale, part.page.height * scale, globalThis.devicePixelRatio || 1, options.maxCanvasPixels);
+                        canvas.width = resolution.width;
+                        canvas.height = resolution.height;
+                        Object.assign(canvas.style, {
+                            width: `${resolution.width / resolution.scale}px`,
+                            height: `${resolution.height / resolution.scale}px`,
+                            display: 'block', margin: '0 auto',
+                        });
+                        const paint = (images) => {
+                            const context = canvas.getContext('2d');
+                            if (context)
+                                paintPage(context, part.page, scale * resolution.scale, images, part.glyphOutlines);
+                        };
+                        paint([]);
+                        root.append(canvas);
+                        void decodeImages(part.images).then((images) => {
+                            if (firstPage !== canvas || ticket !== latest || destroyed) {
+                                for (const image of images)
+                                    image?.close();
+                                return;
+                            }
+                            firstImages = images;
+                            paint(images);
+                        });
+                    } : openOptions?.onPage,
+                });
                 if (ticket === latest && !destroyed) {
+                    clearFirstPage();
                     setState('ready');
                     doc = opened;
                     view = mountPreview(root, opened, {
@@ -361,8 +408,10 @@ export function createPreview(container, options = {}) {
                 return opened;
             }
             catch (error) {
-                if (ticket === latest && !destroyed)
+                if (ticket === latest && !destroyed) {
+                    clearFirstPage();
                     setState('error', error.message);
+                }
                 throw error;
             }
         },
@@ -392,6 +441,7 @@ export function createPreview(container, options = {}) {
             if (destroyed)
                 return;
             destroyed = true;
+            clearFirstPage();
             view?.destroy();
             view = undefined;
             doc = undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aseity/idocs-preview",
-  "version": "0.1.0",
-  "description": "Read-only browser preview for DOCX and iDocs source documents: Word-calibrated layout in a Web Worker (WASM) and a Canvas page view.",
+  "version": "0.2.0",
+  "description": "Read-only browser preview for DOCX and iDocs source documents: Browser font measurements with layout in a Web Worker (WASM) and drawing in a Canvas page view.",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -37,7 +37,7 @@
     "dev": "vite dev",
     "changeset": "changeset",
     "release:version": "changeset version && npm install --package-lock-only",
-    "release:check": "npm run typecheck && npm test && node scripts/release-pack.mjs"
+    "release:check": "node scripts/release-pack.mjs"
   },
   "engines": {
     "node": ">=24"