@shadow-garden/bapbong-view 0.1.0

package/dist/index.js

@@ -0,0 +1,571 @@
+// packages/view/src/lib/render-core.ts
+import { schema as baseSchema } from "@shadow-garden/bapbong-model";
+import { importDocx, exportDocx } from "@shadow-garden/bapbong-docx";
+import { createLayoutCache, layout } from "@shadow-garden/bapbong-layout-engine";
+import {
+  createCanvasMeasurer,
+  createCanvasMetrics,
+  ensureFontsLoaded
+} from "@shadow-garden/bapbong-measuring";
+import { CanvasPainter } from "@shadow-garden/bapbong-painter-canvas";
+import { caretRect, hitTest, selectionRects, verticalCaret } from "@shadow-garden/bapbong-selection";
+import { A11yMirror } from "@shadow-garden/bapbong-a11y";
+var A4 = {
+  width: 794,
+  height: 1123,
+  margin: { top: 96, right: 96, bottom: 96, left: 96 }
+};
+var RenderCore = class {
+  stack;
+  viewport;
+  painter;
+  measureText;
+  measureMetrics;
+  resolved = null;
+  doc = null;
+  zoomFactor;
+  // Page chrome from the imported docx, keyed by w:type (default/first/even).
+  chromeHeaders = {};
+  chromeFooters = {};
+  chromeTitlePg = false;
+  chromeEvenAndOdd = false;
+  // Footnote bodies keyed by display number (laid out at the page bottom).
+  footnotes;
+  // The imported source package — passed to exportDocx({ carry }) so styles /
+  // numbering / headers / media survive a round-trip.
+  importedRaw = null;
+  // The document schema: model's base, or a caller-supplied extension.
+  docSchema = baseSchema;
+  // Page geometry from the imported docx's sectPr (A4 until imported).
+  page = A4;
+  // Incremental re-layout: unchanged paragraphs skip measuring on each change.
+  // Replaced wholesale when late-loading fonts invalidate every measurement.
+  layoutCache = createLayoutCache();
+  // Last painted overlay — reused on scroll/zoom/font-relayout repaints.
+  lastOverlay = { caret: null, selection: [] };
+  // Doc-range decorations to paint (comment tint, find highlight…). The editor
+  // sets this; the core resolves the ranges to page rects at paint time.
+  decorationProvider = null;
+  // Scroll repaint throttle (page virtualization).
+  scrollRaf = null;
+  // Late-font re-layout coalescing: families the current doc actually uses
+  // (set at load) + a debounce timer so a burst of loadingdone events (fonts
+  // land face-by-face) costs ONE re-layout, not one per event.
+  docFamilies = /* @__PURE__ */ new Set();
+  fontRelayoutTimer = null;
+  // Subscribers notified after a late-font relayout (rects moved).
+  fontsListeners = /* @__PURE__ */ new Set();
+  // Visually-hidden ARIA mirror of the doc (screen readers; canvas is opaque).
+  a11y;
+  constructor(stack, opts = {}) {
+    this.stack = stack;
+    this.viewport = opts.viewport ?? stack.closest(".canvas-wrap");
+    this.painter = new CanvasPainter(stack);
+    this.measureText = opts.measureText ?? createCanvasMeasurer();
+    this.measureMetrics = opts.measureMetrics ?? createCanvasMetrics();
+    this.zoomFactor = opts.zoom ?? 1;
+    this.a11y = opts.a11y === false ? null : new A11yMirror(stack, { label: opts.a11yLabel });
+    this.viewport?.addEventListener("scroll", this.onScroll);
+    document.fonts?.addEventListener?.("loadingdone", this.onFontsLoaded);
+  }
+  // ── State accessors ─────────────────────────────────────────────────
+  /** The current read-only document, or null before the first load. */
+  get document() {
+    return this.doc;
+  }
+  /** The resolved layout for the current doc, or null. */
+  get layout() {
+    return this.resolved;
+  }
+  /** Number of laid-out pages (0 before the first document). */
+  get pageCount() {
+    return this.resolved?.pages.length ?? 0;
+  }
+  /** The document schema in use (model's base, or a caller-supplied extension). */
+  get schema() {
+    return this.docSchema;
+  }
+  /** Resolve doc-range decorations to page rects on each content paint. */
+  setDecorationProvider(fn) {
+    this.decorationProvider = fn;
+  }
+  // ── Load / export ───────────────────────────────────────────────────
+  /**
+   * Import a `.docx`, lay it out, and (by default) paint the first frame. Pass
+   * `{ schema }` to import against an extended schema (e.g. plugin marks);
+   * `{ paint: false }` to skip the initial paint (the editor paints with a caret
+   * overlay itself). Resolves with the doc + imported page-chrome keys.
+   */
+  async loadDocx(bytes, opts = {}) {
+    const { doc, headers, footers, footnotes, titlePg, evenAndOdd, page, raw } = await importDocx(
+      bytes,
+      opts.schema ? { schema: opts.schema } : void 0
+    );
+    this.docSchema = opts.schema ?? baseSchema;
+    this.importedRaw = raw;
+    this.chromeHeaders = headers;
+    this.chromeFooters = footers;
+    this.chromeTitlePg = titlePg;
+    this.chromeEvenAndOdd = evenAndOdd;
+    this.footnotes = footnotes;
+    this.page = page;
+    const families = collectFontFamilies(doc, ...Object.values(headers), ...Object.values(footers));
+    this.docFamilies = new Set(families.map(normalizeFamily));
+    await ensureFontsLoaded(families);
+    this.layoutDoc(doc);
+    if (opts.paint !== false) this.paintContent();
+    return { doc, headerKeys: Object.keys(headers), footerKeys: Object.keys(footers) };
+  }
+  /** Export the current document to .docx bytes, carrying the imported source
+   *  package so unmodelled parts survive the round-trip. */
+  async exportDocx() {
+    if (!this.doc) throw new Error("RenderCore: no document loaded");
+    return exportDocx(this.doc, this.importedRaw ? { carry: this.importedRaw } : void 0);
+  }
+  // ── Layout / paint ──────────────────────────────────────────────────
+  /** Lay out (or re-lay, incrementally) `doc` and store it. Does not paint. */
+  layoutDoc(doc) {
+    this.doc = doc;
+    this.a11y?.update(doc);
+    this.resolved = layout(
+      doc,
+      { page: this.page, measureText: this.measureText, measureMetrics: this.measureMetrics },
+      this.layoutCache,
+      {
+        header: this.chromeHeaders["default"],
+        footer: this.chromeFooters["default"],
+        headerFirst: this.chromeHeaders["first"],
+        footerFirst: this.chromeFooters["first"],
+        headerEven: this.chromeHeaders["even"],
+        footerEven: this.chromeFooters["even"],
+        titlePg: this.chromeTitlePg,
+        evenAndOdd: this.chromeEvenAndOdd
+      },
+      this.footnotes
+    );
+  }
+  /** Full content repaint, virtualized to the scroll viewport. Pass an overlay
+   *  to update the caret/selection painted on top (kept for later repaints). */
+  paintContent(overlay) {
+    if (!this.resolved) return;
+    if (overlay) this.lastOverlay = normalizeOverlay(overlay);
+    this.painter.paint(this.resolved, {
+      zoom: this.zoomFactor,
+      caret: this.lastOverlay.caret,
+      selection: this.lastOverlay.selection,
+      viewport: this.currentViewport(),
+      decorations: this.collectDecorations()
+    });
+  }
+  /** Redraw only the caret/selection overlay (just the affected page canvases —
+   *  used for caret blink, drag preview, selection-only changes). */
+  paintOverlay(overlay) {
+    if (!this.resolved) return;
+    this.lastOverlay = normalizeOverlay(overlay);
+    this.painter.paintOverlay({ caret: this.lastOverlay.caret, selection: this.lastOverlay.selection });
+  }
+  /** Set the zoom factor (1 = 100%) and repaint content at the new scale. */
+  setZoom(zoom) {
+    this.zoomFactor = zoom;
+    this.paintContent();
+  }
+  /** The current zoom factor. */
+  getZoom() {
+    return this.zoomFactor;
+  }
+  /**
+   * Print the whole document. The live canvas is virtualized (only visible
+   * pages exist), so this renders **every** page with a throwaway painter,
+   * snapshots each to a PNG, and prints one image per sheet via a hidden iframe
+   * (clean pagination, the live view untouched).
+   */
+  async print() {
+    const layout2 = this.resolved;
+    if (!layout2) return;
+    const holder = document.createElement("div");
+    holder.style.cssText = "position:absolute;left:-99999px;top:0;pointer-events:none;";
+    document.body.appendChild(holder);
+    try {
+      new CanvasPainter(holder).paint(layout2, { zoom: 1 });
+      const canvases = Array.from(holder.querySelectorAll("canvas")).sort(
+        (a, b) => parseFloat(a.style.top || "0") - parseFloat(b.style.top || "0")
+      );
+      const sources = canvases.map((c) => c.toDataURL("image/png"));
+      await printImages(sources);
+    } finally {
+      holder.remove();
+    }
+  }
+  /** Gather decorations from the provider and resolve each doc range to
+   *  page-local rects the painter can fill directly. */
+  collectDecorations() {
+    if (!this.resolved || !this.decorationProvider) return [];
+    const out = [];
+    for (const d of this.decorationProvider()) {
+      const rects = selectionRects(this.resolved, d.from, d.to, this.measureText);
+      if (rects.length) out.push({ rects, kind: d.kind, color: d.color });
+    }
+    return out;
+  }
+  // ── Geometry queries ────────────────────────────────────────────────
+  /** Caret geometry at a doc position (page-local), or null. */
+  caretRect(pos) {
+    return this.resolved ? caretRect(this.resolved, pos, this.measureText) : null;
+  }
+  /** Selection highlight rects for a doc range (page-local). */
+  selectionRects(from, to) {
+    return this.resolved ? selectionRects(this.resolved, from, to, this.measureText) : [];
+  }
+  /** The doc position one line above/below `head` at horizontal `x`, or null. */
+  verticalCaret(head, dir, x) {
+    return this.resolved ? verticalCaret(this.resolved, head, dir, x, this.measureText) : null;
+  }
+  /** Map client (viewport) coords to a page-local point, or null. */
+  clientToPage(clientX, clientY) {
+    const rect = this.stack.getBoundingClientRect();
+    return this.painter.canvasToPage(clientX - rect.left, clientY - rect.top);
+  }
+  /** The doc position under a page-local point, or null. */
+  posAtPoint(point) {
+    return this.resolved ? hitTest(this.resolved, point, this.measureText) : null;
+  }
+  /** The doc position under a pointer/mouse event, or null. */
+  posAtEvent(ev) {
+    const pt = this.clientToPage(ev.clientX, ev.clientY);
+    return pt ? this.posAtPoint(pt) : null;
+  }
+  /** Map a page-local point to container (canvas-stack) coordinates, or null. */
+  pageToCanvas(p) {
+    return this.painter.pageToCanvas(p);
+  }
+  /** Scroll the viewport so the caret at `pos` sits `topMargin` px from the top. */
+  scrollToPos(pos, topMargin = 80) {
+    const cr = this.caretRect(pos);
+    const pt = cr && this.painter.pageToCanvas({ pageIndex: cr.pageIndex, x: cr.x, y: cr.y });
+    if (pt && this.viewport) this.viewport.scrollTop = Math.max(0, pt.y - topMargin);
+  }
+  /** The viewport's window onto the page stack, in container CSS px. */
+  currentViewport() {
+    const wrap = this.viewport;
+    if (!wrap) return void 0;
+    const wrapRect = wrap.getBoundingClientRect();
+    const stackRect = this.stack.getBoundingClientRect();
+    return { top: wrapRect.top - stackRect.top, height: wrap.clientHeight };
+  }
+  // ── Lifecycle ───────────────────────────────────────────────────────
+  /** Subscribe to late-font relayouts (page geometry changed → recompute any
+   *  caret/selection rects you hold). Returns an unsubscribe fn. */
+  onFontsReloaded(cb) {
+    this.fontsListeners.add(cb);
+    return () => this.fontsListeners.delete(cb);
+  }
+  destroy() {
+    if (this.scrollRaf != null) cancelAnimationFrame(this.scrollRaf);
+    this.scrollRaf = null;
+    if (this.fontRelayoutTimer != null) clearTimeout(this.fontRelayoutTimer);
+    this.fontRelayoutTimer = null;
+    this.viewport?.removeEventListener("scroll", this.onScroll);
+    document.fonts?.removeEventListener?.("loadingdone", this.onFontsLoaded);
+    this.fontsListeners.clear();
+    this.a11y?.destroy();
+  }
+  /** Repaint newly visible pages while scrolling (rAF-throttled). */
+  onScroll = () => {
+    if (this.scrollRaf != null) return;
+    this.scrollRaf = requestAnimationFrame(() => {
+      this.scrollRaf = null;
+      this.paintContent();
+    });
+  };
+  onFontsLoaded = (ev) => {
+    if (!this.doc) return;
+    const faces = ev.fontfaces ?? [];
+    if (faces.length > 0 && !faces.some((f) => this.docFamilies.has(normalizeFamily(f.family)))) {
+      return;
+    }
+    if (this.fontRelayoutTimer != null) clearTimeout(this.fontRelayoutTimer);
+    this.fontRelayoutTimer = setTimeout(() => {
+      this.fontRelayoutTimer = null;
+      if (!this.doc) return;
+      this.layoutCache = createLayoutCache();
+      this.layoutDoc(this.doc);
+      this.paintContent();
+      for (const cb of this.fontsListeners) cb();
+    }, 150);
+  };
+};
+function normalizeOverlay(overlay) {
+  return { caret: overlay.caret ?? null, selection: overlay.selection ?? [] };
+}
+function printImages(sources) {
+  return new Promise((resolve) => {
+    if (sources.length === 0) {
+      resolve();
+      return;
+    }
+    const iframe = document.createElement("iframe");
+    iframe.setAttribute("aria-hidden", "true");
+    iframe.style.cssText = "position:fixed;right:0;bottom:0;width:0;height:0;border:0;";
+    document.body.appendChild(iframe);
+    const cw = iframe.contentWindow;
+    const doc = iframe.contentDocument;
+    if (!cw || !doc) {
+      iframe.remove();
+      resolve();
+      return;
+    }
+    const body = sources.map((s) => `<img src="${s}" alt="" />`).join("");
+    doc.open();
+    doc.write(
+      `<!doctype html><html><head><meta charset="utf-8"><style>@page{margin:0}html,body{margin:0;padding:0}img{display:block;width:100%;break-after:page;page-break-after:always}img:last-child{break-after:auto;page-break-after:auto}</style></head><body>${body}</body></html>`
+    );
+    doc.close();
+    let settled = false;
+    const finish = () => {
+      if (settled) return;
+      settled = true;
+      cw.focus();
+      cw.print();
+      setTimeout(() => iframe.remove(), 1e3);
+      resolve();
+    };
+    const pending = Array.from(doc.images).filter((im) => !im.complete);
+    if (pending.length === 0) {
+      finish();
+      return;
+    }
+    let left = pending.length;
+    const onOne = () => {
+      if (--left === 0) finish();
+    };
+    for (const im of pending) {
+      im.addEventListener("load", onOne);
+      im.addEventListener("error", onOne);
+    }
+    setTimeout(finish, 4e3);
+  });
+}
+function normalizeFamily(family) {
+  return family.replace(/^["']|["']$/g, "").trim().toLowerCase();
+}
+function collectFontFamilies(...docs) {
+  const families = /* @__PURE__ */ new Set(["Arial"]);
+  for (const doc of docs) {
+    doc?.descendants((node) => {
+      for (const mark of node.marks) {
+        if (mark.type.name === "fontFamily" && mark.attrs["family"]) {
+          families.add(String(mark.attrs["family"]));
+        }
+      }
+    });
+  }
+  return [...families];
+}
+
+// packages/view/src/lib/viewer-selection.ts
+var ViewerSelection = class {
+  constructor(core) {
+    this.core = core;
+    const s = core.stack;
+    s.style.cursor = "text";
+    if (s.tabIndex < 0) s.tabIndex = 0;
+    s.style.outline = "none";
+    s.addEventListener("pointerdown", this.onDown);
+    s.addEventListener("pointermove", this.onMove);
+    s.addEventListener("pointerup", this.onUp);
+    s.addEventListener("pointercancel", this.onUp);
+    s.addEventListener("dblclick", this.onDblClick);
+    s.addEventListener("keydown", this.onKey);
+  }
+  core;
+  anchor = null;
+  head = null;
+  dragging = false;
+  /** Drop any current selection (e.g. when a new document loads). */
+  clear() {
+    this.anchor = this.head = null;
+    this.dragging = false;
+    this.core.paintOverlay({ selection: [] });
+  }
+  destroy() {
+    const s = this.core.stack;
+    s.removeEventListener("pointerdown", this.onDown);
+    s.removeEventListener("pointermove", this.onMove);
+    s.removeEventListener("pointerup", this.onUp);
+    s.removeEventListener("pointercancel", this.onUp);
+    s.removeEventListener("dblclick", this.onDblClick);
+    s.removeEventListener("keydown", this.onKey);
+  }
+  // ── Pointer ─────────────────────────────────────────────────────────
+  onDown = (ev) => {
+    if (ev.button !== 0) return;
+    const pos = this.core.posAtEvent(ev);
+    if (pos == null) return;
+    ev.preventDefault();
+    this.core.stack.focus?.();
+    this.anchor = this.head = pos;
+    this.dragging = true;
+    this.paint();
+    try {
+      ev.target.setPointerCapture?.(ev.pointerId);
+    } catch {
+    }
+  };
+  onMove = (ev) => {
+    if (!this.dragging || this.anchor == null || !(ev.buttons & 1)) return;
+    const coalesced = ev.getCoalescedEvents?.() ?? [];
+    const last = coalesced.length > 0 ? coalesced[coalesced.length - 1] : ev;
+    const pos = this.core.posAtEvent(last);
+    if (pos == null || pos === this.head) return;
+    this.head = pos;
+    this.paint();
+  };
+  onUp = () => {
+    this.dragging = false;
+  };
+  /** Double-click selects the word under the pointer. */
+  onDblClick = (ev) => {
+    const pos = this.core.posAtEvent(ev);
+    const doc = this.core.document;
+    if (pos == null || !doc) return;
+    const word = wordRangeAt(doc, pos);
+    if (!word) return;
+    ev.preventDefault();
+    this.anchor = word.from;
+    this.head = word.to;
+    this.paint();
+  };
+  // ── Keyboard ────────────────────────────────────────────────────────
+  onKey = (ev) => {
+    if (!(ev.metaKey || ev.ctrlKey)) return;
+    const key = ev.key.toLowerCase();
+    if (key === "c") {
+      const text = this.selectedText();
+      if (text) {
+        ev.preventDefault();
+        navigator.clipboard?.writeText(text).catch(() => {
+        });
+      }
+    } else if (key === "a") {
+      const doc = this.core.document;
+      if (!doc) return;
+      ev.preventDefault();
+      this.anchor = 0;
+      this.head = doc.content.size;
+      this.paint();
+    }
+  };
+  // ── Helpers ─────────────────────────────────────────────────────────
+  range() {
+    if (this.anchor == null || this.head == null || this.anchor === this.head) return null;
+    return { from: Math.min(this.anchor, this.head), to: Math.max(this.anchor, this.head) };
+  }
+  paint() {
+    const r = this.range();
+    this.core.paintOverlay({ selection: r ? this.core.selectionRects(r.from, r.to) : [] });
+  }
+  selectedText() {
+    const r = this.range();
+    const doc = this.core.document;
+    if (!r || !doc) return null;
+    return doc.textBetween(r.from, r.to, "\n", "\n");
+  }
+};
+function wordRangeAt(doc, pos) {
+  const $pos = doc.resolve(pos);
+  const text = $pos.parent.textContent;
+  if (!text) return null;
+  const start = $pos.start();
+  let off = pos - start;
+  off = Math.max(0, Math.min(off, text.length));
+  const isWord = (c) => c != null && !/\s/.test(c);
+  if (!isWord(text[off]) && isWord(text[off - 1])) off -= 1;
+  if (!isWord(text[off])) return null;
+  let from = off;
+  let to = off;
+  while (from > 0 && isWord(text[from - 1])) from--;
+  while (to < text.length && isWord(text[to])) to++;
+  return { from: start + from, to: start + to };
+}
+
+// packages/view/src/lib/bapbong-view.ts
+var BapbongView = class {
+  stack;
+  core;
+  selection;
+  changeListeners = /* @__PURE__ */ new Set();
+  offFonts;
+  constructor(host, opts = {}) {
+    const stack = document.createElement("div");
+    stack.style.position = "relative";
+    host.appendChild(stack);
+    this.stack = stack;
+    this.core = new RenderCore(stack, {
+      viewport: opts.viewport ?? host,
+      zoom: opts.zoom,
+      a11y: opts.a11y,
+      a11yLabel: opts.a11yLabel
+    });
+    this.offFonts = this.core.onFontsReloaded(() => this.emit());
+    this.selection = opts.selectable === false ? null : new ViewerSelection(this.core);
+  }
+  /** Import a `.docx` and render the first frame. Resolves with the imported
+   *  page-chrome keys (header/footer w:types present). */
+  async loadDocx(bytes) {
+    this.selection?.clear();
+    const { headerKeys, footerKeys } = await this.core.loadDocx(bytes);
+    this.emit();
+    return { headerKeys, footerKeys };
+  }
+  /** Export the current document back to .docx bytes (carries the source
+   *  package so unmodelled parts survive the round-trip). */
+  exportDocx() {
+    return this.core.exportDocx();
+  }
+  /** Scroll so the caret at doc position `pos` sits `topMargin` px from the top. */
+  scrollToPos(pos, topMargin) {
+    this.core.scrollToPos(pos, topMargin);
+  }
+  /** Set the zoom factor (1 = 100%) and repaint at the new scale. */
+  setZoom(zoom) {
+    this.core.setZoom(zoom);
+  }
+  /** The current zoom factor. */
+  getZoom() {
+    return this.core.getZoom();
+  }
+  /** Print the whole document (renders every page, one per sheet). */
+  print() {
+    return this.core.print();
+  }
+  /** Number of laid-out pages (0 before the first document). */
+  get pageCount() {
+    return this.core.pageCount;
+  }
+  /** The document schema in use. */
+  get schema() {
+    return this.core.schema;
+  }
+  /** Subscribe to render cycles (document loaded, page count changed). Returns
+   *  an unsubscribe fn. */
+  onChange(cb) {
+    this.changeListeners.add(cb);
+    return () => this.changeListeners.delete(cb);
+  }
+  destroy() {
+    this.offFonts();
+    this.selection?.destroy();
+    this.core.destroy();
+    this.stack.remove();
+  }
+  emit() {
+    const change = { pageCount: this.core.pageCount };
+    for (const cb of this.changeListeners) cb(change);
+  }
+};
+export {
+  BapbongView,
+  RenderCore,
+  ViewerSelection,
+  collectFontFamilies
+};

package/dist/lib/bapbong-view.d.ts

@@ -0,0 +1,63 @@
+import type { Schema } from 'prosemirror-model';
+import { type RenderCoreOptions } from './render-core.js';
+export interface BapbongViewOptions extends RenderCoreOptions {
+    /** The scroll viewport for virtualization / scroll-into-view. Defaults to the
+     *  host element itself (give it `overflow:auto` + a bounded height). */
+    viewport?: HTMLElement;
+    /** Allow read-only text selection + copy by dragging over the canvas
+     *  (double-click selects a word, Ctrl/⌘+A selects all, Ctrl/⌘+C copies).
+     *  Default true; pass false for a non-interactive preview. */
+    selectable?: boolean;
+}
+/** Emitted after the document (re)renders — page count changed, fonts settled. */
+export interface ViewChange {
+    pageCount: number;
+}
+/**
+ * A **read-only** bapbong document viewer (preview). Give it a scrollable host
+ * element; it renders the imported `.docx` to a virtualized canvas page-stack
+ * with zoom — no editing, no input-bridge, so the preview bundle never pulls in
+ * the ProseMirror editing surface.
+ *
+ *   const view = new BapbongView(hostEl);   // host: overflow:auto, fixed height
+ *   await view.loadDocx(bytes);
+ *   view.setZoom(1.25);
+ *
+ * For an editable instance use `@shadow-garden/bapbong-editor` (it composes the
+ * same {@link RenderCore}). For headless/server use `@shadow-garden/bapbong-headless`.
+ */
+export declare class BapbongView {
+    private readonly stack;
+    private readonly core;
+    private readonly selection;
+    private readonly changeListeners;
+    private readonly offFonts;
+    constructor(host: HTMLElement, opts?: BapbongViewOptions);
+    /** Import a `.docx` and render the first frame. Resolves with the imported
+     *  page-chrome keys (header/footer w:types present). */
+    loadDocx(bytes: ArrayBuffer): Promise<{
+        headerKeys: string[];
+        footerKeys: string[];
+    }>;
+    /** Export the current document back to .docx bytes (carries the source
+     *  package so unmodelled parts survive the round-trip). */
+    exportDocx(): Promise<Uint8Array>;
+    /** Scroll so the caret at doc position `pos` sits `topMargin` px from the top. */
+    scrollToPos(pos: number, topMargin?: number): void;
+    /** Set the zoom factor (1 = 100%) and repaint at the new scale. */
+    setZoom(zoom: number): void;
+    /** The current zoom factor. */
+    getZoom(): number;
+    /** Print the whole document (renders every page, one per sheet). */
+    print(): Promise<void>;
+    /** Number of laid-out pages (0 before the first document). */
+    get pageCount(): number;
+    /** The document schema in use. */
+    get schema(): Schema;
+    /** Subscribe to render cycles (document loaded, page count changed). Returns
+     *  an unsubscribe fn. */
+    onChange(cb: (c: ViewChange) => void): () => void;
+    destroy(): void;
+    private emit;
+}
+//# sourceMappingURL=bapbong-view.d.ts.map

package/dist/lib/bapbong-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bapbong-view.d.ts","sourceRoot":"","sources":["../../src/lib/bapbong-view.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAc,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAGtE,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D;4EACwE;IACxE,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB;;kEAE8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,kFAAkF;AAClF,MAAM,WAAW,UAAU;IACzB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;;;;GAYG;AACH,qBAAa,WAAW;IACtB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAc;IACpC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAa;IAClC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;IACnD,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAsC;IACtE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAa;gBAE1B,IAAI,EAAE,WAAW,EAAE,IAAI,GAAE,kBAAuB;IAiB5D;4DACwD;IAClD,QAAQ,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO,CAAC;QAAE,UAAU,EAAE,MAAM,EAAE,CAAC;QAAC,UAAU,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC;IAO3F;+DAC2D;IAC3D,UAAU,IAAI,OAAO,CAAC,UAAU,CAAC;IAIjC,kFAAkF;IAClF,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI;IAIlD,mEAAmE;IACnE,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAI3B,+BAA+B;IAC/B,OAAO,IAAI,MAAM;IAIjB,oEAAoE;IACpE,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;IAItB,8DAA8D;IAC9D,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,kCAAkC;IAClC,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED;6BACyB;IACzB,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,GAAG,MAAM,IAAI;IAKjD,OAAO,IAAI,IAAI;IAOf,OAAO,CAAC,IAAI;CAIb"}