@broadpaper/renderer 0.1.1

package/dist/index.js

@@ -0,0 +1,1109 @@
+// src/dom.ts
+import { classNames, styleString } from "@broadpaper/core";
+var SVG_NS = "http://www.w3.org/2000/svg";
+function vnodeToDom(v, doc = document) {
+  if (typeof v === "string") return doc.createTextNode(v);
+  const el = v.ns === "svg" ? doc.createElementNS(SVG_NS, v.tag) : doc.createElement(v.tag);
+  applyProps(el, v.props);
+  for (const c of v.children) el.appendChild(vnodeToDom(c, doc));
+  return el;
+}
+function applyProps(el, props) {
+  for (const [k, v] of Object.entries(props)) {
+    if (v === void 0 || v === null || v === false) continue;
+    if (k === "class") {
+      const c = classNames(v);
+      if (c) el.setAttribute("class", c);
+    } else if (k === "style") {
+      const s = styleString(v);
+      if (s) el.setAttribute("style", s);
+    } else if (v === true) el.setAttribute(k, "");
+    else el.setAttribute(k, String(v));
+  }
+}
+function mountVNodes(container, vnodes) {
+  const doc = container.ownerDocument;
+  const frag = doc.createDocumentFragment();
+  for (const v of vnodes) frag.appendChild(vnodeToDom(v, doc));
+  container.replaceChildren(frag);
+}
+function ensureStyle(doc, id, css) {
+  let el = doc.getElementById(id);
+  if (!el) {
+    el = doc.createElement("style");
+    el.id = id;
+    doc.head.appendChild(el);
+  }
+  if (el.textContent !== css) el.textContent = css;
+  return el;
+}
+
+// src/measurer.ts
+import { renderNode } from "@broadpaper/core";
+function hashString(s) {
+  let h3 = 2166136261;
+  for (let i = 0; i < s.length; i++) {
+    h3 ^= s.charCodeAt(i);
+    h3 = Math.imul(h3, 16777619);
+  }
+  return (h3 >>> 0).toString(36) + s.length.toString(36);
+}
+function sectionHash(section, width, mode) {
+  return hashString(JSON.stringify(section)) + ":" + Math.round(width * 100) + ":" + mode;
+}
+var DomMeasurer = class {
+  constructor(doc, container) {
+    this.doc = doc;
+    this.host = doc.createElement("div");
+    this.host.className = "bp-doc bp-galley";
+    this.host.setAttribute("aria-hidden", "true");
+    (container ?? doc.body).appendChild(this.host);
+  }
+  doc;
+  host;
+  cache = /* @__PURE__ */ new Map();
+  opts = null;
+  setOptions(opts) {
+    this.opts = opts;
+    this.host.classList.toggle("bp-doc--design", opts.mode === "design");
+  }
+  measure(sections, width) {
+    if (!this.opts) throw new Error("DomMeasurer.setOptions() must be called before measure()");
+    const out = {};
+    const pending = [];
+    for (const section of sections) {
+      const key = sectionHash(section, width, this.opts.mode);
+      const hit = this.cache.get(key);
+      if (hit) {
+        out[section.key] = hit;
+        continue;
+      }
+      const el = this.doc.createElement("div");
+      el.className = "bp-galley__section";
+      el.style.width = `${width}px`;
+      el.style.position = "relative";
+      const v = renderNode(section, { ...this.opts, width }, width);
+      if (v) el.appendChild(vnodeToDom(v, this.doc));
+      pending.push({ section, key, el });
+    }
+    if (pending.length === 0) return out;
+    for (const p of pending) this.host.appendChild(p.el);
+    for (const p of pending) {
+      const geom = readSectionGeometry(p.el, p.section, this.opts);
+      this.cache.set(p.key, geom);
+      out[p.section.key] = geom;
+    }
+    for (const p of pending) p.el.remove();
+    if (this.cache.size > 400) {
+      const keys = [...this.cache.keys()].slice(0, 200);
+      for (const k of keys) this.cache.delete(k);
+    }
+    return out;
+  }
+  clearCache() {
+    this.cache.clear();
+  }
+  destroy() {
+    this.host.remove();
+    this.cache.clear();
+  }
+};
+function readSectionGeometry(root, section, opts) {
+  const base = root.getBoundingClientRect();
+  const nodes = {};
+  const byKey = /* @__PURE__ */ new Map();
+  const collect = (n) => {
+    byKey.set(n.key, n);
+    for (const c of n.children) collect(c);
+  };
+  collect(section);
+  const elements = root.querySelectorAll("[data-key]");
+  for (const el of elements) {
+    const key = el.getAttribute("data-key");
+    if (nodes[key]) continue;
+    const node = byKey.get(key);
+    const r = el.getBoundingClientRect();
+    const g = { top: r.top - base.top, height: r.height, left: r.left - base.left, width: r.width };
+    if (node) {
+      const def = opts.registry.get(node.type);
+      const measure = def?.measure ?? (node.flow.split === "lines" ? "text" : node.flow.split === "rows" ? "table" : "none");
+      if (measure === "text") g.lines = readLineBoxes(el, base.top, g.top + g.height);
+      else if (measure === "table") g.rows = readTableRows(el, base.top);
+    }
+    nodes[key] = g;
+  }
+  const sectionRect = root.firstElementChild?.getBoundingClientRect();
+  const height = sectionRect ? sectionRect.height : base.height;
+  return { height, width: base.width, nodes };
+}
+function readLineBoxes(el, baseTop, nodeBottom) {
+  const container = el.querySelector("[data-part='text']") ?? el;
+  const doc = el.ownerDocument;
+  const rects = [];
+  const walker = doc.createTreeWalker(container, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (n) => {
+      if (n.nodeType === Node.TEXT_NODE) return (n.textContent ?? "").trim().length ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+      const tag = n.tagName;
+      if (tag === "BR" || tag === "IMG" || tag === "SVG") return NodeFilter.FILTER_ACCEPT;
+      const e = n;
+      if (e.classList?.contains("bp-p--empty")) return NodeFilter.FILTER_ACCEPT;
+      return NodeFilter.FILTER_SKIP;
+    }
+  });
+  let cur = walker.nextNode();
+  while (cur) {
+    if (cur.nodeType === Node.TEXT_NODE) {
+      const range = doc.createRange();
+      range.selectNodeContents(cur);
+      for (const r of range.getClientRects()) if (r.height > 0 && r.width > 0) rects.push({ top: r.top - baseTop, bottom: r.bottom - baseTop });
+    } else {
+      const r = cur.getBoundingClientRect();
+      if (r.height > 0) rects.push({ top: r.top - baseTop, bottom: r.bottom - baseTop });
+    }
+    cur = walker.nextNode();
+  }
+  if (rects.length === 0) return [];
+  rects.sort((a, b) => a.top - b.top || a.bottom - b.bottom);
+  const lines = [];
+  for (const r of rects) {
+    const last = lines[lines.length - 1];
+    if (last && r.top < last.bottom - 0.5) {
+      last.top = Math.min(last.top, r.top);
+      last.bottom = Math.max(last.bottom, r.bottom);
+    } else lines.push({ ...r });
+  }
+  const out = [];
+  for (let i = 0; i < lines.length - 1; i++) out.push(round2((lines[i].bottom + lines[i + 1].top) / 2));
+  out.push(round2(nodeBottom));
+  return out;
+}
+function readTableRows(el, baseTop) {
+  const table = el.querySelector("table.bp-table");
+  if (!table) return [];
+  const rows = [];
+  const read = (selector, kind) => {
+    for (const tr of table.querySelectorAll(`:scope > ${selector} > tr`)) {
+      const r = tr.getBoundingClientRect();
+      rows.push({ top: round2(r.top - baseTop), height: round2(r.height), kind });
+    }
+  };
+  read("thead", "header");
+  read("tbody", "body");
+  read("tfoot", "footer");
+  return rows;
+}
+function round2(n) {
+  return Math.round(n * 100) / 100;
+}
+
+// src/layout.ts
+import {
+  computePageGeometry,
+  mergeTheme,
+  resolveValue,
+  paginate,
+  resolveTemplate,
+  renderNode as renderNode2,
+  h,
+  walkVNodes
+} from "@broadpaper/core";
+function indexNodes(doc) {
+  const map = /* @__PURE__ */ new Map();
+  const visit = (n) => {
+    map.set(n.key, n);
+    n.children.forEach(visit);
+  };
+  for (const s of doc.body) visit(s);
+  for (const s of doc.header.default) visit(s);
+  for (const s of doc.header.firstPage ?? []) visit(s);
+  for (const s of doc.footer.default) visit(s);
+  for (const s of doc.footer.firstPage ?? []) visit(s);
+  return map;
+}
+function prepareLayout(input) {
+  const mode = input.mode ?? "preview";
+  const theme = mergeTheme(input.theme);
+  const template = input.template;
+  const page = computePageGeometry(template.page);
+  const now = input.now ?? /* @__PURE__ */ new Date();
+  const format = {
+    locale: input.locale ?? template.settings?.locale ?? "en-GB",
+    currency: input.currency ?? template.settings?.currency ?? "GBP",
+    timeZone: input.timeZone ?? template.settings?.timeZone,
+    now
+  };
+  const resolved = resolveTemplate({
+    template,
+    registry: input.registry,
+    theme,
+    dataSources: input.dataSources,
+    data: input.data,
+    sampleData: input.sampleData,
+    mode,
+    now,
+    locale: format.locale,
+    currency: format.currency,
+    timeZone: format.timeZone,
+    designIterations: input.designIterations,
+    allowStyleOverrides: input.allowStyleOverrides
+  });
+  const baseOpts = {
+    registry: input.registry,
+    theme,
+    styles: template.styles,
+    mode,
+    page: { number: 1, total: 1 },
+    format,
+    width: page.contentWidth,
+    decorate: input.decorate
+  };
+  const regionSections = [...resolved.header.default, ...resolved.header.firstPage ?? [], ...resolved.footer.default, ...resolved.footer.firstPage ?? []];
+  return { input, mode, theme, template, page, format, resolved, baseOpts, regionSections };
+}
+function finishLayout(p, geometry, regionGeometry) {
+  const { input, mode, theme, template, page, format, resolved, baseOpts } = p;
+  const paged = paginate({ document: resolved, geometry, page, minPages: input.minPages ?? template.page.minPages ?? 1, regionGeometry });
+  const nodesByKey = indexNodes(resolved);
+  const warnings = [
+    ...resolved.warnings.map((w) => ({ source: "resolve", message: w.message, nodeId: w.nodeId })),
+    ...paged.warnings.map((w) => ({ source: "layout", message: w.message, nodeId: w.nodeId, page: w.page, code: w.code }))
+  ];
+  const renderPage = (index) => {
+    const p2 = paged.pages[index];
+    if (!p2) throw new Error(`Page ${index} does not exist`);
+    const opts = { ...baseOpts, page: { number: p2.number, total: paged.totalPages } };
+    return composePage(p2.index, p2.number, paged.totalPages, p2.first, resolved, paged, page, opts, nodesByKey, regionGeometry, theme, template.page.background, geometry);
+  };
+  return {
+    resolved,
+    paged,
+    geometry,
+    regionGeometry,
+    page,
+    theme,
+    format,
+    mode,
+    warnings,
+    nodesByKey,
+    renderPage,
+    renderPages: () => paged.pages.map((_, i) => renderPage(i))
+  };
+}
+function layoutDocument(input, measurer) {
+  const p = prepareLayout(input);
+  measurer.setOptions?.(p.baseOpts);
+  const geometry = measurer.measure(p.resolved.body, p.page.contentWidth);
+  const regionGeometry = p.regionSections.length ? measurer.measure(p.regionSections, p.page.contentWidth) : {};
+  return finishLayout(p, geometry, regionGeometry);
+}
+async function layoutDocumentAsync(input, measurer) {
+  const p = prepareLayout(input);
+  measurer.setOptions?.(p.baseOpts);
+  const geometry = await measurer.measure(p.resolved.body, p.page.contentWidth);
+  const regionGeometry = p.regionSections.length ? await measurer.measure(p.regionSections, p.page.contentWidth) : {};
+  return finishLayout(p, geometry, regionGeometry);
+}
+function windowSection(root, geom, from, to) {
+  if (!geom) return root;
+  const visit = (v) => {
+    const key = v.props["data-key"];
+    if (typeof key === "string") {
+      const g = geom.nodes[key];
+      if (g) {
+        const bottom = g.top + g.height;
+        if (bottom <= from - 0.01 || g.top >= to + 0.01) {
+          const existing = v.props.style;
+          const style = typeof existing === "string" ? `${existing};height:${g.height}px;overflow:hidden` : { ...existing ?? {}, height: `${g.height}px`, overflow: "hidden" };
+          return { ...v, props: { ...v.props, style, "data-culled": "" }, children: [] };
+        }
+        if (g.rows && g.rows.length) return { ...v, children: v.children.map((c) => typeof c === "string" ? c : windowTable(c, g.rows, from, to)) };
+      }
+    }
+    return { ...v, children: v.children.map((c) => typeof c === "string" ? c : visit(c)) };
+  };
+  return visit(root);
+}
+function windowTable(v, rows, from, to) {
+  if (v.tag === "table") {
+    const body = rows.filter((r) => r.kind === "body");
+    return {
+      ...v,
+      children: v.children.map((c) => {
+        if (typeof c === "string" || c.tag !== "tbody") return c;
+        const trs = c.children.filter((x) => typeof x !== "string" && x.tag === "tr");
+        if (trs.length !== body.length) return c;
+        let leading = 0;
+        let trailing = 0;
+        const kept = [];
+        for (let i = 0; i < trs.length; i++) {
+          const r = body[i];
+          const bottom = r.top + r.height;
+          if (bottom <= from + 0.01) leading += r.height;
+          else if (r.top >= to - 0.01) trailing += r.height;
+          else kept.push(trs[i]);
+        }
+        const spacer = (height) => h("tr", { class: "bp-table__spacer" }, h("td", { colspan: "100", style: { padding: "0", border: "0", height: `${height}px` } }));
+        return { ...c, children: [...leading > 0 ? [spacer(leading)] : [], ...kept, ...trailing > 0 ? [spacer(trailing)] : []] };
+      })
+    };
+  }
+  return { ...v, children: v.children.map((c) => typeof c === "string" ? c : windowTable(c, rows, from, to)) };
+}
+function renderTableHeader(node, opts, width) {
+  const full = renderNode2(node, opts, width);
+  if (!full) return null;
+  walkVNodes(full, (v) => {
+    if (v.tag === "table") {
+      v.children = v.children.filter((c) => typeof c === "string" || c.tag === "colgroup" || c.tag === "thead");
+      return false;
+    }
+    return true;
+  });
+  const props = { ...full.props };
+  delete props.style;
+  full.props = { ...props, class: [String(props.class ?? ""), "bp-repeat-header__node"] };
+  return full;
+}
+function composePage(index, number, total, first, resolved, paged, page, opts, nodesByKey, regionGeometry, theme, pageBackground, geometry) {
+  const p = paged.pages[index];
+  const pageStyle = {
+    width: `${page.width}px`,
+    height: `${page.height}px`,
+    background: resolveValue(pageBackground, theme, "#ffffff")
+  };
+  const region = (sections, top, height, name, align) => {
+    if (!sections || sections.length === 0 || height <= 0) return null;
+    const total2 = sections.reduce((a, s) => a + (regionGeometry[s.key]?.height ?? 0), 0);
+    const offset = align === "bottom" ? Math.max(0, height - total2) : 0;
+    return h(
+      "div",
+      { class: ["bp-page__region", `bp-page__${name}`], "data-region": name, style: { top: `${top}px`, left: `${page.margins.left}px`, width: `${page.contentWidth}px`, height: `${height}px` } },
+      h("div", { class: "bp-page__region-inner", style: { position: "absolute", top: `${offset}px`, left: "0", width: "100%" } }, sections.map((s) => renderNode2(s, opts, page.contentWidth)))
+    );
+  };
+  const headerSections = first && resolved.header.firstPage ? resolved.header.firstPage : resolved.header.default;
+  const footerSections = first && resolved.footer.firstPage ? resolved.footer.firstPage : resolved.footer.default;
+  const windowed = (section, from, to) => {
+    const v = renderNode2(section, opts, page.contentWidth);
+    if (!v) return null;
+    return windowSection(v, geometry?.[section.key], from, to);
+  };
+  const fragments = p.fragments.map((f) => {
+    const section = nodesByKey.get(f.sectionKey);
+    if (!section) return null;
+    const extra = f.repeatHeaders.reduce((a, r) => a + r.height, 0);
+    const headers = f.repeatHeaders.map((r) => {
+      const t = nodesByKey.get(r.tableKey);
+      const v = t ? renderTableHeader(t, opts, r.width) : null;
+      return h("div", { class: "bp-repeat-header", "data-table": r.tableKey, style: { left: `${r.left}px`, width: `${r.width}px`, height: `${r.height}px` } }, v);
+    });
+    return h(
+      "div",
+      { class: ["bp-fragment", f.continued && "bp-fragment--continued", f.continues && "bp-fragment--continues"], "data-section": f.sectionKey, "data-from": String(f.from), "data-to": String(f.to), style: { top: `${f.y}px`, height: `${f.height}px` } },
+      headers,
+      h("div", { class: "bp-fragment__clip", style: { top: `${extra}px`, height: `${f.to - f.from}px` } }, h("div", { class: "bp-fragment__content", style: { "margin-top": `${-f.from}px`, width: `${page.contentWidth}px` } }, windowed(section, f.from, f.to)))
+    );
+  });
+  return h(
+    "div",
+    { class: ["bp-page", first && "bp-page--first"], "data-page": String(number), "data-page-index": String(index), style: pageStyle, "aria-label": `Page ${number} of ${total}` },
+    region(headerSections, page.headerTop, page.headerHeight, "header", "top"),
+    h("div", { class: "bp-page__body", "data-region": "body", style: { top: `${page.contentTop}px`, left: `${page.margins.left}px`, width: `${page.contentWidth}px`, height: `${page.contentHeight}px` } }, fragments),
+    region(footerSections, page.footerTop, page.footerHeight, "footer", "bottom")
+  );
+}
+
+// src/preview.ts
+import { h as h2, toHtml, escapeHtml } from "@broadpaper/core";
+
+// src/styles.ts
+var DOCUMENT_CSS = `
+.bp-doc, .bp-doc * { box-sizing: border-box; }
+.bp-doc { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; }
+.bp-doc p { margin: 0; }
+.bp-doc h1, .bp-doc h2, .bp-doc h3, .bp-doc h4 { margin: 0; font-weight: inherit; }
+.bp-doc img { max-width: 100%; }
+.bp-doc a { color: inherit; }
+.bp-doc table { border-spacing: 0; }
+.bp-doc ul.bp-list, .bp-doc ol.bp-list { margin: 0; padding-left: 1.4em; }
+.bp-doc .bp-list li { margin: 0.15em 0; }
+.bp-doc .bp-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; background: rgba(0,0,0,0.05); padding: 0 3px; border-radius: 3px; }
+.bp-doc .bp-p--empty { min-height: 1em; }
+
+.bp-page { position: relative; overflow: hidden; background: #fff; color: #1a1d21; }
+.bp-page__region { position: absolute; overflow: hidden; }
+.bp-page__body { position: absolute; overflow: hidden; }
+.bp-fragment { position: absolute; left: 0; width: 100%; overflow: hidden; }
+.bp-fragment__clip { position: absolute; left: 0; right: 0; overflow: hidden; }
+.bp-repeat-header { position: absolute; top: 0; overflow: hidden; }
+.bp-repeat-header .bp-table { table-layout: fixed; }
+
+.bp-stack { display: flex; flex-direction: column; }
+.bp-stack > .bp-node { min-width: 0; }
+.bp-node--hidden > * { opacity: 0.4; }
+.bp-node--placeholder { opacity: 0.85; }
+.bp-empty-section, .bp-empty-column { display: none; }
+.bp-galley { position: absolute; left: -100000px; top: 0; visibility: hidden; pointer-events: none; }
+
+.bp-table { width: 100%; border-collapse: collapse; }
+.bp-table td, .bp-table th { word-wrap: break-word; overflow-wrap: anywhere; }
+.bp-chart__svg text { user-select: none; }
+.bp-page-break--print { height: 0; }
+
+/* --- design mode affordances (only when .bp-doc--design) --- */
+.bp-doc--design .bp-token { display: inline; padding: 0 5px; margin: 0 1px; border-radius: 4px; background: rgba(79, 111, 165, 0.14); color: #2f4f7f; font-size: 0.92em; font-weight: 500; white-space: nowrap; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
+.bp-doc--design .bp-token--lg { font-size: 0.65em; vertical-align: middle; }
+.bp-doc--design .bp-token__value { opacity: 0.65; margin-left: 4px; font-weight: 400; }
+.bp-doc--design .bp-cell--bound { text-decoration: underline dotted rgba(79,111,165,0.45); text-underline-offset: 3px; text-decoration-thickness: 1px; }
+.bp-doc--design .bp-placeholder-text { color: #9aa1ab; font-style: italic; }
+.bp-doc--design .bp-empty-section { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 96px; border: 1.5px dashed #cfd5dd; border-radius: 8px; color: #6b7280; font-size: 12px; font-family: Inter, system-ui, sans-serif; background: #fafbfc; }
+.bp-doc--design .bp-empty-section__title { font-weight: 600; color: #4b5563; }
+.bp-doc--design .bp-empty-column { display: flex; align-items: center; justify-content: center; min-height: 56px; border: 1.5px dashed #d4d9e0; border-radius: 6px; color: #9aa1ab; font-size: 11px; font-family: Inter, system-ui, sans-serif; }
+.bp-doc--design .bp-spacer--design { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,0.04) 6px 8px); border-radius: 3px; }
+.bp-doc--design .bp-page-break { display: flex; align-items: center; gap: 8px; margin: 2px 0; color: #b4541f; font-size: 9.5px; font-family: Inter, system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; }
+.bp-doc--design .bp-page-break::before, .bp-doc--design .bp-page-break::after { content: ""; flex: 1; border-top: 2px dashed rgba(180, 84, 31, 0.5); }
+.bp-doc--design .bp-page-break__label { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-weight: 600; background: rgba(180, 84, 31, 0.12); white-space: nowrap; }
+
+/* Structural blocks draw nothing of their own, so design mode outlines them.
+   The label is absolutely positioned: naming a box must not resize it. */
+.bp-doc--design .bp-container,
+.bp-doc--design .bp-keep-together { position: relative; outline: 1px dashed rgba(79, 111, 165, 0.32); outline-offset: 1px; border-radius: 3px; }
+.bp-doc--design .bp-container::before,
+.bp-doc--design .bp-keep-together::before {
+  content: "Container"; position: absolute; top: -6px; left: 8px; z-index: 1; padding: 0 4px;
+  background: #fff; color: #7c8697; font-family: Inter, system-ui, sans-serif; font-size: 8.5px;
+  font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; pointer-events: none;
+}
+.bp-doc--design .bp-keep-together::before { content: "Keep together"; }
+.bp-doc--design .bp-repeater__badge, .bp-doc--design .bp-conditional__badge, .bp-doc--design .bp-table__badge, .bp-doc--design .bp-chart__badge { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 4px; padding: 1px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em; font-family: Inter, system-ui, sans-serif; background: rgba(79,111,165,0.12); color: #2f4f7f; user-select: none; }
+.bp-doc--design .bp-conditional--false .bp-conditional__badge { background: rgba(199,125,10,0.14); color: #8a5a06; }
+.bp-doc--design .bp-conditional--false > .bp-stack { opacity: 0.45; }
+.bp-doc--design .bp-repeater { border-left: 2px dashed rgba(79,111,165,0.35); padding-left: 8px; }
+.bp-doc--design .bp-conditional { border-left: 2px dashed rgba(199,125,10,0.45); padding-left: 8px; }
+.bp-doc--design .bp-image-placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f1f3f6, #e6e9ee); color: #6b7280; font-size: 11px; font-family: Inter, system-ui, sans-serif; border: 1px dashed #cfd5dd; }
+.bp-doc--design .bp-logo-placeholder { display: inline-flex; align-items: center; padding: 0 12px; border: 1px dashed #cfd5dd; border-radius: 4px; color: #6b7280; font-size: 11px; font-family: Inter, system-ui, sans-serif; }
+.bp-doc--design .bp-node--locked { outline: 1px dashed rgba(0,0,0,0.15); }
+
+@media print {
+  .bp-page { break-after: page; page-break-after: always; box-shadow: none !important; margin: 0 !important; }
+  .bp-page:last-child { break-after: auto; page-break-after: auto; }
+}
+`;
+function fontFaceCss(theme) {
+  return (theme.fonts ?? []).map((f) => {
+    const src = (Array.isArray(f.src) ? f.src : [f.src]).map((u) => `url("${u.replace(/"/g, "%22")}")`).join(", ");
+    return `@font-face{font-family:"${f.family.replace(/"/g, "")}";src:${src};font-weight:${f.weight ?? 400};font-style:${f.style ?? "normal"};font-display:${f.display ?? "block"};}`;
+  }).join("\n");
+}
+
+// src/preview.ts
+async function waitForFonts(doc, families = []) {
+  const fonts = doc.fonts;
+  if (!fonts) return;
+  try {
+    await Promise.all(families.map((f) => fonts.load(`12px "${f}"`).catch(() => void 0)));
+    await fonts.ready;
+  } catch {
+  }
+}
+function createReportPreview(container, options) {
+  const doc = container.ownerDocument;
+  ensureStyle(doc, "bp-document-css", DOCUMENT_CSS);
+  const measurer = new DomMeasurer(doc);
+  let current = options;
+  let destroyed = false;
+  const root = doc.createElement("div");
+  root.className = `bp-doc bp-preview ${options.className ?? ""}`.trim();
+  container.appendChild(root);
+  const api = {
+    result: null,
+    async update(input) {
+      current = { ...current, ...input };
+      const theme = current.theme;
+      ensureStyle(doc, "bp-theme-fonts", theme ? fontFaceCss({ ...theme, id: theme.id ?? "t", name: theme.name ?? "", typography: theme.typography ?? { headingFont: "", bodyFont: "" }, colors: theme.colors ?? {} }) : "");
+      await waitForFonts(doc, (theme?.fonts ?? []).map((f) => f.family));
+      if (destroyed) return api.result;
+      const result = layoutDocument(current, measurer);
+      api.result = result;
+      const gap = current.pageGap ?? 24;
+      const zoom = current.zoom ?? 1;
+      root.classList.toggle("bp-doc--design", result.mode === "design");
+      const pages = result.renderPages().map((p, i) => h2("div", { class: "bp-preview__page", style: { "margin-bottom": i < result.paged.totalPages - 1 ? `${gap}px` : "0", "box-shadow": "0 1px 3px rgba(16,24,40,0.12), 0 8px 24px rgba(16,24,40,0.08)" } }, p));
+      const inner = h2("div", { class: "bp-preview__pages", style: { transform: zoom !== 1 ? `scale(${zoom})` : void 0, "transform-origin": "top center", width: `${result.page.width}px`, margin: "0 auto" } }, pages);
+      mountVNodes(root, [inner]);
+      return result;
+    },
+    goToPage(number) {
+      const el = root.querySelector(`[data-page="${number}"]`);
+      el?.scrollIntoView({ behavior: "smooth", block: "start" });
+    },
+    destroy() {
+      destroyed = true;
+      measurer.destroy();
+      root.remove();
+    }
+  };
+  void api.update({});
+  return api;
+}
+function documentToHtml(result, opts = {}) {
+  const pages = result.renderPages();
+  const { width, height } = result.page;
+  const fonts = fontFaceCss(result.theme);
+  const css = `${fonts}
+${DOCUMENT_CSS}
+@page{size:${width}px ${height}px;margin:0;}
+html,body{margin:0;padding:0;background:#fff;}
+.bp-page{break-after:page;page-break-after:always;}
+.bp-page:last-child{break-after:auto;page-break-after:auto;}
+${opts.extraCss ?? ""}`;
+  const meta = [
+    `<meta charset="utf-8">`,
+    `<meta name="viewport" content="width=${width}">`,
+    `<meta name="generator" content="BroadPaper">`,
+    opts.author ? `<meta name="author" content="${escapeHtml(opts.author)}">` : "",
+    opts.subject ? `<meta name="description" content="${escapeHtml(opts.subject)}">` : "",
+    opts.keywords?.length ? `<meta name="keywords" content="${escapeHtml(opts.keywords.join(", "))}">` : ""
+  ].join("\n");
+  const body = pages.map((p) => toHtml(p)).join("\n");
+  return `<!doctype html>
+<html lang="${escapeHtml(opts.lang ?? "en")}">
+<head>
+${meta}
+<title>${escapeHtml(opts.title ?? "Report")}</title>
+<style>${css}</style>
+</head>
+<body class="bp-doc${opts.design ? " bp-doc--design" : ""}" data-pages="${result.paged.totalPages}">
+${body}
+</body>
+</html>`;
+}
+
+// src/chart-interactions.ts
+var STYLE_ID = "bp-chart-interactions";
+var CSS = `
+.bp-chart [data-bp-hit] { cursor: default; transition: opacity 120ms ease, filter 120ms ease; }
+.bp-chart--active [data-bp-hit] { opacity: 0.45; }
+.bp-chart--active [data-bp-hit][data-bp-on] { opacity: 1; filter: brightness(1.06); }
+.bp-chart [data-bp-hit]:focus-visible { outline: none; }
+.bp-chart [data-bp-hit][data-bp-focus] { stroke: #111827; stroke-width: 2; paint-order: stroke; }
+.bp-chart-tip {
+  position: fixed; z-index: 2147483000; pointer-events: none;
+  max-width: 260px; padding: 6px 9px; border-radius: 6px;
+  background: #111827; color: #fff;
+  font: 12px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
+  opacity: 0; transform: translateY(2px); transition: opacity 90ms ease, transform 90ms ease;
+}
+.bp-chart-tip[data-bp-shown] { opacity: 1; transform: none; }
+.bp-chart-tip__row { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
+.bp-chart-tip__row + .bp-chart-tip__row { margin-top: 2px; }
+.bp-chart-tip__swatch { width: 8px; height: 8px; border-radius: 2px; flex: none; align-self: center; }
+.bp-chart-tip__label { color: #cbd5e1; }
+.bp-chart-tip__value { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
+.bp-chart-tip__head { font-weight: 600; margin-bottom: 3px; }
+@media (prefers-reduced-motion: reduce) {
+  .bp-chart-tip, .bp-chart [data-bp-hit] { transition: none; }
+}
+@media print { .bp-chart-tip { display: none !important; } }
+`;
+function ensureStyle2(doc) {
+  if (doc.getElementById(STYLE_ID)) return;
+  const el = doc.createElement("style");
+  el.id = STYLE_ID;
+  el.textContent = CSS;
+  doc.head.appendChild(el);
+}
+function defaultTooltip(hit, ctx, doc) {
+  const box = doc.createElement("div");
+  const head = doc.createElement("div");
+  head.className = "bp-chart-tip__head";
+  head.textContent = hit.category || ctx.title;
+  box.appendChild(head);
+  const rows = ctx.type === "pie" || ctx.type === "donut" ? [hit] : ctx.siblings;
+  for (const r of rows) {
+    const row = doc.createElement("div");
+    row.className = "bp-chart-tip__row";
+    const swatch = doc.createElement("span");
+    swatch.className = "bp-chart-tip__swatch";
+    swatch.style.background = r.color;
+    row.appendChild(swatch);
+    const label = doc.createElement("span");
+    label.className = "bp-chart-tip__label";
+    label.textContent = ctx.type === "pie" || ctx.type === "donut" ? r.share !== void 0 ? `${Math.round(r.share * 1e3) / 10}%` : "" : r.series;
+    row.appendChild(label);
+    const value = doc.createElement("span");
+    value.className = "bp-chart-tip__value";
+    value.textContent = r.value === null ? "\u2014" : r.formatted;
+    if (r === hit && rows.length > 1) value.style.textDecoration = "underline";
+    row.appendChild(value);
+    box.appendChild(row);
+  }
+  return box;
+}
+function enableChartInteractions(root, options = {}) {
+  const doc = root.ownerDocument;
+  if (!doc?.defaultView) return () => void 0;
+  ensureStyle2(doc);
+  const portal = options.portal ?? doc.body;
+  const tip = doc.createElement("div");
+  tip.className = "bp-chart-tip";
+  tip.setAttribute("role", "tooltip");
+  tip.setAttribute("aria-hidden", "true");
+  let tipMounted = false;
+  const cleanups = [];
+  const hideTip = () => {
+    tip.removeAttribute("data-bp-shown");
+    tip.setAttribute("aria-hidden", "true");
+  };
+  const showTip = (content, anchor) => {
+    if (!tipMounted) {
+      portal.appendChild(tip);
+      tipMounted = true;
+    }
+    tip.replaceChildren(typeof content === "string" ? doc.createTextNode(content) : content);
+    tip.setAttribute("aria-hidden", "false");
+    tip.setAttribute("data-bp-shown", "");
+    const box = tip.getBoundingClientRect();
+    const view = doc.defaultView;
+    const gap = 10;
+    let left = anchor.left + anchor.width / 2 - box.width / 2;
+    let top = anchor.top - box.height - gap;
+    if (top < 4) top = anchor.bottom + gap;
+    left = Math.max(4, Math.min(left, view.innerWidth - box.width - 4));
+    top = Math.max(4, Math.min(top, view.innerHeight - box.height - 4));
+    tip.style.left = `${Math.round(left)}px`;
+    tip.style.top = `${Math.round(top)}px`;
+  };
+  for (const chart of Array.from(root.querySelectorAll(".bp-chart[data-bp-chart]"))) {
+    if (chart.dataset.bpInteractive === "1") continue;
+    let payload;
+    try {
+      payload = JSON.parse(chart.dataset.bpChart ?? "");
+    } catch {
+      continue;
+    }
+    if (!Array.isArray(payload.hits) || payload.hits.length === 0) continue;
+    if (options.onChart?.(chart, payload) === false) continue;
+    chart.dataset.bpInteractive = "1";
+    const marks = Array.from(chart.querySelectorAll("[data-bp-hit]"));
+    if (marks.length === 0) continue;
+    const byCategory = /* @__PURE__ */ new Map();
+    for (const hit of payload.hits) {
+      const list = byCategory.get(hit.categoryIndex) ?? [];
+      list.push(hit);
+      byCategory.set(hit.categoryIndex, list);
+    }
+    const activate = (mark, hit, focus) => {
+      chart.classList.add("bp-chart--active");
+      const siblings = byCategory.get(hit.categoryIndex) ?? [hit];
+      for (const m of marks) {
+        const h3 = payload.hits[Number(m.getAttribute("data-bp-hit"))];
+        if (h3 && siblings.includes(h3)) m.setAttribute("data-bp-on", "");
+        else m.removeAttribute("data-bp-on");
+        m.removeAttribute("data-bp-focus");
+      }
+      if (focus) mark.setAttribute("data-bp-focus", "");
+      const content = options.tooltip?.(hit, { type: payload.type, title: payload.title, siblings }) ?? defaultTooltip(hit, { type: payload.type, title: payload.title, siblings }, doc);
+      showTip(content, mark.getBoundingClientRect());
+    };
+    const deactivate = () => {
+      chart.classList.remove("bp-chart--active");
+      for (const m of marks) {
+        m.removeAttribute("data-bp-on");
+        m.removeAttribute("data-bp-focus");
+      }
+      hideTip();
+    };
+    for (const mark of marks) {
+      const hit = payload.hits[Number(mark.getAttribute("data-bp-hit"))];
+      if (!hit) continue;
+      mark.setAttribute("tabindex", "0");
+      mark.setAttribute("role", "img");
+      const share = hit.share !== void 0 ? `, ${Math.round(hit.share * 1e3) / 10}%` : "";
+      mark.setAttribute("aria-label", `${hit.category}${hit.series ? `, ${hit.series}` : ""}: ${hit.value === null ? "no value" : hit.formatted}${share}`);
+      const onEnter = () => activate(mark, hit, false);
+      const onFocus = () => activate(mark, hit, true);
+      const onKey = (e) => {
+        const key = e.key;
+        if (key === "Enter" || key === " ") {
+          e.preventDefault();
+          options.onSelect?.(hit, e);
+        } else if (key === "Escape") deactivate();
+      };
+      const onClick = (e) => options.onSelect?.(hit, e);
+      mark.addEventListener("pointerenter", onEnter);
+      mark.addEventListener("focus", onFocus);
+      mark.addEventListener("keydown", onKey);
+      if (options.onSelect) mark.addEventListener("click", onClick);
+      cleanups.push(() => {
+        mark.removeEventListener("pointerenter", onEnter);
+        mark.removeEventListener("focus", onFocus);
+        mark.removeEventListener("keydown", onKey);
+        mark.removeEventListener("click", onClick);
+        mark.removeAttribute("tabindex");
+        mark.removeAttribute("role");
+        mark.removeAttribute("aria-label");
+        mark.removeAttribute("data-bp-on");
+        mark.removeAttribute("data-bp-focus");
+      });
+    }
+    chart.addEventListener("pointerleave", deactivate);
+    chart.addEventListener("focusout", (e) => {
+      if (!chart.contains(e.relatedTarget)) deactivate();
+    });
+    cleanups.push(() => {
+      chart.classList.remove("bp-chart--active");
+      delete chart.dataset.bpInteractive;
+    });
+  }
+  const onScroll = () => hideTip();
+  doc.addEventListener("scroll", onScroll, true);
+  cleanups.push(() => doc.removeEventListener("scroll", onScroll, true));
+  return () => {
+    for (const c of cleanups.splice(0)) c();
+    tip.remove();
+    tipMounted = false;
+  };
+}
+
+// src/client.ts
+import { resolveWatermark, watermarkCss } from "@broadpaper/license";
+async function printReport(result, opts = {}) {
+  const mark = await resolveWatermark(opts.license !== void 0 ? { license: opts.license } : {});
+  const html = documentToHtml(result, { title: opts.title, ...mark ? { extraCss: watermarkCss(mark) } : {} });
+  const frame = document.createElement("iframe");
+  frame.setAttribute("aria-hidden", "true");
+  frame.style.position = "fixed";
+  frame.style.right = "0";
+  frame.style.bottom = "0";
+  frame.style.width = "0";
+  frame.style.height = "0";
+  frame.style.border = "0";
+  document.body.appendChild(frame);
+  const doc = frame.contentDocument;
+  doc.open();
+  doc.write(html);
+  doc.close();
+  const win = frame.contentWindow;
+  const cleanup = () => {
+    setTimeout(() => frame.remove(), 1e3);
+    opts.onDone?.();
+  };
+  win.addEventListener("afterprint", cleanup, { once: true });
+  const go = () => {
+    win.focus();
+    win.print();
+  };
+  const fonts = doc.fonts;
+  if (fonts?.ready) fonts.ready.then(() => setTimeout(go, 50)).catch(go);
+  else setTimeout(go, 100);
+}
+function createPdfClient(opts) {
+  const f = opts.fetch ?? fetch;
+  return {
+    async render(req) {
+      const res = await f(`${opts.baseUrl.replace(/\/$/, "")}/render`, {
+        method: "POST",
+        headers: { "content-type": "application/json", ...opts.token ? { authorization: `Bearer ${opts.token}` } : {} },
+        body: JSON.stringify({ ...req, now: req.now?.toISOString() })
+      });
+      if (!res.ok) {
+        let message = `PDF service responded ${res.status}`;
+        try {
+          const j = await res.json();
+          if (j.error) message = j.error;
+        } catch {
+        }
+        throw new Error(message);
+      }
+      return { blob: await res.blob(), pages: Number(res.headers.get("x-broadpaper-pages") ?? 0), warnings: Number(res.headers.get("x-broadpaper-warnings") ?? 0) };
+    },
+    async health() {
+      try {
+        const res = await f(`${opts.baseUrl.replace(/\/$/, "")}/health`);
+        return res.ok;
+      } catch {
+        return false;
+      }
+    }
+  };
+}
+function downloadBlob(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 5e3);
+}
+
+// src/viewer.ts
+var VIEWER_CSS = `
+.bp-viewer { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; background: #f1f2f4; color: #1a1d21; font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
+.bp-viewer *, .bp-viewer *::before, .bp-viewer *::after { box-sizing: border-box; }
+.bp-viewer__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 24px 16px; scroll-behavior: smooth; }
+.bp-viewer__stage { margin: 0 auto; transform-origin: top left; }
+.bp-viewer .bp-preview__page { box-shadow: 0 1px 3px rgba(16,24,40,0.14), 0 10px 28px rgba(16,24,40,0.10); }
+
+.bp-viewer__bar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #fff; border-bottom: 1px solid #e2e5ea; }
+.bp-viewer__spacer { flex: 1 1 auto; }
+.bp-viewer__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; border: 1px solid #e2e5ea; border-radius: 6px; background: #fff; color: inherit; font: inherit; cursor: pointer; }
+.bp-viewer__btn:hover:not(:disabled) { background: #f5f6f8; }
+.bp-viewer__btn:disabled { opacity: 0.4; cursor: default; }
+.bp-viewer__btn:focus-visible, .bp-viewer__field:focus-visible { outline: 2px solid #4a6fa5; outline-offset: 1px; }
+.bp-viewer__count { font-variant-numeric: tabular-nums; white-space: nowrap; }
+.bp-viewer__field { width: 3.5em; height: 28px; padding: 0 6px; border: 1px solid #e2e5ea; border-radius: 6px; font: inherit; text-align: right; font-variant-numeric: tabular-nums; }
+
+/* The reader's own print of the view. The page boxes are already exact, so all
+   this has to do is get the ground and the chrome out of the way. */
+@media print {
+  .bp-viewer { background: #fff; height: auto; }
+  .bp-viewer__bar { display: none; }
+  .bp-viewer__scroll { overflow: visible; padding: 0; }
+  .bp-viewer__stage { transform: none !important; width: auto !important; }
+  .bp-viewer .bp-preview__page { box-shadow: none; margin: 0 !important; break-after: page; page-break-after: always; }
+  .bp-viewer .bp-preview__page:last-child { break-after: auto; page-break-after: auto; }
+}
+
+@media (prefers-color-scheme: dark) {
+  .bp-viewer { background: #22252a; color: #e8eaed; }
+  .bp-viewer__bar { background: #2b2f36; border-bottom-color: #3a3f47; }
+  .bp-viewer__btn, .bp-viewer__field { background: #2b2f36; border-color: #3a3f47; color: inherit; }
+  .bp-viewer__btn:hover:not(:disabled) { background: #343941; }
+}
+`;
+var clamp = (n, lo, hi) => n < lo ? lo : n > hi ? hi : n;
+function button(doc, label, title) {
+  const b = doc.createElement("button");
+  b.type = "button";
+  b.className = "bp-viewer__btn";
+  b.textContent = label;
+  b.title = title;
+  b.setAttribute("aria-label", title);
+  return b;
+}
+function createReportViewer(container, options) {
+  const doc = container.ownerDocument;
+  const win = doc.defaultView;
+  ensureStyle(doc, "bp-viewer-css", VIEWER_CSS);
+  let opts = { ...options };
+  let destroyed = false;
+  let page = 1;
+  let zoom = 1;
+  let stopInteractions = null;
+  const root = doc.createElement("div");
+  root.className = `bp-viewer ${opts.className ?? ""}`.trim();
+  const bar = doc.createElement("div");
+  bar.className = "bp-viewer__bar";
+  bar.setAttribute("role", "toolbar");
+  bar.setAttribute("aria-label", "Report controls");
+  const prev = button(doc, "\u2039", "Previous page");
+  const next = button(doc, "\u203A", "Next page");
+  const pageField = doc.createElement("input");
+  pageField.className = "bp-viewer__field";
+  pageField.type = "text";
+  pageField.inputMode = "numeric";
+  pageField.setAttribute("aria-label", "Page number");
+  const count = doc.createElement("span");
+  count.className = "bp-viewer__count";
+  const zoomOut = button(doc, "\u2212", "Zoom out");
+  const zoomIn = button(doc, "+", "Zoom in");
+  const zoomLabel = doc.createElement("button");
+  zoomLabel.type = "button";
+  zoomLabel.className = "bp-viewer__btn bp-viewer__count";
+  zoomLabel.title = "Fit to width";
+  const printBtn = button(doc, "Print", "Print or save as PDF");
+  const spacer = doc.createElement("span");
+  spacer.className = "bp-viewer__spacer";
+  bar.append(prev, pageField, count, next, spacer, zoomOut, zoomLabel, zoomIn, printBtn);
+  const scroll = doc.createElement("div");
+  scroll.className = "bp-viewer__scroll";
+  scroll.tabIndex = 0;
+  scroll.setAttribute("role", "region");
+  scroll.setAttribute("aria-label", opts.label ?? "Report");
+  const stage = doc.createElement("div");
+  stage.className = "bp-viewer__stage";
+  scroll.appendChild(stage);
+  if (opts.toolbar !== false) root.appendChild(bar);
+  root.appendChild(scroll);
+  container.appendChild(root);
+  const preview = createReportPreview(stage, { ...opts, mode: "preview", zoom: 1 });
+  function fitZoom() {
+    const result = preview.result;
+    if (!result) return 1;
+    const explicit = opts.zoom;
+    if (typeof explicit === "number") return explicit;
+    const fit = opts.fit ?? "width";
+    if (fit === "actual") return 1;
+    const styles = win?.getComputedStyle(scroll);
+    const padX = styles ? parseFloat(styles.paddingLeft || "0") + parseFloat(styles.paddingRight || "0") : 32;
+    const padY = styles ? parseFloat(styles.paddingTop || "0") + parseFloat(styles.paddingBottom || "0") : 48;
+    const availableWidth = scroll.clientWidth - padX;
+    if (!(availableWidth > 0)) return 1;
+    const byWidth = availableWidth / result.page.width;
+    if (fit === "width") {
+      return clamp(byWidth, 0.1, 1);
+    }
+    const availableHeight = scroll.clientHeight - padY;
+    if (!(availableHeight > 0)) return clamp(byWidth, 0.1, 1);
+    return clamp(Math.min(byWidth, availableHeight / result.page.height), 0.1, 1);
+  }
+  function applyZoom() {
+    zoom = fitZoom();
+    const result = preview.result;
+    stage.style.transform = zoom === 1 ? "" : `scale(${zoom})`;
+    if (result) {
+      const unscaled = stage.scrollHeight;
+      stage.style.width = `${Math.round(result.page.width * zoom)}px`;
+      stage.style.marginBottom = zoom < 1 ? `${-Math.round(unscaled * (1 - zoom))}px` : "";
+    }
+    zoomLabel.textContent = `${Math.round(zoom * 100)}%`;
+    zoomLabel.setAttribute("aria-label", `Zoom, ${Math.round(zoom * 100)} percent. Activate to fit to width.`);
+  }
+  function visiblePage() {
+    const pages = stage.querySelectorAll("[data-page]");
+    if (!pages.length) return 1;
+    const top = scroll.getBoundingClientRect().top;
+    let best = 1;
+    let bestDistance = Infinity;
+    for (const el of pages) {
+      const box = el.getBoundingClientRect();
+      const distance = box.bottom < top ? Infinity : Math.abs(box.top - top);
+      if (distance < bestDistance) {
+        bestDistance = distance;
+        best = Number(el.getAttribute("data-page")) || 1;
+      }
+    }
+    return best;
+  }
+  function syncBar() {
+    const total = preview.result?.paged.totalPages ?? 0;
+    count.textContent = total ? `/ ${total}` : "";
+    if (doc.activeElement !== pageField) pageField.value = total ? String(page) : "";
+    pageField.disabled = total < 2;
+    prev.disabled = page <= 1;
+    next.disabled = total === 0 || page >= total;
+  }
+  function setPage(next_, scrollTo) {
+    const total = preview.result?.paged.totalPages ?? 0;
+    const wanted = total ? clamp(Math.round(next_), 1, total) : 1;
+    if (scrollTo) {
+      const el = stage.querySelector(`[data-page="${wanted}"]`);
+      if (el) scroll.scrollTop += el.getBoundingClientRect().top - scroll.getBoundingClientRect().top;
+    }
+    if (wanted === page) return;
+    page = wanted;
+    syncBar();
+    opts.onPageChange?.(page);
+  }
+  const onScroll = () => {
+    const seen = visiblePage();
+    if (seen === page) return;
+    page = seen;
+    syncBar();
+    opts.onPageChange?.(page);
+  };
+  scroll.addEventListener("scroll", onScroll, { passive: true });
+  const onKey = (e) => {
+    if (e.target === pageField) return;
+    if (e.key === "PageDown") setPage(page + 1, true);
+    else if (e.key === "PageUp") setPage(page - 1, true);
+    else if (e.key === "Home") setPage(1, true);
+    else if (e.key === "End") setPage(preview.result?.paged.totalPages ?? 1, true);
+    else return;
+    e.preventDefault();
+  };
+  scroll.addEventListener("keydown", onKey);
+  prev.addEventListener("click", () => setPage(page - 1, true));
+  next.addEventListener("click", () => setPage(page + 1, true));
+  pageField.addEventListener("change", () => setPage(Number(pageField.value), true));
+  zoomLabel.addEventListener("click", () => api.setZoom("width"));
+  zoomIn.addEventListener("click", () => api.setZoom(clamp(zoom + 0.1, 0.1, 4)));
+  zoomOut.addEventListener("click", () => api.setZoom(clamp(zoom - 0.1, 0.1, 4)));
+  printBtn.addEventListener("click", () => api.print());
+  const observer = win && "ResizeObserver" in win ? new win.ResizeObserver(() => applyZoom()) : null;
+  observer?.observe(scroll);
+  function afterRender(result) {
+    stopInteractions?.();
+    stopInteractions = null;
+    if (opts.interactions !== false) {
+      stopInteractions = enableChartInteractions(stage, typeof opts.interactions === "object" ? opts.interactions : {});
+    }
+    applyZoom();
+    setPage(page, false);
+    syncBar();
+    opts.onLayout?.(result);
+  }
+  const api = {
+    result: null,
+    page: 1,
+    pageCount: 0,
+    zoom: 1,
+    async update(input) {
+      opts = { ...opts, ...input };
+      const result = await preview.update({ ...input, mode: "preview", zoom: 1 });
+      if (destroyed) return result;
+      afterRender(result);
+      return result;
+    },
+    goToPage(n) {
+      setPage(n, true);
+    },
+    setZoom(value) {
+      if (typeof value === "number") opts = { ...opts, zoom: value };
+      else opts = { ...opts, fit: value, zoom: void 0 };
+      applyZoom();
+    },
+    print() {
+      const result = preview.result;
+      if (!result) return;
+      if (opts.onPrint) opts.onPrint(result);
+      else win?.print();
+    },
+    destroy() {
+      destroyed = true;
+      observer?.disconnect();
+      scroll.removeEventListener("scroll", onScroll);
+      scroll.removeEventListener("keydown", onKey);
+      stopInteractions?.();
+      preview.destroy();
+      root.remove();
+    }
+  };
+  Object.defineProperties(api, {
+    result: { get: () => preview.result, enumerable: true },
+    page: { get: () => page, enumerable: true },
+    pageCount: { get: () => preview.result?.paged.totalPages ?? 0, enumerable: true },
+    zoom: { get: () => zoom, enumerable: true }
+  });
+  syncBar();
+  void api.update({});
+  return api;
+}
+export {
+  DOCUMENT_CSS,
+  DomMeasurer,
+  composePage,
+  createPdfClient,
+  createReportPreview,
+  createReportViewer,
+  documentToHtml,
+  downloadBlob,
+  enableChartInteractions,
+  ensureStyle,
+  fontFaceCss,
+  hashString,
+  layoutDocument,
+  layoutDocumentAsync,
+  mountVNodes,
+  printReport,
+  readLineBoxes,
+  readTableRows,
+  sectionHash,
+  vnodeToDom,
+  waitForFonts
+};
+//# sourceMappingURL=index.js.map