@shadow-garden/bapbong-view 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Le Phuoc Minh
+
+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

@@ -0,0 +1,67 @@
+# @shadow-garden/bapbong-view
+
+The **render core + read-only viewer** for bapbong. It loads a `.docx`, lays it
+out, and paints it to a virtualized `<canvas>` page-stack — with zoom, text
+selection + copy, and an accessibility mirror — but **no editing** and **no
+input-bridge**, so the preview bundle never pulls in the ProseMirror editing
+surface.
+
+This is the **preview tier** of the 3-tier architecture: headless
+(`@shadow-garden/bapbong-headless`) / preview (this) / full editor
+(`@shadow-garden/bapbong-editor`). The editor composes the same `RenderCore`
+exported here, so layout/paint live in exactly one place.
+
+## Install
+
+```sh
+pnpm add @shadow-garden/bapbong-view
+```
+
+## `BapbongView` — read-only viewer
+
+Give it a scrollable host element (`overflow: auto` + a bounded height); it
+renders the document inside.
+
+```ts
+import { BapbongView } from '@shadow-garden/bapbong-view';
+
+const view = new BapbongView(hostEl);     // hostEl: overflow:auto, fixed height
+await view.loadDocx(bytes);               // ArrayBuffer of a .docx
+view.setZoom(1.25);
+view.onChange((c) => console.log(c.pageCount));
+// view.print();        // render every page → one image per sheet
+// view.destroy();
+```
+
+Constructor options (`BapbongViewOptions`):
+
+| Option | Default | Meaning |
+| --- | --- | --- |
+| `viewport` | the host | Scroll container for virtualization / scroll-into-view |
+| `zoom` | `1` | Initial zoom factor |
+| `selectable` | `true` | Drag to select text, double-click word, Ctrl/⌘+A, Ctrl/⌘+C copy |
+| `a11y` | `true` | Build a visually-hidden ARIA mirror for screen readers |
+| `a11yLabel` | `"Document content"` | `aria-label` for the mirror |
+
+Methods: `loadDocx` · `scrollToPos` · `setZoom` / `getZoom` · `print` ·
+`exportDocx` · `onChange` · `destroy`; getters `pageCount` · `schema`.
+
+## `RenderCore` — the shared render engine
+
+Lower-level than `BapbongView` (no host wrapper); the editor composes it. It
+owns load → layout → paint → scroll/zoom/virtualize plus the geometry queries
+(`caretRect`, `selectionRects`, `posAtEvent`, `pageToCanvas`, …) and holds a
+**read-only ProseMirror doc** (a `Node`, not an `EditorState`). You normally use
+`BapbongView`; reach for `RenderCore` only to build a custom surface.
+
+## Notes
+
+- **Selection is painted on the canvas** (using the same layout geometry the
+  painter uses, so it aligns at any zoom) and copies via the document model.
+  Because it isn't a native browser selection, the browser's right-click "Copy"
+  and find-in-page don't apply — `Ctrl/⌘+C` does.
+- **Print is rasterized** (each page is a high-res PNG, one per sheet) — pixel
+  faithful to the screen, but the printout's text isn't selectable. Vector/PDF
+  output is a planned separate path (`@shadow-garden/bapbong-pdf`).
+- Deps: `contracts`, `model`, `docx`, `measuring`, `layout-engine`,
+  `painter-canvas`, `selection`, `a11y` — **not** `input-bridge`.

package/dist/index.cjs

@@ -0,0 +1,597 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/view/src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  BapbongView: () => BapbongView,
+  RenderCore: () => RenderCore,
+  ViewerSelection: () => ViewerSelection,
+  collectFontFamilies: () => collectFontFamilies
+});
+module.exports = __toCommonJS(index_exports);
+
+// packages/view/src/lib/render-core.ts
+var import_bapbong_model = require("@shadow-garden/bapbong-model");
+var import_bapbong_docx = require("@shadow-garden/bapbong-docx");
+var import_bapbong_layout_engine = require("@shadow-garden/bapbong-layout-engine");
+var import_bapbong_measuring = require("@shadow-garden/bapbong-measuring");
+var import_bapbong_painter_canvas = require("@shadow-garden/bapbong-painter-canvas");
+var import_bapbong_selection = require("@shadow-garden/bapbong-selection");
+var import_bapbong_a11y = require("@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 = import_bapbong_model.schema;
+  // 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 = (0, import_bapbong_layout_engine.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 import_bapbong_painter_canvas.CanvasPainter(stack);
+    this.measureText = opts.measureText ?? (0, import_bapbong_measuring.createCanvasMeasurer)();
+    this.measureMetrics = opts.measureMetrics ?? (0, import_bapbong_measuring.createCanvasMetrics)();
+    this.zoomFactor = opts.zoom ?? 1;
+    this.a11y = opts.a11y === false ? null : new import_bapbong_a11y.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 (0, import_bapbong_docx.importDocx)(
+      bytes,
+      opts.schema ? { schema: opts.schema } : void 0
+    );
+    this.docSchema = opts.schema ?? import_bapbong_model.schema;
+    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 (0, import_bapbong_measuring.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 (0, import_bapbong_docx.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 = (0, import_bapbong_layout_engine.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 import_bapbong_painter_canvas.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 = (0, import_bapbong_selection.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 ? (0, import_bapbong_selection.caretRect)(this.resolved, pos, this.measureText) : null;
+  }
+  /** Selection highlight rects for a doc range (page-local). */
+  selectionRects(from, to) {
+    return this.resolved ? (0, import_bapbong_selection.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 ? (0, import_bapbong_selection.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 ? (0, import_bapbong_selection.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 = (0, import_bapbong_layout_engine.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);
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BapbongView,
+  RenderCore,
+  ViewerSelection,
+  collectFontFamilies
+});

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './lib/render-core.js';
+export * from './lib/viewer-selection.js';
+export * from './lib/bapbong-view.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC"}