web-doc 0.3.0

package/dist/styles.css

@@ -0,0 +1,137 @@
+.zrimo-ui {
+  --zrimo-background: #e9edf2;
+  --zrimo-surface: #ffffff;
+  --zrimo-text: #101828;
+  --zrimo-muted: #667085;
+  --zrimo-border: #d0d5dd;
+  --zrimo-primary: #175cd3;
+  --zrimo-primary-contrast: #ffffff;
+  --zrimo-highlight: rgb(255 215 0 / 45%);
+  --zrimo-radius: 6px;
+  --zrimo-toolbar-height: 44px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 240px;
+  overflow: hidden;
+  color: var(--zrimo-text);
+  background: var(--zrimo-background);
+  font: 13px/1.4 "Zrimo Noto", system-ui, sans-serif;
+}
+.zrimo-ui, .zrimo-ui * { box-sizing: border-box; }
+.zrimo-ui button, .zrimo-ui input {
+  margin: 0;
+  color: inherit;
+  font: inherit;
+}
+.zrimo-ui__toolbar {
+  z-index: 3;
+  display: flex;
+  flex: 0 0 var(--zrimo-toolbar-height);
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  padding: 5px 8px;
+  border-bottom: 1px solid var(--zrimo-border);
+  background: var(--zrimo-surface);
+}
+.zrimo-ui__group { display: inline-flex; align-items: center; gap: 4px; }
+.zrimo-ui__spacer { flex: 1 1 auto; }
+.zrimo-ui__button {
+  min-width: 32px;
+  height: 32px;
+  padding: 0 9px;
+  border: 1px solid var(--zrimo-border);
+  border-radius: var(--zrimo-radius);
+  background: var(--zrimo-surface);
+  cursor: pointer;
+}
+.zrimo-ui__button:hover { border-color: var(--zrimo-primary); }
+.zrimo-ui__button[aria-pressed="true"] {
+  color: var(--zrimo-primary-contrast);
+  border-color: var(--zrimo-primary);
+  background: var(--zrimo-primary);
+}
+.zrimo-ui__button:disabled { opacity: .45; cursor: default; }
+.zrimo-ui__page-input {
+  width: 54px;
+  height: 30px;
+  padding: 2px 5px;
+  border: 1px solid var(--zrimo-border);
+  border-radius: var(--zrimo-radius);
+  text-align: center;
+}
+.zrimo-ui__body { position: relative; display: flex; flex: 1 1 auto; min-height: 0; }
+.zrimo-ui__viewport { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; }
+.zrimo-ui__panel {
+  z-index: 2;
+  flex: 0 0 220px;
+  width: 220px;
+  overflow: auto;
+  border-right: 1px solid var(--zrimo-border);
+  background: var(--zrimo-surface);
+}
+.zrimo-ui__panel[hidden], .zrimo-ui__search[hidden],
+.zrimo-ui__sheets[hidden], .zrimo-ui [hidden] { display: none !important; }
+.zrimo-ui__thumbnail {
+  display: block;
+  width: calc(100% - 20px);
+  margin: 10px;
+  padding: 6px;
+  border: 1px solid var(--zrimo-border);
+  border-radius: var(--zrimo-radius);
+  background: var(--zrimo-surface);
+  cursor: pointer;
+}
+.zrimo-ui__thumbnail[aria-current="page"] { border-color: var(--zrimo-primary); }
+.zrimo-ui__thumbnail canvas { display: block; max-width: 100%; height: auto; margin: auto; }
+.zrimo-ui__search {
+  z-index: 4;
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  padding: 7px 8px;
+  border-bottom: 1px solid var(--zrimo-border);
+  background: var(--zrimo-surface);
+}
+.zrimo-ui__search input {
+  flex: 1 1 auto;
+  min-width: 80px;
+  height: 32px;
+  padding: 5px 8px;
+  border: 1px solid var(--zrimo-border);
+  border-radius: var(--zrimo-radius);
+}
+.zrimo-ui__search-status { min-width: 90px; color: var(--zrimo-muted); }
+.zrimo-ui__sheets {
+  z-index: 3;
+  display: flex;
+  flex: 0 0 38px;
+  align-items: center;
+  gap: 4px;
+  overflow-x: auto;
+  padding: 4px 8px;
+  border-top: 1px solid var(--zrimo-border);
+  background: var(--zrimo-surface);
+}
+.zrimo-ui__status {
+  position: absolute;
+  z-index: 5;
+  right: 10px;
+  bottom: 10px;
+  max-width: min(420px, calc(100% - 20px));
+  padding: 6px 9px;
+  border-radius: var(--zrimo-radius);
+  color: var(--zrimo-primary-contrast);
+  background: rgb(16 24 40 / 88%);
+  pointer-events: none;
+}
+.zrimo-ui--fullscreen-fallback { position: fixed; z-index: 2147483647; inset: 0; }
+@media (max-width: 640px) {
+  .zrimo-ui__toolbar { overflow-x: auto; }
+  .zrimo-ui__button { padding-inline: 7px; }
+  .zrimo-ui__panel { position: absolute; inset: 0 auto 0 0; }
+  .zrimo-ui__label { display: none; }
+}

package/dist/ui-styles.d.ts

@@ -0,0 +1 @@
+export declare const viewerCss = "\n.zrimo-ui {\n  --zrimo-background: #e9edf2;\n  --zrimo-surface: #ffffff;\n  --zrimo-text: #101828;\n  --zrimo-muted: #667085;\n  --zrimo-border: #d0d5dd;\n  --zrimo-primary: #175cd3;\n  --zrimo-primary-contrast: #ffffff;\n  --zrimo-highlight: rgb(255 215 0 / 45%);\n  --zrimo-radius: 6px;\n  --zrimo-toolbar-height: 44px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 240px;\n  overflow: hidden;\n  color: var(--zrimo-text);\n  background: var(--zrimo-background);\n  font: 13px/1.4 \"Zrimo Noto\", system-ui, sans-serif;\n}\n.zrimo-ui, .zrimo-ui * { box-sizing: border-box; }\n.zrimo-ui button, .zrimo-ui input {\n  margin: 0;\n  color: inherit;\n  font: inherit;\n}\n.zrimo-ui__toolbar {\n  z-index: 3;\n  display: flex;\n  flex: 0 0 var(--zrimo-toolbar-height);\n  align-items: center;\n  gap: 4px;\n  min-width: 0;\n  padding: 5px 8px;\n  border-bottom: 1px solid var(--zrimo-border);\n  background: var(--zrimo-surface);\n}\n.zrimo-ui__group { display: inline-flex; align-items: center; gap: 4px; }\n.zrimo-ui__spacer { flex: 1 1 auto; }\n.zrimo-ui__button {\n  min-width: 32px;\n  height: 32px;\n  padding: 0 9px;\n  border: 1px solid var(--zrimo-border);\n  border-radius: var(--zrimo-radius);\n  background: var(--zrimo-surface);\n  cursor: pointer;\n}\n.zrimo-ui__button:hover { border-color: var(--zrimo-primary); }\n.zrimo-ui__button[aria-pressed=\"true\"] {\n  color: var(--zrimo-primary-contrast);\n  border-color: var(--zrimo-primary);\n  background: var(--zrimo-primary);\n}\n.zrimo-ui__button:disabled { opacity: .45; cursor: default; }\n.zrimo-ui__page-input {\n  width: 54px;\n  height: 30px;\n  padding: 2px 5px;\n  border: 1px solid var(--zrimo-border);\n  border-radius: var(--zrimo-radius);\n  text-align: center;\n}\n.zrimo-ui__body { position: relative; display: flex; flex: 1 1 auto; min-height: 0; }\n.zrimo-ui__viewport { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; }\n.zrimo-ui__panel {\n  z-index: 2;\n  flex: 0 0 220px;\n  width: 220px;\n  overflow: auto;\n  border-right: 1px solid var(--zrimo-border);\n  background: var(--zrimo-surface);\n}\n.zrimo-ui__panel[hidden], .zrimo-ui__search[hidden],\n.zrimo-ui__sheets[hidden], .zrimo-ui [hidden] { display: none !important; }\n.zrimo-ui__thumbnail {\n  display: block;\n  width: calc(100% - 20px);\n  margin: 10px;\n  padding: 6px;\n  border: 1px solid var(--zrimo-border);\n  border-radius: var(--zrimo-radius);\n  background: var(--zrimo-surface);\n  cursor: pointer;\n}\n.zrimo-ui__thumbnail[aria-current=\"page\"] { border-color: var(--zrimo-primary); }\n.zrimo-ui__thumbnail canvas { display: block; max-width: 100%; height: auto; margin: auto; }\n.zrimo-ui__search {\n  z-index: 4;\n  display: flex;\n  gap: 5px;\n  align-items: center;\n  padding: 7px 8px;\n  border-bottom: 1px solid var(--zrimo-border);\n  background: var(--zrimo-surface);\n}\n.zrimo-ui__search input {\n  flex: 1 1 auto;\n  min-width: 80px;\n  height: 32px;\n  padding: 5px 8px;\n  border: 1px solid var(--zrimo-border);\n  border-radius: var(--zrimo-radius);\n}\n.zrimo-ui__search-status { min-width: 90px; color: var(--zrimo-muted); }\n.zrimo-ui__sheets {\n  z-index: 3;\n  display: flex;\n  flex: 0 0 38px;\n  align-items: center;\n  gap: 4px;\n  overflow-x: auto;\n  padding: 4px 8px;\n  border-top: 1px solid var(--zrimo-border);\n  background: var(--zrimo-surface);\n}\n.zrimo-ui__status {\n  position: absolute;\n  z-index: 5;\n  right: 10px;\n  bottom: 10px;\n  max-width: min(420px, calc(100% - 20px));\n  padding: 6px 9px;\n  border-radius: var(--zrimo-radius);\n  color: var(--zrimo-primary-contrast);\n  background: rgb(16 24 40 / 88%);\n  pointer-events: none;\n}\n.zrimo-ui--fullscreen-fallback { position: fixed; z-index: 2147483647; inset: 0; }\n@media (max-width: 640px) {\n  .zrimo-ui__toolbar { overflow-x: auto; }\n  .zrimo-ui__button { padding-inline: 7px; }\n  .zrimo-ui__panel { position: absolute; inset: 0 auto 0 0; }\n  .zrimo-ui__label { display: none; }\n}\n";

package/dist/ui-styles.js

@@ -0,0 +1,139 @@
+export const viewerCss = `
+.zrimo-ui {
+  --zrimo-background: #e9edf2;
+  --zrimo-surface: #ffffff;
+  --zrimo-text: #101828;
+  --zrimo-muted: #667085;
+  --zrimo-border: #d0d5dd;
+  --zrimo-primary: #175cd3;
+  --zrimo-primary-contrast: #ffffff;
+  --zrimo-highlight: rgb(255 215 0 / 45%);
+  --zrimo-radius: 6px;
+  --zrimo-toolbar-height: 44px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 240px;
+  overflow: hidden;
+  color: var(--zrimo-text);
+  background: var(--zrimo-background);
+  font: 13px/1.4 "Zrimo Noto", system-ui, sans-serif;
+}
+.zrimo-ui, .zrimo-ui * { box-sizing: border-box; }
+.zrimo-ui button, .zrimo-ui input {
+  margin: 0;
+  color: inherit;
+  font: inherit;
+}
+.zrimo-ui__toolbar {
+  z-index: 3;
+  display: flex;
+  flex: 0 0 var(--zrimo-toolbar-height);
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  padding: 5px 8px;
+  border-bottom: 1px solid var(--zrimo-border);
+  background: var(--zrimo-surface);
+}
+.zrimo-ui__group { display: inline-flex; align-items: center; gap: 4px; }
+.zrimo-ui__spacer { flex: 1 1 auto; }
+.zrimo-ui__button {
+  min-width: 32px;
+  height: 32px;
+  padding: 0 9px;
+  border: 1px solid var(--zrimo-border);
+  border-radius: var(--zrimo-radius);
+  background: var(--zrimo-surface);
+  cursor: pointer;
+}
+.zrimo-ui__button:hover { border-color: var(--zrimo-primary); }
+.zrimo-ui__button[aria-pressed="true"] {
+  color: var(--zrimo-primary-contrast);
+  border-color: var(--zrimo-primary);
+  background: var(--zrimo-primary);
+}
+.zrimo-ui__button:disabled { opacity: .45; cursor: default; }
+.zrimo-ui__page-input {
+  width: 54px;
+  height: 30px;
+  padding: 2px 5px;
+  border: 1px solid var(--zrimo-border);
+  border-radius: var(--zrimo-radius);
+  text-align: center;
+}
+.zrimo-ui__body { position: relative; display: flex; flex: 1 1 auto; min-height: 0; }
+.zrimo-ui__viewport { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; }
+.zrimo-ui__panel {
+  z-index: 2;
+  flex: 0 0 220px;
+  width: 220px;
+  overflow: auto;
+  border-right: 1px solid var(--zrimo-border);
+  background: var(--zrimo-surface);
+}
+.zrimo-ui__panel[hidden], .zrimo-ui__search[hidden],
+.zrimo-ui__sheets[hidden], .zrimo-ui [hidden] { display: none !important; }
+.zrimo-ui__thumbnail {
+  display: block;
+  width: calc(100% - 20px);
+  margin: 10px;
+  padding: 6px;
+  border: 1px solid var(--zrimo-border);
+  border-radius: var(--zrimo-radius);
+  background: var(--zrimo-surface);
+  cursor: pointer;
+}
+.zrimo-ui__thumbnail[aria-current="page"] { border-color: var(--zrimo-primary); }
+.zrimo-ui__thumbnail canvas { display: block; max-width: 100%; height: auto; margin: auto; }
+.zrimo-ui__search {
+  z-index: 4;
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  padding: 7px 8px;
+  border-bottom: 1px solid var(--zrimo-border);
+  background: var(--zrimo-surface);
+}
+.zrimo-ui__search input {
+  flex: 1 1 auto;
+  min-width: 80px;
+  height: 32px;
+  padding: 5px 8px;
+  border: 1px solid var(--zrimo-border);
+  border-radius: var(--zrimo-radius);
+}
+.zrimo-ui__search-status { min-width: 90px; color: var(--zrimo-muted); }
+.zrimo-ui__sheets {
+  z-index: 3;
+  display: flex;
+  flex: 0 0 38px;
+  align-items: center;
+  gap: 4px;
+  overflow-x: auto;
+  padding: 4px 8px;
+  border-top: 1px solid var(--zrimo-border);
+  background: var(--zrimo-surface);
+}
+.zrimo-ui__status {
+  position: absolute;
+  z-index: 5;
+  right: 10px;
+  bottom: 10px;
+  max-width: min(420px, calc(100% - 20px));
+  padding: 6px 9px;
+  border-radius: var(--zrimo-radius);
+  color: var(--zrimo-primary-contrast);
+  background: rgb(16 24 40 / 88%);
+  pointer-events: none;
+}
+.zrimo-ui--fullscreen-fallback { position: fixed; z-index: 2147483647; inset: 0; }
+@media (max-width: 640px) {
+  .zrimo-ui__toolbar { overflow-x: auto; }
+  .zrimo-ui__button { padding-inline: 7px; }
+  .zrimo-ui__panel { position: absolute; inset: 0 auto 0 0; }
+  .zrimo-ui__label { display: none; }
+}
+`;

package/dist/ui.d.ts

@@ -0,0 +1,8 @@
+import type { ViewerApi, ViewerTranslations } from "./contracts.js";
+export declare class BasicViewerUi {
+    #private;
+    readonly root: HTMLDivElement;
+    readonly viewportContainer: HTMLDivElement;
+    constructor(container: HTMLElement, viewer: ViewerApi, translations: ViewerTranslations);
+    destroy(): void;
+}

package/dist/ui.js

@@ -0,0 +1,390 @@
+import { ViewerError } from "./errors.js";
+import { viewerCss } from "./ui-styles.js";
+export class BasicViewerUi {
+    root;
+    viewportContainer;
+    #viewer;
+    #translations;
+    #toolbar;
+    #searchPanel;
+    #searchInput;
+    #searchStatus;
+    #thumbnailPanel;
+    #sheetTabs;
+    #status;
+    #pageInput;
+    #pageCount;
+    #zoomLabel;
+    #buttons = new Map();
+    #unsubscribes = [];
+    #onKeyDown = (event) => this.#handleKeyDown(event);
+    #onFullscreenChange = () => this.#syncFullscreen();
+    #info;
+    #search = null;
+    #selection = null;
+    #thumbnailAbort;
+    #searchTimer;
+    #fallbackFullscreen = false;
+    #destroyed = false;
+    constructor(container, viewer, translations) {
+        this.#viewer = viewer;
+        this.#translations = translations;
+        this.root = document.createElement("div");
+        this.root.className = "zrimo-ui";
+        this.root.dataset.zrimoUi = "root";
+        this.root.setAttribute("lang", "");
+        const style = document.createElement("style");
+        style.dataset.zrimoStyles = "";
+        style.textContent = viewerCss;
+        this.#toolbar = document.createElement("div");
+        this.#toolbar.className = "zrimo-ui__toolbar";
+        this.#toolbar.setAttribute("role", "toolbar");
+        this.#toolbar.append(this.#button("thumbnails", "▦", translations.thumbnails, () => this.#toggleThumbnails()), group(this.#button("previous", "‹", translations.previous, () => viewer.previous()), this.#button("next", "›", translations.next, () => viewer.next())));
+        const pageGroup = group();
+        pageGroup.dataset.control = "page";
+        this.#pageInput = document.createElement("input");
+        this.#pageInput.className = "zrimo-ui__page-input";
+        this.#pageInput.type = "number";
+        this.#pageInput.min = "1";
+        this.#pageInput.setAttribute("aria-label", translations.page);
+        this.#pageInput.addEventListener("change", () => viewer.goToPage(Number(this.#pageInput.value) - 1));
+        this.#pageCount = document.createElement("span");
+        pageGroup.append(this.#pageInput, this.#pageCount);
+        this.#toolbar.append(pageGroup, group(this.#button("zoom-out", "−", translations.zoomOut, () => viewer.zoomOut()), this.#button("zoom-in", "+", translations.zoomIn, () => viewer.zoomIn())));
+        this.#zoomLabel = document.createElement("span");
+        this.#zoomLabel.dataset.control = "zoom-label";
+        this.#toolbar.append(this.#zoomLabel, group(this.#button("fit-width", "↔", translations.fitWidth, () => viewer.fitWidth()), this.#button("fit-page", "□", translations.fitPage, () => viewer.fitPage())), spacer(), this.#button("search", "⌕", translations.search, () => this.#toggleSearch()), this.#button("fullscreen", "⛶", translations.fullscreen, () => void this.#toggleFullscreen()), this.#button("download", "⇩", translations.download, () => {
+            try {
+                viewer.downloadOriginal();
+            }
+            catch (error) {
+                this.#showStatus(error instanceof Error ? error.message : String(error));
+            }
+        }));
+        this.#searchPanel = document.createElement("div");
+        this.#searchPanel.className = "zrimo-ui__search";
+        this.#searchPanel.hidden = true;
+        this.#searchInput = document.createElement("input");
+        this.#searchInput.type = "search";
+        this.#searchInput.placeholder = translations.searchPlaceholder;
+        this.#searchInput.setAttribute("aria-label", translations.search);
+        this.#searchInput.addEventListener("input", () => this.#scheduleSearch());
+        this.#searchInput.addEventListener("keydown", (event) => {
+            if (event.key === "Enter") {
+                event.preventDefault();
+                if (event.shiftKey)
+                    viewer.searchPrevious();
+                else
+                    viewer.searchNext();
+            }
+        });
+        this.#searchStatus = document.createElement("span");
+        this.#searchStatus.className = "zrimo-ui__search-status";
+        this.#searchPanel.append(this.#searchInput, this.#button("search-previous", "‹", translations.previous, () => viewer.searchPrevious()), this.#button("search-next", "›", translations.next, () => viewer.searchNext()), this.#searchStatus, this.#button("search-close", "×", translations.close, () => this.#closeSearch()));
+        const body = document.createElement("div");
+        body.className = "zrimo-ui__body";
+        this.#thumbnailPanel = document.createElement("aside");
+        this.#thumbnailPanel.className = "zrimo-ui__panel";
+        this.#thumbnailPanel.dataset.panel = "thumbnails";
+        this.#thumbnailPanel.hidden = true;
+        this.#thumbnailPanel.setAttribute("aria-label", translations.thumbnails);
+        this.viewportContainer = document.createElement("div");
+        this.viewportContainer.className = "zrimo-ui__viewport";
+        body.append(this.#thumbnailPanel, this.viewportContainer);
+        this.#sheetTabs = document.createElement("div");
+        this.#sheetTabs.className = "zrimo-ui__sheets";
+        this.#sheetTabs.hidden = true;
+        this.#sheetTabs.setAttribute("aria-label", translations.sheets);
+        this.#status = document.createElement("div");
+        this.#status.className = "zrimo-ui__status";
+        this.#status.hidden = true;
+        this.#status.setAttribute("role", "status");
+        this.root.append(style, this.#toolbar, this.#searchPanel, body, this.#sheetTabs, this.#status);
+        container.append(this.root);
+        this.#unsubscribes.push(viewer.on("statechange", (state) => this.#syncState(state)), viewer.on("ready", () => {
+            this.#info = viewer.getDocumentInfo();
+            this.#renderSheetTabs();
+            this.#syncState(viewer.state);
+        }), viewer.on("progress", (progress) => {
+            if (viewer.state.status === "loading")
+                this.#showStatus(progress.ratio === undefined
+                    ? translations.loading
+                    : `${translations.loading} ${Math.round(progress.ratio * 100)}%`);
+        }), viewer.on("error", (error) => this.#showStatus(error.message)), viewer.on("warning", (warning) => this.#showStatus(warning.message, 3500)), viewer.on("searchchange", (result) => {
+            this.#search = result;
+            this.#syncSearch();
+        }), viewer.on("selectionchange", (selection) => {
+            this.#selection = selection;
+            this.#renderSheetTabs();
+        }), viewer.on("pagechange", () => {
+            if (!this.#thumbnailPanel.hidden)
+                void this.#renderThumbnails();
+            this.#renderSheetTabs();
+        }));
+        this.root.addEventListener("keydown", this.#onKeyDown);
+        document.addEventListener("fullscreenchange", this.#onFullscreenChange);
+        this.#syncState(viewer.state);
+    }
+    destroy() {
+        if (this.#destroyed)
+            return;
+        this.#destroyed = true;
+        if (this.#searchTimer)
+            clearTimeout(this.#searchTimer);
+        this.#thumbnailAbort?.abort();
+        for (const unsubscribe of this.#unsubscribes)
+            unsubscribe();
+        this.root.removeEventListener("keydown", this.#onKeyDown);
+        document.removeEventListener("fullscreenchange", this.#onFullscreenChange);
+        if (document.fullscreenElement === this.root)
+            void document.exitFullscreen();
+        this.root.remove();
+    }
+    #button(id, text, label, action) {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "zrimo-ui__button";
+        button.dataset.action = id;
+        button.textContent = text;
+        button.title = label;
+        button.setAttribute("aria-label", label);
+        button.addEventListener("click", action);
+        this.#buttons.set(id, button);
+        return button;
+    }
+    #syncState(state) {
+        const ready = state.status === "ready";
+        this.#pageInput.value = String(state.pageIndex + 1);
+        this.#pageInput.max = String(Math.max(1, state.pageCount));
+        this.#pageCount.textContent = `${this.#translations.of} ${state.pageCount}`;
+        this.#zoomLabel.textContent = `${Math.round(state.zoom * 100)}%`;
+        this.#buttons.get("previous").disabled = !ready || state.pageIndex <= 0;
+        this.#buttons.get("next").disabled =
+            !ready || state.pageIndex >= state.pageCount - 1;
+        this.#buttons.get("download").disabled = !ready;
+        this.#buttons.get("search").disabled =
+            !ready || !this.#info?.capabilities?.search;
+        const single = state.pageCount <= 1;
+        const pageControls = this.#toolbar.querySelector('[data-control="page"]');
+        if (pageControls)
+            pageControls.hidden = single || this.#info?.unit === "sheet";
+        this.#buttons.get("previous").hidden =
+            single || this.#info?.unit === "sheet";
+        this.#buttons.get("next").hidden = single || this.#info?.unit === "sheet";
+        const thumbnailsAvailable = Boolean(ready &&
+            !single &&
+            this.#info?.capabilities?.thumbnails &&
+            this.#info.unit !== "sheet");
+        this.#buttons.get("thumbnails").hidden = !thumbnailsAvailable;
+        if (!thumbnailsAvailable)
+            this.#closeThumbnails();
+        if (state.status !== "loading" && state.status !== "error")
+            this.#hideStatus();
+        if (state.status === "idle") {
+            this.#info = undefined;
+            this.#search = null;
+            this.#selection = null;
+            this.#renderSheetTabs();
+        }
+    }
+    #toggleSearch() {
+        const open = this.#searchPanel.hidden;
+        this.#searchPanel.hidden = !open;
+        this.#buttons.get("search").setAttribute("aria-pressed", String(open));
+        if (open)
+            this.#searchInput.focus();
+    }
+    #closeSearch() {
+        this.#searchPanel.hidden = true;
+        this.#buttons.get("search").setAttribute("aria-pressed", "false");
+        this.#searchInput.value = "";
+        this.#viewer.clearSearch();
+    }
+    #scheduleSearch() {
+        if (this.#searchTimer)
+            clearTimeout(this.#searchTimer);
+        this.#searchTimer = setTimeout(() => {
+            this.#searchTimer = undefined;
+            void this.#viewer
+                .search(this.#searchInput.value)
+                .catch((error) => {
+                if (!(error instanceof ViewerError) || error.code !== "aborted")
+                    this.#showStatus(error instanceof Error ? error.message : String(error));
+            });
+        }, 120);
+    }
+    #syncSearch() {
+        const result = this.#search;
+        if (!result || result.matches.length === 0) {
+            this.#searchStatus.textContent = this.#searchInput.value
+                ? this.#translations.noMatches
+                : "";
+            return;
+        }
+        this.#searchStatus.textContent = `${result.activeIndex + 1}/${result.matches.length}`;
+    }
+    #toggleThumbnails() {
+        const open = this.#thumbnailPanel.hidden;
+        this.#thumbnailPanel.hidden = !open;
+        this.#buttons.get("thumbnails").setAttribute("aria-pressed", String(open));
+        if (open)
+            void this.#renderThumbnails();
+        else
+            this.#thumbnailAbort?.abort();
+    }
+    #closeThumbnails() {
+        this.#thumbnailPanel.hidden = true;
+        this.#buttons.get("thumbnails").setAttribute("aria-pressed", "false");
+        this.#thumbnailAbort?.abort();
+        this.#thumbnailPanel.replaceChildren();
+    }
+    async #renderThumbnails() {
+        if (this.#thumbnailPanel.hidden || this.#viewer.state.status !== "ready")
+            return;
+        this.#thumbnailAbort?.abort();
+        const controller = new AbortController();
+        this.#thumbnailAbort = controller;
+        const state = this.#viewer.state;
+        const start = Math.max(0, state.pageIndex - 5);
+        const end = Math.min(state.pageCount, start + 11);
+        this.#thumbnailPanel.replaceChildren();
+        for (let pageIndex = start; pageIndex < end; pageIndex += 1) {
+            if (controller.signal.aborted)
+                return;
+            const button = document.createElement("button");
+            button.type = "button";
+            button.className = "zrimo-ui__thumbnail";
+            button.dataset.pageIndex = String(pageIndex);
+            button.setAttribute("aria-label", `${this.#translations.page} ${pageIndex + 1}`);
+            button.setAttribute("aria-current", pageIndex === state.pageIndex ? "page" : "false");
+            const canvas = document.createElement("canvas");
+            const label = document.createElement("span");
+            label.textContent = String(pageIndex + 1);
+            button.append(canvas, label);
+            button.addEventListener("click", () => this.#viewer.goToPage(pageIndex));
+            this.#thumbnailPanel.append(button);
+            try {
+                await this.#viewer.renderThumbnail(pageIndex, canvas, {
+                    maxWidth: 180,
+                    maxHeight: 220,
+                    signal: controller.signal,
+                });
+            }
+            catch (error) {
+                if (!(error instanceof ViewerError) || error.code !== "aborted")
+                    button.dataset.renderError = "true";
+            }
+        }
+    }
+    #renderSheetTabs() {
+        const names = this.#info?.sheetNames;
+        if (this.#info?.unit !== "sheet" || !names) {
+            this.#sheetTabs.hidden = true;
+            this.#sheetTabs.replaceChildren();
+            return;
+        }
+        this.#sheetTabs.hidden = false;
+        this.#sheetTabs.replaceChildren();
+        names.forEach((name, sheetIndex) => {
+            const button = this.#button(`sheet-${sheetIndex}`, name, name, () => this.#viewer.setSheet(sheetIndex));
+            button.setAttribute("aria-pressed", String(sheetIndex === this.#viewer.state.pageIndex));
+            this.#sheetTabs.append(button);
+        });
+        if (this.#selection && "sheetIndex" in this.#selection) {
+            const range = document.createElement("span");
+            range.className = "zrimo-ui__label";
+            const ranges = "ranges" in this.#selection
+                ? this.#selection.ranges
+                : [this.#selection];
+            const labels = ranges.slice(0, 3).map(formatCellRange);
+            range.textContent = `${this.#translations.selectedRange}: ${labels.join("; ")}${ranges.length > labels.length ? "; …" : ""}`;
+            this.#sheetTabs.append(range);
+        }
+    }
+    async #toggleFullscreen() {
+        if (document.fullscreenElement === this.root) {
+            await document.exitFullscreen();
+            return;
+        }
+        if (this.#fallbackFullscreen) {
+            this.#setFallbackFullscreen(false);
+            return;
+        }
+        try {
+            if (!this.root.requestFullscreen)
+                throw new Error("Fullscreen API unavailable");
+            await this.root.requestFullscreen();
+        }
+        catch {
+            this.#setFallbackFullscreen(true);
+        }
+    }
+    #setFallbackFullscreen(active) {
+        this.#fallbackFullscreen = active;
+        this.root.classList.toggle("zrimo-ui--fullscreen-fallback", active);
+        this.#syncFullscreen();
+    }
+    #syncFullscreen() {
+        const active = document.fullscreenElement === this.root || this.#fallbackFullscreen;
+        const button = this.#buttons.get("fullscreen");
+        button.setAttribute("aria-pressed", String(active));
+        button.title = active
+            ? this.#translations.exitFullscreen
+            : this.#translations.fullscreen;
+        button.setAttribute("aria-label", button.title);
+    }
+    #handleKeyDown(event) {
+        if (event.defaultPrevented)
+            return;
+        const editing = event.target instanceof HTMLInputElement ||
+            event.target instanceof HTMLTextAreaElement ||
+            (event.target instanceof HTMLElement && event.target.isContentEditable);
+        if (event.key === "Escape") {
+            this.#searchPanel.hidden = true;
+            this.#closeThumbnails();
+            if (this.#fallbackFullscreen)
+                this.#setFallbackFullscreen(false);
+            return;
+        }
+        if (editing)
+            return;
+        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "f") {
+            event.preventDefault();
+            if (this.#searchPanel.hidden)
+                this.#toggleSearch();
+            else
+                this.#searchInput.focus();
+        }
+        else if (event.key === "F11") {
+            event.preventDefault();
+            void this.#toggleFullscreen();
+        }
+    }
+    #showStatus(message, timeout = 0) {
+        this.#status.textContent = message;
+        this.#status.hidden = false;
+        if (timeout > 0)
+            setTimeout(() => {
+                if (this.#status.textContent === message)
+                    this.#hideStatus();
+            }, timeout);
+    }
+    #hideStatus() {
+        this.#status.hidden = true;
+        this.#status.textContent = "";
+    }
+}
+function formatCellRange(range) {
+    return `R${range.startRow}C${range.startColumn}:R${range.endRow}C${range.endColumn}`;
+}
+function group(...children) {
+    const element = document.createElement("span");
+    element.className = "zrimo-ui__group";
+    element.append(...children);
+    return element;
+}
+function spacer() {
+    const element = document.createElement("span");
+    element.className = "zrimo-ui__spacer";
+    return element;
+}