@scalewing/react 1.41.0 → 1.42.0

package/dist/components/ListRow.js

@@ -1,22 +1,20 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useId } from 'react';
+import { useId } from 'react';
 import { cx } from '../class-names.js';
 import { assertListRow, listRowAccessory, } from '../list-options.js';
 import { tabStop } from '../tab-stop.js';
 import { plainPress } from './link-press.js';
 import { ListRowContent } from './list/ListRowContent.js';
-import { ListRowContainer } from './list/list-row-container.js';
-function ids(...parts) {
-    const joined = parts.filter(Boolean).join(' ');
-    return joined === '' ? undefined : joined;
-}
+import { ListRowItem } from './list/ListRowItem.js';
+import { rowNaming } from './list/row-naming.js';
 /**
  * One row of a `ListGroup`: it opens something (`onPress` or `href`, with
  * a chevron, the whole row pressing), picks one option in place
- * (`selected`), or only states something (neither).
+ * (`selected`), or only states something (neither). `unread` marks it new,
+ * `tag` adds a status before its end, and `action` a control beside it.
  */
-export function ListRow({ title, detail, value, valueDetail, valueTone, valueBadge, leading, onPress, href, selected, disabled = false, tone = 'default', titleAppearance = 'strong', accessory = 'chevron', 'aria-label': ariaLabel, }) {
+export function ListRow({ title, detail, value, valueDetail, valueTone, valueBadge, leading, onPress, href, selected, disabled = false, tone = 'default', titleAppearance = 'strong', accessory = 'chevron', unread = false, unreadLabel, tag, action, 'aria-label': ariaLabel, }) {
     const pressable = onPress !== undefined || href !== undefined;
     assertListRow({
         title,
@@ -29,19 +27,21 @@ export function ListRow({ title, detail, value, valueDetail, valueTone, valueBad
         valueBadge,
         selected,
         pressable,
+        unread,
+        unreadLabel,
     });
-    const container = useContext(ListRowContainer);
     const id = useId();
     const kind = listRowAccessory({ pressable, selected, accessory });
-    const content = (_jsx(ListRowContent, { accessory: kind, detail: detail, id: id, leading: leading, title: title, titleAppearance: titleAppearance, tone: tone, value: value, valueBadge: valueBadge, valueDetail: valueDetail, valueTone: valueTone }));
+    const content = (_jsx(ListRowContent, { accessory: kind, detail: detail, id: id, leading: leading, tag: tag, title: title, titleAppearance: titleAppearance, tone: tone, unreadLabel: unread ? unreadLabel : undefined, value: value, valueBadge: valueBadge, valueDetail: valueDetail, valueTone: valueTone }));
     const className = cx('sw-list-row', pressable && 'sw-list-row-pressable', disabled && 'sw-list-row-disabled');
-    const naming = {
+    const naming = rowNaming(id, {
         'aria-label': ariaLabel,
-        'aria-labelledby': ariaLabel
-            ? undefined
-            : ids(`${id}-title`, value !== undefined && `${id}-value`),
-        'aria-describedby': ids(Boolean(detail) && `${id}-detail`, Boolean(valueDetail) && `${id}-value-detail`),
-    };
+        value,
+        detail,
+        valueDetail,
+        unread,
+        tag,
+    });
     let row;
     if (href !== undefined)
         row = (_jsx("a", { ...naming, "aria-current": selected ? 'true' : undefined, "aria-disabled": disabled || undefined, className: className, href: disabled ? undefined : href, onClick: onPress && !disabled
@@ -56,5 +56,5 @@ export function ListRow({ title, detail, value, valueDetail, valueTone, valueBad
         row = (_jsx("button", { ...naming, "aria-pressed": selected, className: className, disabled: disabled, onClick: onPress, tabIndex: tabStop, type: "button", children: content }));
     else
         row = (_jsx("div", { "aria-label": ariaLabel, className: className, role: ariaLabel ? 'group' : undefined, children: content }));
-    return container === 'li' ? (_jsx("li", { className: "sw-list-item", children: row })) : (_jsx("div", { className: "sw-list-item", children: row }));
+    return _jsx(ListRowItem, { action: action, children: row });
 }

package/dist/components/MarkdownView.d.ts

@@ -0,0 +1,39 @@
+import { type MarkdownHeading, type MarkdownOmission, type MarkdownOmissionCounts } from './markdown/markdown-model.js';
+import { type MarkdownOptions } from './markdown/markdown-options.js';
+export type { MarkdownHeading, MarkdownImage, MarkdownImageResolver, MarkdownOmission, MarkdownOmissionCounts, MarkdownOmissionKind, } from './markdown/markdown-model.js';
+export { markdownOmissionKinds } from './markdown/markdown-model.js';
+export type { MarkdownOptions } from './markdown/markdown-options.js';
+export type MarkdownViewProps = MarkdownOptions & {
+    /** The Markdown, as written or pasted. */
+    source: string;
+    /**
+     * Hidden words after every link, which opens in a new tab, such as
+     * "(opens in a new tab)".
+     */
+    newTabLabel: string;
+};
+/** What `inspectMarkdown` finds. */
+export type MarkdownInspection = {
+    /** The headings, with the ids the view gives them. */
+    headings: MarkdownHeading[];
+    /** The first 100 things left out, in order. */
+    omissions: MarkdownOmission[];
+    /** How many of each kind were left out, past the first 100 too. */
+    omissionCounts: MarkdownOmissionCounts;
+};
+/**
+ * What a source's view shows in its headings (for an "On this page" list,
+ * with the ids the view gives them) and what it leaves out (for an editor
+ * to say so before saving). Pure; pass the same options as the view, which
+ * it refuses the same way.
+ */
+export declare function inspectMarkdown(source: string, options?: MarkdownOptions): MarkdownInspection;
+/**
+ * Markdown drawn in Scalewing's type as React elements, never as HTML:
+ * paragraphs, headings (`#` drawn at the page's second level, an `h2`),
+ * lists, bold, italic, links (http, https and mailto only, in a new tab),
+ * block quotes as a highlighted box, line breaks and `photo:` images with
+ * their captions. Raw HTML, tables, other images and other link schemes
+ * are left out (a link's words stay); `inspectMarkdown` lists them.
+ */
+export declare function MarkdownView(props: MarkdownViewProps): import("react").JSX.Element;

package/dist/components/MarkdownView.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { readMarkdown } from './markdown/read-markdown.js';
+import { renderBlocks } from './markdown/render-markdown.js';
+export { markdownOmissionKinds } from './markdown/markdown-model.js';
+/**
+ * What a source's view shows in its headings (for an "On this page" list,
+ * with the ids the view gives them) and what it leaves out (for an editor
+ * to say so before saving). Pure; pass the same options as the view, which
+ * it refuses the same way.
+ */
+export function inspectMarkdown(source, options = {}) {
+    const { headings, omissions, omissionCounts } = readMarkdown(source, options, 'inspectMarkdown');
+    return { headings, omissions, omissionCounts };
+}
+/**
+ * Markdown drawn in Scalewing's type as React elements, never as HTML:
+ * paragraphs, headings (`#` drawn at the page's second level, an `h2`),
+ * lists, bold, italic, links (http, https and mailto only, in a new tab),
+ * block quotes as a highlighted box, line breaks and `photo:` images with
+ * their captions. Raw HTML, tables, other images and other link schemes
+ * are left out (a link's words stay); `inspectMarkdown` lists them.
+ */
+export function MarkdownView(props) {
+    const { source, resolveImage, idPrefix, newTabLabel } = props;
+    if (typeof newTabLabel !== 'string' || newTabLabel.trim() === '')
+        throw new RangeError('MarkdownView newTabLabel must be non-empty text');
+    const reading = useMemo(() => readMarkdown(source, { resolveImage, idPrefix }, 'MarkdownView'), [source, resolveImage, idPrefix]);
+    return (_jsx("div", { className: "sw-markdown", children: renderBlocks(reading.blocks, { newTabLabel }) }));
+}

package/dist/components/NavCount.d.ts

@@ -1,3 +1,6 @@
+/** The pill's colours: `danger` for work waiting, `accent` for news. */
+export declare const navCountTones: readonly ["danger", "accent"];
+export type NavCountTone = (typeof navCountTones)[number];
 export type NavCountProps = {
     /**
      * How many things wait behind the destination, such as tasks to do: a
@@ -11,11 +14,21 @@ export type NavCountProps = {
      * pill then hidden from assistive technology.
      */
     countLabel?: string;
+    /**
+     * The pill's colour. `danger` (the default) is work waiting there, such
+     * as tasks to do; `accent` is news, such as what was added since the
+     * person last looked, where nothing is overdue. Give an accent count a
+     * `countLabel` ("3 new"), so its words, not its colour, say it is news.
+     * Place either tone on a neutral or ghost destination: a filled one of
+     * the same colour would hide it.
+     */
+    tone?: NavCountTone;
 };
 /**
  * A count after a Nav destination's words, placed inside its link or
  * Button: `<a href="/tasks">Tasks<NavCount count={8} /></a>`. It is the
  * pill SectionNav's item count draws, and it is part of the destination's
- * accessible name, as there.
+ * accessible name, as there. `tone="accent"` draws it in the accent colour,
+ * for news rather than work.
  */
-export declare function NavCount({ count, countLabel }: NavCountProps): import("react").JSX.Element | null;
+export declare function NavCount({ count, countLabel, tone, }: NavCountProps): import("react").JSX.Element | null;

package/dist/components/NavCount.js

@@ -1,23 +1,33 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/** Fails closed on a count that is not a whole number or an empty label. */
-function assertNavCount({ count, countLabel }) {
+import { cx } from '../class-names.js';
+import { isOneOf } from '../is-one-of.js';
+/** The pill's colours: `danger` for work waiting, `accent` for news. */
+export const navCountTones = ['danger', 'accent'];
+/**
+ * Fails closed on a count that is not a whole number, an empty label or an
+ * unknown tone.
+ */
+function assertNavCount({ count, countLabel, tone }) {
     if (!Number.isInteger(count) || count < 0)
         throw new RangeError(`NavCount count must be a whole number from 0: ${String(count)}`);
     if (countLabel !== undefined &&
         (typeof countLabel !== 'string' || !countLabel.trim()))
         throw new RangeError('NavCount countLabel must be non-empty text');
+    if (tone !== undefined && !isOneOf(navCountTones, tone))
+        throw new RangeError(`Unknown NavCount tone: ${String(tone)}`);
 }
 /**
  * A count after a Nav destination's words, placed inside its link or
  * Button: `<a href="/tasks">Tasks<NavCount count={8} /></a>`. It is the
  * pill SectionNav's item count draws, and it is part of the destination's
- * accessible name, as there.
+ * accessible name, as there. `tone="accent"` draws it in the accent colour,
+ * for news rather than work.
  */
-export function NavCount({ count, countLabel }) {
-    assertNavCount({ count, countLabel });
+export function NavCount({ count, countLabel, tone = 'danger', }) {
+    assertNavCount({ count, countLabel, tone });
     if (count === 0)
         return null;
     // The space is its own text node, so every browser and the name's
     // computation keep it between the words and the count.
-    return (_jsxs(_Fragment, { children: [' ', countLabel ? _jsx("span", { className: "sw-sr-only", children: countLabel }) : null, _jsx("span", { "aria-hidden": countLabel ? true : undefined, className: "sw-nav-count", children: count })] }));
+    return (_jsxs(_Fragment, { children: [' ', countLabel ? _jsx("span", { className: "sw-sr-only", children: countLabel }) : null, _jsx("span", { "aria-hidden": countLabel ? true : undefined, className: cx('sw-nav-count', tone === 'accent' && 'sw-nav-count-accent'), children: count })] }));
 }

package/dist/components/chart/use-chart-width.js

@@ -1,6 +1,6 @@
 'use client';
-import { useLayoutEffect, useState } from 'react';
 import { chartFallbackWidth } from '../../chart-metrics.js';
+import { useElementWidth } from '../use-element-width.js';
 /**
  * Follows the width a chart is given, so its drawing is laid out in its
  * own pixels: on mount, before the first paint, and whenever its box
@@ -8,27 +8,5 @@ import { chartFallbackWidth } from '../../chart-metrics.js';
  * no ResizeObserver measures on window resizes instead.
  */
 export function useChartWidth(ref) {
-    const [width, setWidth] = useState(chartFallbackWidth);
-    // Before paint, so a phone never shows the wide layout first.
-    useLayoutEffect(() => {
-        const box = ref.current;
-        if (!box)
-            return;
-        function measure() {
-            if (!box)
-                return;
-            const next = Math.round(box.getBoundingClientRect().width);
-            if (next > 0)
-                setWidth(next);
-        }
-        measure();
-        if (typeof ResizeObserver === 'undefined') {
-            window.addEventListener('resize', measure);
-            return () => window.removeEventListener('resize', measure);
-        }
-        const observer = new ResizeObserver(measure);
-        observer.observe(box);
-        return () => observer.disconnect();
-    }, [ref]);
-    return width;
+    return useElementWidth(ref, chartFallbackWidth);
 }

package/dist/components/document-viewer/document-viewer-labels.d.ts

@@ -0,0 +1,23 @@
+/** The viewer's words, all in the consumer's language. */
+export type DocumentViewerLabels = {
+    /** Names the step to the page before, such as "Previous page". */
+    previous: string;
+    /** Names the step to the page after, such as "Next page". */
+    next: string;
+    /** Where the reader is, such as `(page, count) => \`Page ${page} of ${count}\``. */
+    page: (page: number, pageCount: number) => string;
+    /** While the PDF opens, such as "Opening the PDF…". */
+    loading: string;
+    /** When it cannot be shown, such as "This PDF couldn't be shown". */
+    failed: string;
+    /** A line under `failed`, such as what the reader can do instead. */
+    failedDetail?: string;
+};
+/** Fails closed on missing words: the viewer has no words of its own. */
+export declare function assertDocumentViewer({ label, labels, workerSrc, }: {
+    label: string;
+    labels: DocumentViewerLabels;
+    workerSrc: string;
+}): void;
+/** The page shown: the one asked for, kept between 1 and the last page. */
+export declare function shownPage(page: number, pageCount: number): number;

package/dist/components/document-viewer/document-viewer-labels.js

@@ -0,0 +1,23 @@
+function isBlank(text) {
+    return typeof text !== 'string' || text.trim() === '';
+}
+/** Fails closed on missing words: the viewer has no words of its own. */
+export function assertDocumentViewer({ label, labels, workerSrc, }) {
+    if (isBlank(label))
+        throw new RangeError('DocumentViewer label must be non-empty text');
+    if (isBlank(workerSrc))
+        throw new RangeError('DocumentViewer workerSrc must be a URL');
+    for (const key of ['previous', 'next', 'loading', 'failed'])
+        if (isBlank(labels?.[key]))
+            throw new RangeError(`DocumentViewer labels.${key} must be non-empty text`);
+    if (typeof labels.page !== 'function')
+        throw new RangeError('DocumentViewer labels.page must be a function');
+    if (labels.failedDetail !== undefined && isBlank(labels.failedDetail))
+        throw new RangeError('DocumentViewer labels.failedDetail must be non-empty text');
+}
+/** The page shown: the one asked for, kept between 1 and the last page. */
+export function shownPage(page, pageCount) {
+    if (!Number.isInteger(page))
+        return 1;
+    return Math.min(Math.max(page, 1), Math.max(pageCount, 1));
+}

package/dist/components/document-viewer/page-box.d.ts

@@ -0,0 +1,8 @@
+import { type CSSProperties } from 'react';
+/** A US Letter page's height over its width, the box's shape until known. */
+export declare const letterAspect: number;
+/**
+ * The page box's size, read by the generated `sw-document-viewer-page`
+ * rule: its width in CSS pixels and its height over its width.
+ */
+export declare function pageBoxStyle(width: number, aspect: number | null): CSSProperties;

package/dist/components/document-viewer/page-box.js

@@ -0,0 +1,12 @@
+/** A US Letter page's height over its width, the box's shape until known. */
+export const letterAspect = 11 / 8.5;
+/**
+ * The page box's size, read by the generated `sw-document-viewer-page`
+ * rule: its width in CSS pixels and its height over its width.
+ */
+export function pageBoxStyle(width, aspect) {
+    return {
+        '--sw-document-page-width': `${Math.max(0, Math.round(width))}px`,
+        '--sw-document-page-aspect': String(aspect ?? letterAspect),
+    };
+}

package/dist/components/document-viewer/pdf-document.d.ts

@@ -0,0 +1,32 @@
+import { type PdfPageSize } from './render-pdf-page.js';
+export type { PdfPageSize };
+/** An open PDF, as DocumentViewer uses it. */
+export type PdfDocument = {
+    pageCount: number;
+    /**
+     * Draws page `page` (from 1) `width` CSS pixels wide into `canvas`, and
+     * its text into `text` (transparent, for reading and selecting), and
+     * resolves with its size. `signal` cancels it.
+     */
+    renderPage: (options: {
+        page: number;
+        width: number;
+        canvas: HTMLCanvasElement;
+        text: HTMLElement;
+        signal: AbortSignal;
+    }) => Promise<PdfPageSize>;
+    /** The aspect (height over width) of page `page`, without drawing it. */
+    pageAspect: (page: number) => Promise<number>;
+    destroy: () => Promise<void>;
+};
+/** Whether an error is PDF.js reporting a cancelled render or text layer. */
+export declare function isCancelled(error: unknown): boolean;
+/**
+ * Opens a PDF from its bytes with PDF.js's legacy build (the modern one
+ * needs browsers newer than the ones stores run, such as for
+ * `Map.prototype.getOrInsertComputed`), loaded on first use (so a page
+ * without a viewer never downloads it), in a module worker started from
+ * `workerSrc` and ended with the document. Rejects when the bytes are not
+ * a PDF PDF.js can open.
+ */
+export declare function openPdf(data: ArrayBuffer | Uint8Array, workerSrc: string): Promise<PdfDocument>;

package/dist/components/document-viewer/pdf-document.js

@@ -0,0 +1,66 @@
+import { copyPdfBytes, hardenedPdfOptions } from './pdf-options.js';
+import { renderPdfPage } from './render-pdf-page.js';
+/** Whether an error is PDF.js reporting a cancelled render or text layer. */
+export function isCancelled(error) {
+    return (error instanceof Error &&
+        (error.name === 'RenderingCancelledException' ||
+            error.name === 'AbortException'));
+}
+/**
+ * Opens a PDF from its bytes with PDF.js's legacy build (the modern one
+ * needs browsers newer than the ones stores run, such as for
+ * `Map.prototype.getOrInsertComputed`), loaded on first use (so a page
+ * without a viewer never downloads it), in a module worker started from
+ * `workerSrc` and ended with the document. Rejects when the bytes are not
+ * a PDF PDF.js can open.
+ */
+export async function openPdf(data, workerSrc) {
+    const pdfjs = await import('pdfjs-dist/legacy/build/pdf.mjs');
+    const port = new Worker(workerSrc, { type: 'module' });
+    const worker = pdfjs.PDFWorker.create({
+        port,
+        verbosity: hardenedPdfOptions.verbosity,
+    });
+    const task = pdfjs.getDocument({
+        ...hardenedPdfOptions,
+        data: copyPdfBytes(data),
+        worker,
+    });
+    // The worker always ends, even when PDF.js fails to close the document.
+    async function destroy() {
+        try {
+            await task.destroy();
+        }
+        finally {
+            worker.destroy();
+            port.terminate();
+        }
+    }
+    let document;
+    try {
+        document = await task.promise;
+    }
+    catch (error) {
+        // The open error is the one reported, never a failure to close.
+        await destroy().catch(() => undefined);
+        throw error;
+    }
+    const loaded = document;
+    return {
+        pageCount: loaded.numPages,
+        destroy,
+        async pageAspect(page) {
+            const { width, height } = (await loaded.getPage(page)).getViewport({
+                scale: 1,
+            });
+            return height / width;
+        },
+        async renderPage({ page, ...target }) {
+            return renderPdfPage({
+                page: await loaded.getPage(page),
+                ...target,
+                createTextLayer: (options) => new pdfjs.TextLayer(options),
+            });
+        },
+    };
+}

package/dist/components/document-viewer/pdf-options.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The options every document opens with: nothing is fetched beyond the
+ * bytes given, no font, character map, colour profile or WebAssembly file
+ * (PDF.js falls back to system fonts and skips what it cannot decode), no
+ * XFA forms, no streaming or range requests, and no code evaluation.
+ *
+ * `isEvalSupported` is absent from PDF.js 6.4.299, whose bundles hold no
+ * `eval` or `new Function`; it stays here, set to `false`, so the
+ * hardening reads the same as the Teisoro API's and survives a downgrade.
+ */
+export declare const hardenedPdfOptions: {
+    readonly isEvalSupported: false;
+    readonly useWorkerFetch: false;
+    readonly useWasm: false;
+    readonly useSystemFonts: true;
+    readonly disableFontFace: false;
+    readonly enableXfa: false;
+    readonly disableRange: true;
+    readonly disableStream: true;
+    readonly disableAutoFetch: true;
+    readonly stopAtErrors: false;
+    readonly verbosity: 0;
+};
+/** The largest canvas drawn, in device pixels: within every browser's limit. */
+export declare const maxCanvasPixels = 16000000;
+/**
+ * The device-pixel ratio a page of `width` by `height` CSS pixels is drawn
+ * at: the screen's, lowered so the canvas stays under `maxCanvasPixels`.
+ */
+export declare function canvasRatio(width: number, height: number, deviceRatio: number): number;
+/**
+ * A private copy of the bytes: PDF.js hands its data to the worker, which
+ * detaches the buffer, so the consumer's own bytes (kept for a download)
+ * are never touched.
+ */
+export declare function copyPdfBytes(data: ArrayBuffer | Uint8Array): Uint8Array;

package/dist/components/document-viewer/pdf-options.js

@@ -0,0 +1,46 @@
+/**
+ * The options every document opens with: nothing is fetched beyond the
+ * bytes given, no font, character map, colour profile or WebAssembly file
+ * (PDF.js falls back to system fonts and skips what it cannot decode), no
+ * XFA forms, no streaming or range requests, and no code evaluation.
+ *
+ * `isEvalSupported` is absent from PDF.js 6.4.299, whose bundles hold no
+ * `eval` or `new Function`; it stays here, set to `false`, so the
+ * hardening reads the same as the Teisoro API's and survives a downgrade.
+ */
+export const hardenedPdfOptions = {
+    isEvalSupported: false,
+    useWorkerFetch: false,
+    useWasm: false,
+    useSystemFonts: true,
+    disableFontFace: false,
+    enableXfa: false,
+    disableRange: true,
+    disableStream: true,
+    disableAutoFetch: true,
+    stopAtErrors: false,
+    verbosity: 0,
+};
+/** The largest canvas drawn, in device pixels: within every browser's limit. */
+export const maxCanvasPixels = 16_000_000;
+/**
+ * The device-pixel ratio a page of `width` by `height` CSS pixels is drawn
+ * at: the screen's, lowered so the canvas stays under `maxCanvasPixels`.
+ */
+export function canvasRatio(width, height, deviceRatio) {
+    const ratio = deviceRatio > 0 ? deviceRatio : 1;
+    const area = width * height * ratio * ratio;
+    if (area <= maxCanvasPixels)
+        return ratio;
+    return Math.sqrt(maxCanvasPixels / (width * height));
+}
+/**
+ * A private copy of the bytes: PDF.js hands its data to the worker, which
+ * detaches the buffer, so the consumer's own bytes (kept for a download)
+ * are never touched.
+ */
+export function copyPdfBytes(data) {
+    return data instanceof Uint8Array
+        ? data.slice()
+        : new Uint8Array(data.slice(0));
+}

package/dist/components/document-viewer/render-pdf-page.d.ts

@@ -0,0 +1,20 @@
+import { type PDFPageProxy, type TextLayer } from 'pdfjs-dist';
+/** A page drawn: its CSS size at the width asked for. */
+export type PdfPageSize = {
+    width: number;
+    height: number;
+};
+/**
+ * Draws one page `width` CSS pixels wide into `canvas`, at the screen's
+ * pixel ratio (capped), and its text into `text` (PDF.js's transparent
+ * text layer, at the scale the generated rules read). `signal` cancels
+ * both.
+ */
+export declare function renderPdfPage({ page, width, canvas, text, signal, createTextLayer, }: {
+    page: PDFPageProxy;
+    width: number;
+    canvas: HTMLCanvasElement;
+    text: HTMLElement;
+    signal: AbortSignal;
+    createTextLayer: (options: ConstructorParameters<typeof TextLayer>[0]) => TextLayer;
+}): Promise<PdfPageSize>;

package/dist/components/document-viewer/render-pdf-page.js

@@ -0,0 +1,38 @@
+import { canvasRatio } from './pdf-options.js';
+/**
+ * Draws one page `width` CSS pixels wide into `canvas`, at the screen's
+ * pixel ratio (capped), and its text into `text` (PDF.js's transparent
+ * text layer, at the scale the generated rules read). `signal` cancels
+ * both.
+ */
+export async function renderPdfPage({ page, width, canvas, text, signal, createTextLayer, }) {
+    const base = page.getViewport({ scale: 1 });
+    const viewport = page.getViewport({ scale: width / base.width });
+    const ratio = canvasRatio(viewport.width, viewport.height, window.devicePixelRatio);
+    canvas.width = Math.floor(viewport.width * ratio);
+    canvas.height = Math.floor(viewport.height * ratio);
+    const render = page.render({
+        canvas,
+        viewport,
+        transform: ratio === 1 ? undefined : [ratio, 0, 0, ratio, 0, 0],
+    });
+    text.replaceChildren();
+    text.style.setProperty('--total-scale-factor', String(viewport.scale));
+    const layer = createTextLayer({
+        textContentSource: page.streamTextContent(),
+        container: text,
+        viewport,
+    });
+    const cancel = () => {
+        render.cancel();
+        layer.cancel();
+    };
+    signal.addEventListener('abort', cancel, { once: true });
+    try {
+        await Promise.all([render.promise, layer.render()]);
+    }
+    finally {
+        signal.removeEventListener('abort', cancel);
+    }
+    return { width: viewport.width, height: viewport.height };
+}

package/dist/components/document-viewer/scroll-chain.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Scrolls by `amount` pixels along one axis as a finger would: the
+ * element first, then each box around it that scrolls, up to the
+ * document, each taking what it can until the amount is spent.
+ */
+export declare function scrollChainBy(start: Element, axis: 'x' | 'y', amount: number): void;

package/dist/components/document-viewer/scroll-chain.js

@@ -0,0 +1,23 @@
+const scrolling = /^(auto|scroll|overlay)$/;
+function scrolls(element, axis) {
+    if (element === element.ownerDocument.scrollingElement)
+        return true;
+    const style = getComputedStyle(element);
+    return scrolling.test(axis === 'x' ? style.overflowX : style.overflowY);
+}
+/**
+ * Scrolls by `amount` pixels along one axis as a finger would: the
+ * element first, then each box around it that scrolls, up to the
+ * document, each taking what it can until the amount is spent.
+ */
+export function scrollChainBy(start, axis, amount) {
+    let left = amount;
+    for (let element = start; element && Math.abs(left) >= 0.5; element = element.parentElement) {
+        if (!scrolls(element, axis))
+            continue;
+        const key = axis === 'x' ? 'scrollLeft' : 'scrollTop';
+        const was = element[key];
+        element[key] = was + left;
+        left -= element[key] - was;
+    }
+}

package/dist/components/document-viewer/use-error-report.d.ts

@@ -0,0 +1,5 @@
+/**
+ * A stable function that reports an error to the consumer's latest
+ * `onError`, so a new callback each render never restarts a page's draw.
+ */
+export declare function useErrorReport(onError: ((error: unknown) => void) | undefined): (error: unknown) => void;

package/dist/components/document-viewer/use-error-report.js

@@ -0,0 +1,13 @@
+'use client';
+import { useCallback, useEffect, useRef } from 'react';
+/**
+ * A stable function that reports an error to the consumer's latest
+ * `onError`, so a new callback each render never restarts a page's draw.
+ */
+export function useErrorReport(onError) {
+    const latest = useRef(onError);
+    useEffect(() => {
+        latest.current = onError;
+    });
+    return useCallback((error) => latest.current?.(error), []);
+}

package/dist/components/document-viewer/use-page-render.d.ts

@@ -0,0 +1,21 @@
+import { type RefObject } from 'react';
+import { type PdfDocument } from './pdf-document.js';
+export type PageRenderState = 'drawing' | 'drawn' | 'failed';
+/**
+ * Draws the shown page at `width` CSS pixels into the canvas and text
+ * layer, again whenever the page or the width changes, cancelling a draw
+ * that is no longer wanted. The page is visible while it draws, so it
+ * appears as PDF.js paints it. `aspect` is its height over its width, for
+ * the page's box, known before its first draw ends.
+ */
+export declare function usePageRender({ document, page, width, canvas, text, onError, }: {
+    document: PdfDocument | null;
+    page: number;
+    width: number;
+    canvas: RefObject<HTMLCanvasElement | null>;
+    text: RefObject<HTMLDivElement | null>;
+    onError: (error: unknown) => void;
+}): {
+    state: PageRenderState;
+    aspect: number | null;
+};