@rebodocs/viewer 0.0.0-stage → 0.12.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Rebodocs contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,103 @@
-# Temporary Holding Version
+<p align="center">
+  <img src="https://rebodocs.com/logo.svg" alt="" width="56" height="56">
+</p>
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+<h1 align="center">@rebodocs/viewer</h1>
+
+<p align="center">
+  A DOCX document only to read, in the browser: its pages as Word lays them out, a bar to zoom and print, and its first page as a thumbnail. With or without React.
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@rebodocs/viewer"><img src="https://img.shields.io/npm/v/@rebodocs/viewer?label=npm&color=0b57d0" alt="npm version"></a>
+  <a href="https://github.com/JFranciscoRobles/rebodocs/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-2e6b3c" alt="MIT license"></a>
+</p>
+
+<p align="center">
+  <a href="https://rebodocs.com/docs/viewer/">Guide</a> ·
+  <a href="https://rebodocs.com/docs/packages/">Packages</a>
+</p>
+
+---
+
+For an application that shows documents and does not edit them: a file
+manager, a preview, a page where a client reads a contract. The pages are
+those of the Rebodocs editor, read only and with no caret, so a document looks
+as it does in Word and in the editor. Nothing is sent anywhere: the file is
+read in the page.
+
+## Install
+
+```bash
+npm install @rebodocs/viewer
+```
+
+It brings `@rebodocs/core` and `@rebodocs/editor` with it; a bundler keeps
+only what the viewer uses of them.
+
+## Without a framework
+
+```ts
+import { createViewer, pagePicture, setLocale } from '@rebodocs/viewer';
+
+setLocale('es');
+const viewer = createViewer(element, bytes); // the bytes of a .docx; element has a size
+viewer.setLayout('all'); // every page at once, as large as lets them fit; 'pages' for one under another
+viewer.print();
+viewer.destroy();
+```
+
+One page under another, each whole on the screen, and a bar floating over
+them with the page one is on, the zoom, and its views: the grid sets every
+page out at once, as `setLayout('all')` does. `bar: false` leaves it out,
+and the layout and the zoom are then the application's, through
+`viewer.editor`.
+
+## React
+
+```tsx
+'use client';
+import { DocsViewer } from '@rebodocs/viewer/react';
+
+<DocsViewer docx={bytes} locale="es" style={{ height: 600 }} onReady={(viewer) => (printer.current = viewer)} />;
+```
+
+It is safe to render on a server: there it draws an empty element, and
+mounts in the browser. `layout="all"` starts with every page at once;
+`onReady` gives the viewer, to `print()` or `setLayout()`. React is a peer,
+and an optional one: npm does not install it for the page without React.
+
+## A thumbnail
+
+```ts
+import { pagePicture, pageThumbnail } from '@rebodocs/viewer';
+
+const jpeg = await pagePicture(bytes, 480); // the first page, its longest side 480 pixels
+const png = await pagePicture(bytes, 240, { type: 'image/png' });
+const element = await pageThumbnail(bytes); // the page as the editor draws it, to show made smaller
+```
+
+Drawn out of sight, one at a time, with the pictures of the page in it. A
+font the document carries is drawn in the one of the system nearest it.
+
+## Also in the package
+
+- `setLocale`, `addLocale`, `locales`: the language of the bar.
+- `addFont`, `addFonts`: the fonts a document is written in, when the system
+  has not got them.
+- A document already read with `importDocx` of `@rebodocs/core` may be given
+  instead of its bytes, to every function.
+
+The whole editor, to write as well as read, is
+[`@rebodocs/react`](https://www.npmjs.com/package/@rebodocs/react), which has
+`DocsViewer` too.
+
+## Status
+
+0.11: ready to try in production; the API may change before 1.0. See the
+[changelog](https://github.com/JFranciscoRobles/rebodocs/blob/main/CHANGELOG.md)
+and the [known limits](https://rebodocs.com/docs/status/).
+
+## License
+
+[MIT](https://github.com/JFranciscoRobles/rebodocs/blob/main/LICENSE).

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,129 @@
+# Third-party notices
+
+Rebodocs is released under the MIT License (see [LICENSE](LICENSE)). The
+published packages include, or install, the following third-party software,
+each under its own license.
+
+| Package | Version | License | Where |
+| --- | --- | --- | --- |
+| [WordCraft](https://github.com/storytold/wordcraft) | — | MIT or Apache-2.0, used under MIT | Code ported into `@rebodocs/core` (and so bundled in `@rebodocs/react`); see below. |
+| [fflate](https://github.com/101arrowz/fflate) | 0.8 | MIT | A dependency of `@rebodocs/core`; bundled in `@rebodocs/react`. |
+| [nspell](https://github.com/wooorm/nspell) | 2.1 | MIT | Bundled in the spell-checking worker of `@rebodocs/editor` and `@rebodocs/react`. |
+| [is-buffer](https://github.com/feross/is-buffer) | 2.0 | MIT | A dependency of nspell, bundled with it. |
+| [@anthropic-ai/sdk](https://github.com/anthropics/anthropic-sdk-typescript) | 0.133 | MIT | A dependency of `@rebodocs/mcp` (`@rebodocs/mcp/claude`); installed by npm, not bundled. |
+
+Rebodocs ships no spelling dictionaries. An application that uses
+`createSpellChecker` gives its own, under their own licenses: for example,
+the Hunspell dictionaries of [wooorm/dictionaries](https://github.com/wooorm/dictionaries)
+(the Spanish one is GPL-3.0, LGPL-3.0 or MPL-1.1; the English one MIT and BSD).
+
+## WordCraft
+
+`packages/core/src/numbering.ts` ports to TypeScript the rules for list
+counters of [WordCraft](https://github.com/storytold/wordcraft)
+(`crates/doc/src/numbering.rs`), and `packages/core/src/layout.ts` follows
+its rule for the line height of list labels. WordCraft is distributed under
+MIT or Apache-2.0; it is used here under MIT:
+
+```
+MIT License
+
+Copyright (c) 2026 ArtCraft Team and the WordCraft contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
+
+## fflate
+
+```
+MIT License
+
+Copyright (c) 2026 Arjun Barrett
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
+
+## nspell
+
+```
+(The MIT License)
+
+Copyright (c) 2016 Titus Wormer <tituswormer@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+```
+
+## is-buffer
+
+```
+The MIT License (MIT)
+
+Copyright (c) Feross Aboukhadijeh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+```

package/chunks/viewer-CixYfz6K.js

@@ -0,0 +1,200 @@
+import { importDocx } from "@rebodocs/core/internal";
+import { Editor, createStatusBar } from "@rebodocs/editor";
+//#region src/viewer.ts
+var docOf = (source) => source instanceof Uint8Array ? importDocx(source) : source instanceof ArrayBuffer ? importDocx(new Uint8Array(source)) : source;
+var STYLE_ID = "dx-viewer-style";
+var CSS = `
+.dx-viewer .dx-caret{display:none!important}
+.dx-viewer-bar{position:sticky;bottom:14px;z-index:3;display:flex;align-items:center;justify-content:center;height:52px;margin-top:-52px;pointer-events:none}
+.dx-viewer-bar .dx-sb{background:none;border:0;box-shadow:none}
+`;
+function injectStyle() {
+	if (document.getElementById(STYLE_ID)) return;
+	const style = document.createElement("style");
+	style.id = STYLE_ID;
+	style.textContent = CSS;
+	document.head.appendChild(style);
+}
+/** The least width a page is shown at when all of them are, in pixels: an overview, to be read one page at a time. */
+var LEAST_WIDE = 140;
+/** About the gap the editor leaves between pages, in pixels. */
+var GAP = 24;
+/**
+* The width each page is shown at so that `pages` pages, each `ratio` times as tall as it is wide, all fit in
+* `width` × `height`, as many across as that takes: the largest that does. When none is as wide as a page is
+* still made out at, pages of a set width, and the rest is scrolled to.
+*/
+function pageWidthToFit(pages, ratio, width, height) {
+	let best = 0;
+	for (let across = 1; across <= pages; across++) {
+		const wide = (width - GAP * (across + 1)) / across;
+		const rows = Math.ceil(pages / across);
+		best = Math.max(best, Math.min(wide, (height - GAP * (rows + 1)) / rows / ratio));
+	}
+	return best >= LEAST_WIDE ? best : Math.max(LEAST_WIDE, Math.min(220, (width - 48) / 2));
+}
+/**
+* A document to read in `container`, which must have a size: the editor, read only, and the status bar floating
+* over its pages. The words are those of the language set with `setLocale`.
+*/
+function createViewer(container, source, options = {}) {
+	injectStyle();
+	const editor = new Editor(container, docOf(source));
+	editor.readOnly = true;
+	container.classList.add("dx-viewer");
+	let status;
+	let bar;
+	if (options.bar !== false) {
+		bar = document.createElement("div");
+		bar.className = "dx-viewer-bar";
+		container.appendChild(bar);
+		status = createStatusBar(bar, editor, {
+			layout: "floating",
+			page: "view"
+		});
+		for (const away of bar.querySelectorAll("[data-name=\"spread\"], [data-name=\"flow\"], [data-name=\"notes\"], [data-name=\"language\"]")) away.remove();
+	}
+	let current = options.layout ?? "pages";
+	const setLayout = (mode) => {
+		current = mode;
+		if (mode === "pages") {
+			editor.setView("column");
+			editor.setFit("page");
+		} else {
+			editor.setView("grid");
+			const page = container.querySelector(".dx-page");
+			const width = (page?.offsetWidth ?? 816) / editor.zoom;
+			const ratio = (page?.offsetHeight ?? 1056) / (page?.offsetWidth ?? 816);
+			const fits = pageWidthToFit(editor.pageCount, ratio, container.clientWidth, container.clientHeight);
+			editor.setZoom(Math.min(1, fits / width));
+			let tries = 0;
+			const shrink = () => {
+				if (current !== "all" || tries++ >= 4 || container.scrollHeight <= container.clientHeight + 1) return;
+				const smaller = editor.zoom * (container.clientHeight / container.scrollHeight) * .99;
+				if (smaller * width < LEAST_WIDE) return;
+				const before = editor.zoom;
+				editor.setZoom(smaller);
+				if (editor.zoom !== before) requestAnimationFrame(() => requestAnimationFrame(shrink));
+			};
+			if (fits >= LEAST_WIDE) requestAnimationFrame(() => requestAnimationFrame(shrink));
+		}
+		container.scrollTop = 0;
+	};
+	setLayout(current);
+	let shownView = editor.view;
+	const offChange = editor.onChange(() => {
+		if (editor.view === shownView) return;
+		shownView = editor.view;
+		const mode = editor.view === "grid" ? "all" : editor.view === "column" ? "pages" : void 0;
+		if (mode) setTimeout(() => editor.view === shownView && setLayout(mode));
+	});
+	return {
+		editor,
+		get pages() {
+			return editor.pageCount;
+		},
+		get layout() {
+			return current;
+		},
+		setLayout,
+		print: () => editor.print(),
+		destroy() {
+			offChange();
+			status?.destroy();
+			bar?.remove();
+			editor.destroy();
+			container.classList.remove("dx-viewer");
+		}
+	};
+}
+/** A blob as a data address, for what is drawn inside a picture, which may load nothing from elsewhere. */
+var dataUrl = (blob) => new Promise((done, fail) => {
+	const reader = new FileReader();
+	reader.onload = () => done(String(reader.result));
+	reader.onerror = () => fail(reader.error);
+	reader.readAsDataURL(blob);
+});
+/** Thumbnails made one at a time: each needs an editor laid out for a moment. */
+var making = Promise.resolve();
+/**
+* The first page of a document as the editor draws it, for a thumbnail: drawn once out of sight, and given as a copy
+* of that page at its real size, its pictures in it, inside an element of the editor's class so its rules still hold
+* (`data-width` and `data-height` say the size, in pixels), to be shown made smaller.
+*/
+function pageThumbnail(source) {
+	const made = making.then(async () => {
+		const doc = docOf(source);
+		const box = document.createElement("div");
+		box.setAttribute("aria-hidden", "true");
+		box.style.cssText = "position:fixed;left:-10000px;top:0;width:1000px;height:1400px;overflow:hidden;visibility:hidden;pointer-events:none";
+		document.body.appendChild(box);
+		const editor = new Editor(box, doc);
+		try {
+			editor.readOnly = true;
+			editor.setZoom(1);
+			await new Promise((done) => requestAnimationFrame(() => requestAnimationFrame(done)));
+			const page = box.querySelector(".dx-page");
+			if (!page) throw new Error("The document has no page to show.");
+			const originals = [...page.querySelectorAll("img")];
+			await Promise.all(originals.map((img) => img.decode().catch(() => void 0)));
+			const copy = page.cloneNode(true);
+			await Promise.all([...copy.querySelectorAll("img")].map(async (img, i) => {
+				try {
+					img.src = await dataUrl(await (await fetch(originals[i].src)).blob());
+				} catch {
+					img.remove();
+				}
+			}));
+			for (const away of copy.querySelectorAll("[contenteditable], textarea, input, .dx-caret, .dx-sel")) away.remove();
+			const shell = document.createElement("div");
+			shell.className = "dx-editor dx-readonly";
+			shell.dataset.width = String(page.offsetWidth);
+			shell.dataset.height = String(page.offsetHeight);
+			shell.appendChild(copy);
+			return shell;
+		} finally {
+			editor.destroy();
+			box.remove();
+		}
+	});
+	making = made.catch(() => void 0);
+	return made;
+}
+/**
+* The first page of a document as a picture, its longest side `size` pixels: what the editor draws, put in an SVG
+* with the editor's stylesheet and drawn on a canvas, its pictures in it. A font the document carries is drawn in
+* the one of the system nearest it.
+*/
+async function pagePicture(source, size, options = {}) {
+	const shell = await pageThumbnail(source);
+	const width = Number(shell.dataset.width) || 816;
+	const height = Number(shell.dataset.height) || 1056;
+	for (const canvas of shell.querySelectorAll("canvas")) {
+		const img = document.createElement("img");
+		img.src = canvas.toDataURL();
+		img.style.cssText = canvas.style.cssText;
+		canvas.replaceWith(img);
+	}
+	const css = [...document.querySelectorAll("style")].map((style) => style.textContent ?? "").filter((text) => text.includes(".dx-")).join("\n");
+	const page = shell.querySelector(".dx-page");
+	if (page) page.style.cssText += ";position:absolute;left:0;top:0;margin:0;box-shadow:none;transform:none";
+	const xhtml = new XMLSerializer().serializeToString(shell);
+	const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"><foreignObject x="0" y="0" width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="width:${width}px;height:${height}px;background:#fff;position:relative"><style>${css.replace(/]]>/g, "")}</style>${xhtml}</div></foreignObject></svg>`;
+	const picture = new Image();
+	picture.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+	await picture.decode();
+	const scale = size / Math.max(width, height);
+	const canvas = document.createElement("canvas");
+	canvas.width = Math.max(1, Math.round(width * scale));
+	canvas.height = Math.max(1, Math.round(height * scale));
+	const context = canvas.getContext("2d");
+	context.fillStyle = "#fff";
+	context.fillRect(0, 0, canvas.width, canvas.height);
+	context.imageSmoothingQuality = "high";
+	context.drawImage(picture, 0, 0, canvas.width, canvas.height);
+	return new Promise((done, fail) => canvas.toBlob((blob) => blob ? done(blob) : fail(/* @__PURE__ */ new Error("The page could not be drawn.")), options.type ?? "image/jpeg", options.quality ?? .85));
+}
+//#endregion
+export { pageWidthToFit as i, pagePicture as n, pageThumbnail as r, createViewer as t };
+
+//# sourceMappingURL=viewer-CixYfz6K.js.map

package/chunks/viewer-CixYfz6K.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewer-CixYfz6K.js","names":[],"sources":["../../src/viewer.ts"],"sourcesContent":["// A document only to read: the editor, read only, its pages one under\n// another, each whole on the screen, with the status bar floating over them\n// (the page one is on, the counts, the fit, the zoom, and the views, whose\n// grid sets all the pages out as large as lets them fit). For a file manager,\n// a preview, a page that shows a contract: anywhere a document is seen and not\n// written. And the first page of a document, for its thumbnail: as the\n// element the editor draws, or as a picture.\n\nimport { type Doc, importDocx } from '@rebodocs/core/internal';\nimport { Editor, type StatusBar, createStatusBar } from '@rebodocs/editor';\n\n/** A document: the bytes of a .docx, or one already read with `importDocx` of `@rebodocs/core`. */\nexport type ViewerSource = Uint8Array | ArrayBuffer | Doc;\n\nconst docOf = (source: ViewerSource): Doc => (source instanceof Uint8Array ? importDocx(source) : source instanceof ArrayBuffer ? importDocx(new Uint8Array(source)) : source);\n\n/** How the pages are set out: one under another, each whole on the screen, or all of them at once. */\nexport type ViewerLayout = 'pages' | 'all';\n\nexport interface ViewerOptions {\n  /** How the pages are set out at first: one under another ('pages', as it comes), or all at once ('all'). */\n  layout?: ViewerLayout;\n  /** False to leave out the bar floating over the pages; the layout and the zoom are then the application's. */\n  bar?: boolean;\n}\n\nexport interface Viewer {\n  /** The editor that draws the pages, read only. */\n  readonly editor: Editor;\n  /** How many pages the document has. */\n  readonly pages: number;\n  readonly layout: ViewerLayout;\n  setLayout(mode: ViewerLayout): void;\n  /** The browser's print dialog, with the pages as they are laid out: to paper, or to a PDF. */\n  print(): void;\n  destroy(): void;\n}\n\nconst STYLE_ID = 'dx-viewer-style';\nconst CSS = `\n.dx-viewer .dx-caret{display:none!important}\n.dx-viewer-bar{position:sticky;bottom:14px;z-index:3;display:flex;align-items:center;justify-content:center;height:52px;margin-top:-52px;pointer-events:none}\n.dx-viewer-bar .dx-sb{background:none;border:0;box-shadow:none}\n`;\n\nfunction injectStyle(): void {\n  if (document.getElementById(STYLE_ID)) return;\n  const style = document.createElement('style');\n  style.id = STYLE_ID;\n  style.textContent = CSS;\n  document.head.appendChild(style);\n}\n\n/** The least width a page is shown at when all of them are, in pixels: an overview, to be read one page at a time. */\nconst LEAST_WIDE = 140;\n/** About the gap the editor leaves between pages, in pixels. */\nconst GAP = 24;\n\n/**\n * The width each page is shown at so that `pages` pages, each `ratio` times as tall as it is wide, all fit in\n * `width` × `height`, as many across as that takes: the largest that does. When none is as wide as a page is\n * still made out at, pages of a set width, and the rest is scrolled to.\n */\nexport function pageWidthToFit(pages: number, ratio: number, width: number, height: number): number {\n  let best = 0;\n  for (let across = 1; across <= pages; across++) {\n    const wide = (width - GAP * (across + 1)) / across;\n    const rows = Math.ceil(pages / across);\n    best = Math.max(best, Math.min(wide, (height - GAP * (rows + 1)) / rows / ratio));\n  }\n  return best >= LEAST_WIDE ? best : Math.max(LEAST_WIDE, Math.min(220, (width - GAP * 2) / 2));\n}\n\n/**\n * A document to read in `container`, which must have a size: the editor, read only, and the status bar floating\n * over its pages. The words are those of the language set with `setLocale`.\n */\nexport function createViewer(container: HTMLElement, source: ViewerSource, options: ViewerOptions = {}): Viewer {\n  injectStyle();\n  const editor = new Editor(container, docOf(source));\n  editor.readOnly = true;\n  container.classList.add('dx-viewer');\n  let status: StatusBar | undefined;\n  let bar: HTMLElement | undefined;\n  if (options.bar !== false) {\n    bar = document.createElement('div');\n    bar.className = 'dx-viewer-bar';\n    container.appendChild(bar);\n    status = createStatusBar(bar, editor, { layout: 'floating', page: 'view' });\n    // Pages one under another or all at once; a document only read has no notes to open, nor language to set.\n    for (const away of bar.querySelectorAll('[data-name=\"spread\"], [data-name=\"flow\"], [data-name=\"notes\"], [data-name=\"language\"]')) away.remove();\n  }\n\n  let current: ViewerLayout = options.layout ?? 'pages';\n  const setLayout = (mode: ViewerLayout) => {\n    current = mode;\n    if (mode === 'pages') {\n      editor.setView('column');\n      editor.setFit('page');\n    } else {\n      editor.setView('grid');\n      // The size of a page at zoom 1, from the one it is shown at now.\n      const page = container.querySelector<HTMLElement>('.dx-page');\n      const width = (page?.offsetWidth ?? 816) / editor.zoom;\n      const ratio = (page?.offsetHeight ?? 1056) / (page?.offsetWidth ?? 816);\n      const fits = pageWidthToFit(editor.pageCount, ratio, container.clientWidth, container.clientHeight);\n      editor.setZoom(Math.min(1, fits / width));\n      // The editor's own gaps and margins are not quite those reckoned: measured once it has drawn, and made smaller\n      // until all of it fits, while a page is still made out and the editor goes that small.\n      let tries = 0;\n      const shrink = () => {\n        if (current !== 'all' || tries++ >= 4 || container.scrollHeight <= container.clientHeight + 1) return;\n        const smaller = editor.zoom * (container.clientHeight / container.scrollHeight) * 0.99;\n        if (smaller * width < LEAST_WIDE) return;\n        const before = editor.zoom;\n        editor.setZoom(smaller);\n        if (editor.zoom !== before) requestAnimationFrame(() => requestAnimationFrame(shrink));\n      };\n      if (fits >= LEAST_WIDE) requestAnimationFrame(() => requestAnimationFrame(shrink));\n    }\n    // From the first page, whichever way.\n    container.scrollTop = 0;\n  };\n  setLayout(current);\n\n  // The bar's views set the pages out as the editor does; here, so that all of them fit, or each one does.\n  let shownView = editor.view;\n  const offChange = editor.onChange(() => {\n    if (editor.view === shownView) return;\n    shownView = editor.view;\n    const mode: ViewerLayout | undefined = editor.view === 'grid' ? 'all' : editor.view === 'column' ? 'pages' : undefined;\n    // After the bar has done its own, which sets a zoom of its choosing once the view is set.\n    if (mode) setTimeout(() => editor.view === shownView && setLayout(mode));\n  });\n\n  return {\n    editor,\n    get pages() {\n      return editor.pageCount;\n    },\n    get layout() {\n      return current;\n    },\n    setLayout,\n    print: () => editor.print(),\n    destroy() {\n      offChange();\n      status?.destroy();\n      bar?.remove();\n      editor.destroy();\n      container.classList.remove('dx-viewer');\n    },\n  };\n}\n\n/** A blob as a data address, for what is drawn inside a picture, which may load nothing from elsewhere. */\nconst dataUrl = (blob: Blob) =>\n  new Promise<string>((done, fail) => {\n    const reader = new FileReader();\n    reader.onload = () => done(String(reader.result));\n    reader.onerror = () => fail(reader.error);\n    reader.readAsDataURL(blob);\n  });\n\n/** Thumbnails made one at a time: each needs an editor laid out for a moment. */\nlet making: Promise<unknown> = Promise.resolve();\n\n/**\n * The first page of a document as the editor draws it, for a thumbnail: drawn once out of sight, and given as a copy\n * of that page at its real size, its pictures in it, inside an element of the editor's class so its rules still hold\n * (`data-width` and `data-height` say the size, in pixels), to be shown made smaller.\n */\nexport function pageThumbnail(source: ViewerSource): Promise<HTMLElement> {\n  const made = making.then(async () => {\n    const doc = docOf(source);\n    const box = document.createElement('div');\n    box.setAttribute('aria-hidden', 'true');\n    box.style.cssText = 'position:fixed;left:-10000px;top:0;width:1000px;height:1400px;overflow:hidden;visibility:hidden;pointer-events:none';\n    document.body.appendChild(box);\n    const editor = new Editor(box, doc);\n    try {\n      editor.readOnly = true;\n      editor.setZoom(1);\n      // Its text is put in the page as it comes into view: a frame or two after.\n      await new Promise((done) => requestAnimationFrame(() => requestAnimationFrame(done)));\n      const page = box.querySelector<HTMLElement>('.dx-page');\n      if (!page) throw new Error('The document has no page to show.');\n      // Its pictures as data while the editor holds them: closed, it lets their addresses go.\n      const originals = [...page.querySelectorAll('img')];\n      await Promise.all(originals.map((img) => img.decode().catch(() => undefined)));\n      const copy = page.cloneNode(true) as HTMLElement;\n      await Promise.all(\n        [...copy.querySelectorAll('img')].map(async (img, i) => {\n          try {\n            img.src = await dataUrl(await (await fetch(originals[i].src)).blob());\n          } catch {\n            img.remove();\n          }\n        }),\n      );\n      for (const away of copy.querySelectorAll('[contenteditable], textarea, input, .dx-caret, .dx-sel')) away.remove();\n      const shell = document.createElement('div');\n      shell.className = 'dx-editor dx-readonly';\n      shell.dataset.width = String(page.offsetWidth);\n      shell.dataset.height = String(page.offsetHeight);\n      shell.appendChild(copy);\n      return shell;\n    } finally {\n      editor.destroy();\n      box.remove();\n    }\n  });\n  making = made.catch(() => undefined);\n  return made;\n}\n\nexport interface PagePictureOptions {\n  /** 'image/jpeg', as it comes, or 'image/png'. */\n  type?: string;\n  /** Of a JPEG, from 0 to 1. */\n  quality?: number;\n}\n\n/**\n * The first page of a document as a picture, its longest side `size` pixels: what the editor draws, put in an SVG\n * with the editor's stylesheet and drawn on a canvas, its pictures in it. A font the document carries is drawn in\n * the one of the system nearest it.\n */\nexport async function pagePicture(source: ViewerSource, size: number, options: PagePictureOptions = {}): Promise<Blob> {\n  const shell = await pageThumbnail(source);\n  const width = Number(shell.dataset.width) || 816;\n  const height = Number(shell.dataset.height) || 1056;\n  // What is drawn on a canvas inside the page, as a picture: an SVG drawn as a picture reaches nothing outside it.\n  for (const canvas of shell.querySelectorAll('canvas')) {\n    const img = document.createElement('img');\n    img.src = canvas.toDataURL();\n    img.style.cssText = canvas.style.cssText;\n    canvas.replaceWith(img);\n  }\n  const css = [...document.querySelectorAll('style')]\n    .map((style) => style.textContent ?? '')\n    .filter((text) => text.includes('.dx-'))\n    .join('\\n');\n  const page = shell.querySelector<HTMLElement>('.dx-page');\n  if (page) page.style.cssText += ';position:absolute;left:0;top:0;margin:0;box-shadow:none;transform:none';\n  const xhtml = new XMLSerializer().serializeToString(shell);\n  const svg = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${width}\" height=\"${height}\"><foreignObject x=\"0\" y=\"0\" width=\"100%\" height=\"100%\"><div xmlns=\"http://www.w3.org/1999/xhtml\" style=\"width:${width}px;height:${height}px;background:#fff;position:relative\"><style>${css.replace(/]]>/g, '')}</style>${xhtml}</div></foreignObject></svg>`;\n  const picture = new Image();\n  picture.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;\n  await picture.decode();\n  const scale = size / Math.max(width, height);\n  const canvas = document.createElement('canvas');\n  canvas.width = Math.max(1, Math.round(width * scale));\n  canvas.height = Math.max(1, Math.round(height * scale));\n  const context = canvas.getContext('2d')!;\n  context.fillStyle = '#fff';\n  context.fillRect(0, 0, canvas.width, canvas.height);\n  context.imageSmoothingQuality = 'high';\n  context.drawImage(picture, 0, 0, canvas.width, canvas.height);\n  return new Promise((done, fail) => canvas.toBlob((blob) => (blob ? done(blob) : fail(new Error('The page could not be drawn.'))), options.type ?? 'image/jpeg', options.quality ?? 0.85));\n}\n"],"mappings":"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"}

package/index.js

@@ -0,0 +1,3 @@
+import { i as pageWidthToFit, n as pagePicture, r as pageThumbnail, t as createViewer } from "./chunks/viewer-CixYfz6K.js";
+import { addFont, addFonts, addLocale, getLocale, locales, onLocaleChange, setLocale } from "@rebodocs/editor";
+export { addFont, addFonts, addLocale, createViewer, getLocale, locales, onLocaleChange, pagePicture, pageThumbnail, pageWidthToFit, setLocale };

package/package.json

@@ -1,6 +1,59 @@
 {
   "name": "@rebodocs/viewer",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.12.0",
+  "description": "A DOCX document only to read, in the browser: its pages as Word lays them out, a bar to zoom and print, and its first page as a thumbnail. With or without React.",
+  "license": "MIT",
+  "homepage": "https://rebodocs.com/docs/viewer/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JFranciscoRobles/rebodocs.git",
+    "directory": "packages/viewer"
+  },
+  "bugs": "https://github.com/JFranciscoRobles/rebodocs/issues",
+  "keywords": [
+    "docx",
+    "word",
+    "viewer",
+    "preview",
+    "thumbnail",
+    "react"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./index.js",
+  "types": "./types/viewer/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/viewer/src/index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./react": {
+      "types": "./types/viewer/src/react.d.ts",
+      "import": "./react.js",
+      "default": "./react.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "react": [
+        "types/viewer/src/react.d.ts"
+      ]
+    }
+  },
+  "dependencies": {
+    "@rebodocs/core": "0.12.0",
+    "@rebodocs/editor": "0.12.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/react.js

@@ -0,0 +1,45 @@
+"use client";
+import { t as createViewer } from "./chunks/viewer-CixYfz6K.js";
+import { setLocale } from "@rebodocs/editor";
+import { createElement, useEffect, useRef } from "react";
+//#region src/react.ts
+function DocsViewer({ docx, layout, bar, locale, className, style, onReady }) {
+	const element = useRef(null);
+	const viewer = useRef(void 0);
+	const ready = useRef(onReady);
+	ready.current = onReady;
+	useEffect(() => {
+		if (!element.current) return;
+		if (locale) setLocale(locale);
+		const mounted = createViewer(element.current, docx, {
+			layout,
+			bar
+		});
+		viewer.current = mounted;
+		ready.current?.(mounted);
+		return () => {
+			ready.current?.(void 0);
+			viewer.current = void 0;
+			mounted.destroy();
+		};
+	}, [docx, bar]);
+	useEffect(() => {
+		if (layout && viewer.current && viewer.current.layout !== layout) viewer.current.setLayout(layout);
+	}, [layout]);
+	useEffect(() => {
+		if (locale) setLocale(locale);
+	}, [locale]);
+	return createElement("div", {
+		ref: element,
+		className,
+		style: {
+			height: "100%",
+			overflow: "auto",
+			...style
+		}
+	});
+}
+//#endregion
+export { DocsViewer };
+
+//# sourceMappingURL=react.js.map

package/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","names":[],"sources":["../src/react.ts"],"sourcesContent":["// A document to read, as a component of React: an element, and the viewer\n// mounted in it once the page is in the browser, again for\n// another file, and taken away with the component. On the server it draws\n// the empty element and nothing else.\n\nimport { type CSSProperties, createElement, useEffect, useRef } from 'react';\nimport { setLocale } from '@rebodocs/editor';\nimport { type Viewer, type ViewerLayout, type ViewerSource, createViewer } from './viewer';\n\nexport interface DocsViewerProps {\n  /** The file: the bytes of a .docx, or a Doc already read. */\n  docx: ViewerSource;\n  /** How the pages are set out: one under another, each whole on the screen ('pages', as it comes), or all at once ('all'). */\n  layout?: ViewerLayout;\n  /** False to leave out the bar floating over the pages. */\n  bar?: boolean;\n  /** The language of its words: 'en', 'es'… As the rest of Rebodocs in the page, unless given. */\n  locale?: string;\n  className?: string;\n  /** The element takes the height of what it is in: something must give it one. */\n  style?: CSSProperties;\n  /** Called with the viewer once it is there, to print or to set the pages out, and with nothing when it is gone. */\n  onReady?: (viewer: Viewer | undefined) => void;\n}\n\nexport function DocsViewer({ docx, layout, bar, locale, className, style, onReady }: DocsViewerProps) {\n  const element = useRef<HTMLDivElement>(null);\n  const viewer = useRef<Viewer | undefined>(undefined);\n  const ready = useRef(onReady);\n  ready.current = onReady;\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: mounted again for another file or another bar; the layout follows below\n  useEffect(() => {\n    if (!element.current) return;\n    if (locale) setLocale(locale);\n    const mounted = createViewer(element.current, docx, { layout, bar });\n    viewer.current = mounted;\n    ready.current?.(mounted);\n    return () => {\n      ready.current?.(undefined);\n      viewer.current = undefined;\n      mounted.destroy();\n    };\n  }, [docx, bar]);\n\n  useEffect(() => {\n    if (layout && viewer.current && viewer.current.layout !== layout) viewer.current.setLayout(layout);\n  }, [layout]);\n  useEffect(() => {\n    if (locale) setLocale(locale);\n  }, [locale]);\n\n  return createElement('div', { ref: element, className, style: { height: '100%', overflow: 'auto', ...style } });\n}\n"],"mappings":";;;;;AAyBA,SAAgB,WAAW,EAAE,MAAM,QAAQ,KAAK,QAAQ,WAAW,OAAO,WAA4B;CACpG,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,SAAS,OAA2B,KAAA,CAAS;CACnD,MAAM,QAAQ,OAAO,OAAO;CAC5B,MAAM,UAAU;CAGhB,gBAAgB;EACd,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,QAAQ,UAAU,MAAM;EAC5B,MAAM,UAAU,aAAa,QAAQ,SAAS,MAAM;GAAE;GAAQ;EAAI,CAAC;EACnE,OAAO,UAAU;EACjB,MAAM,UAAU,OAAO;EACvB,aAAa;GACX,MAAM,UAAU,KAAA,CAAS;GACzB,OAAO,UAAU,KAAA;GACjB,QAAQ,QAAQ;EAClB;CACF,GAAG,CAAC,MAAM,GAAG,CAAC;CAEd,gBAAgB;EACd,IAAI,UAAU,OAAO,WAAW,OAAO,QAAQ,WAAW,QAAQ,OAAO,QAAQ,UAAU,MAAM;CACnG,GAAG,CAAC,MAAM,CAAC;CACX,gBAAgB;EACd,IAAI,QAAQ,UAAU,MAAM;CAC9B,GAAG,CAAC,MAAM,CAAC;CAEX,OAAO,cAAc,OAAO;EAAE,KAAK;EAAS;EAAW,OAAO;GAAE,QAAQ;GAAQ,UAAU;GAAQ,GAAG;EAAM;CAAE,CAAC;AAChH"}

package/types/viewer/src/index.d.ts

@@ -0,0 +1,3 @@
+export { type PagePictureOptions, type Viewer, type ViewerLayout, type ViewerOptions, type ViewerSource, createViewer, pagePicture, pageThumbnail, pageWidthToFit } from './viewer.js';
+export { type FontSource, type MessageKey, type Messages, type Texts, addFont, addFonts, addLocale, getLocale, locales, onLocaleChange, setLocale } from '@rebodocs/editor';
+export type { Doc } from '@rebodocs/core/internal';