office-viewer-react 1.0.0

package/dist/index.js

@@ -0,0 +1,1769 @@
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/styles/OfficeViewer.css
+styleInject(".ov-container {\n  --ov-muted-fg: oklch(0.554 0.046 257.417);\n  --ov-destructive: oklch(0.577 0.245 27.325);\n  --ov-border: oklch(0.929 0.013 255.508);\n  --ov-page: oklch(1 0 0);\n  --ov-shadow-page: 0 1px 3px oklch(0 0 0 / 0.08), 0 8px 24px oklch(0 0 0 / 0.1);\n  --ov-grid-line: oklch(0.88 0.01 256);\n  --ov-grid-header: oklch(0.95 0.006 256);\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n@keyframes ov-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.ov-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  background: #ffffff;\n  border-bottom: 1px solid var(--ov-border);\n  flex-shrink: 0;\n}\n.ov-toolbar-label {\n  font-size: 12.5px;\n  font-weight: 500;\n  color: #94a3b8;\n  user-select: none;\n  white-space: nowrap;\n}\n.ov-select-wrap {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n.ov-select {\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: pointer;\n  padding: 5px 28px 5px 10px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #334155;\n  background: #ffffff;\n  border: 1px solid var(--ov-border);\n  border-radius: 8px;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n  outline: none;\n  transition: border-color 150ms ease, box-shadow 150ms ease;\n}\n.ov-select:hover {\n  border-color: #cbd5e1;\n}\n.ov-select:focus {\n  border-color: #60a5fa;\n  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);\n}\n.ov-select-icon {\n  pointer-events: none;\n  position: absolute;\n  right: 9px;\n  width: 10px;\n  height: 6px;\n  color: #94a3b8;\n  flex-shrink: 0;\n}\n.ov-viewer {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n}\n.ov-viewer--clip {\n  overflow: hidden;\n}\n.ov-loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 4rem 1rem;\n  color: #94a3b8;\n  font-size: 0.875rem;\n}\n.ov-spinner {\n  width: 1.5rem;\n  height: 1.5rem;\n  animation: ov-spin 1s linear infinite;\n}\n.ov-error {\n  margin: 3rem auto;\n  max-width: 32rem;\n  border-radius: 0.5rem;\n  border: 1px solid color-mix(in oklch, var(--ov-destructive) 30%, transparent);\n  background: color-mix(in oklch, var(--ov-destructive) 5%, transparent);\n  padding: 1rem 1.5rem;\n  font-size: 0.875rem;\n  color: var(--ov-destructive);\n}\n");
+
+// src/components/OfficeViewer.tsx
+import { useEffect as useEffect4, useState as useState4 } from "react";
+import { Loader2 as Loader24 } from "lucide-react";
+
+// src/styles/DocxViewer.css
+styleInject(".ov-docx {\n  display: flex;\n  flex-direction: column;\n}\n.ov-docx__loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.5rem;\n  padding-block: 4rem;\n  color: var(--ov-muted-fg);\n}\n.ov-docx__loading-icon {\n  width: 1.5rem;\n  height: 1.5rem;\n  animation: ov-spin 1s linear infinite;\n}\n.ov-docx__loading-text {\n  font-size: 0.875rem;\n}\n.ov-docx__error {\n  margin-inline: auto;\n  margin-top: 3rem;\n  max-width: 32rem;\n  border-radius: 0.5rem;\n  border: 1px solid color-mix(in oklch, var(--ov-destructive) 30%, transparent);\n  background: color-mix(in oklch, var(--ov-destructive) 5%, transparent);\n  padding: 1rem 1.5rem;\n  font-size: 0.875rem;\n  color: var(--ov-destructive);\n}\n.ov-docx__body {\n  position: relative;\n  display: flex;\n  justify-content: center;\n  padding-block: 2rem;\n}\n.ov-docx__render {\n  width: 100%;\n}\n.ov-docx__nav {\n  position: sticky;\n  bottom: 1.5rem;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.75rem;\n  padding-bottom: 0.5rem;\n}\n.ov-docx__nav-btn {\n  display: flex;\n  width: 3.75rem;\n  height: 3.75rem;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  border: 2px solid #e2e8f0;\n  background: #ffffff;\n  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14), 0 1px 3px rgba(15, 23, 42, 0.10);\n  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);\n  cursor: pointer;\n}\n.ov-docx__nav-btn:hover {\n  transform: scale(1.05);\n  border-color: #cbd5e1;\n}\n.ov-docx__nav-btn:disabled {\n  cursor: not-allowed;\n  opacity: 0.25;\n}\n.ov-docx__nav-btn-icon {\n  width: 1.5rem;\n  height: 1.5rem;\n  color: #1e293b;\n}\n.ov-docx__nav-counter {\n  min-width: 7.5rem;\n  border-radius: 9999px;\n  border: 1px solid #e2e8f0;\n  background: #ffffff;\n  padding: 0.4375rem 1.25rem;\n  text-align: center;\n  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.07);\n}\n.ov-docx__nav-current {\n  font-size: 13px;\n  font-weight: 600;\n  color: #334155;\n}\n.ov-docx__nav-total {\n  font-size: 13px;\n  color: #94a3b8;\n}\n.ov-container .docx-wrapper {\n  background: transparent !important;\n  padding: 0 !important;\n}\n.ov-container .docx-wrapper > section.docx {\n  box-shadow: var(--ov-shadow-page);\n  margin-bottom: 1.5rem !important;\n  background: var(--ov-page);\n}\n");
+
+// src/viewers/DocxViewer.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import { renderAsync } from "docx-preview";
+import { ChevronLeft, ChevronRight, Loader2 } from "lucide-react";
+import JSZip from "jszip";
+import * as echarts from "echarts";
+import { jsx, jsxs } from "react/jsx-runtime";
+var NS = {
+  c: "http://schemas.openxmlformats.org/drawingml/2006/chart",
+  a: "http://schemas.openxmlformats.org/drawingml/2006/main",
+  r: "http://schemas.openxmlformats.org/officeDocument/2006/relationships",
+  pic: "http://schemas.openxmlformats.org/drawingml/2006/picture",
+  rel: "http://schemas.openxmlformats.org/package/2006/relationships",
+  ct: "http://schemas.openxmlformats.org/package/2006/content-types"
+};
+var EMU_PER_PX = 9525;
+var PALETTE = ["#4472c4", "#ed7d31", "#a5a5a5", "#ffc000", "#5b9bd5", "#70ad47", "#264478", "#9e480e"];
+function localElements(parent, name) {
+  if (!parent) return [];
+  return Array.from(parent.children).filter((c) => c.localName === name);
+}
+function firstLocal(parent, name) {
+  if (!parent) return null;
+  return Array.from(parent.children).find((c) => c.localName === name) ?? null;
+}
+function deepFirst(parent, name) {
+  if (!parent) return null;
+  const list = parent.getElementsByTagNameNS(NS.c, name);
+  return list.length ? list[0] : null;
+}
+function readCache(ref) {
+  if (!ref) return [];
+  const cache = firstLocal(ref, "numCache") || firstLocal(ref, "strCache") || ref;
+  const pts = Array.from(cache.getElementsByTagNameNS(NS.c, "pt"));
+  const out = [];
+  for (const pt of pts) {
+    const idx = parseInt(pt.getAttribute("idx") || "0", 10);
+    const v = pt.getElementsByTagNameNS(NS.c, "v")[0];
+    out[idx] = v ? v.textContent || "" : "";
+  }
+  for (let i = 0; i < out.length; i++) if (out[i] === void 0) out[i] = "";
+  return out;
+}
+function parseSeries(ser) {
+  const tx = firstLocal(ser, "tx");
+  let name = "";
+  if (tx) {
+    const strRef = firstLocal(tx, "strRef");
+    if (strRef) name = readCache(strRef).find((x) => x) || "";
+    else {
+      const v = tx.getElementsByTagNameNS(NS.c, "v")[0];
+      name = v ? v.textContent || "" : "";
+    }
+  }
+  const catRef = firstLocal(firstLocal(ser, "cat"), "strRef") || firstLocal(firstLocal(ser, "cat"), "numRef");
+  const valRef = firstLocal(firstLocal(ser, "val"), "numRef");
+  const cats = readCache(catRef);
+  const vals = readCache(valRef).map((v) => {
+    const n = parseFloat(v);
+    return isNaN(n) ? 0 : n;
+  });
+  return { name, cats, vals };
+}
+function chartTitle(chartEl) {
+  const title = deepFirst(chartEl, "title");
+  if (!title) return "";
+  return Array.from(title.getElementsByTagNameNS(NS.a, "t")).map((t) => t.textContent || "").join("");
+}
+function buildOption(chartSpace) {
+  const chartEl = firstLocal(chartSpace, "chart");
+  const plotArea = firstLocal(chartEl, "plotArea");
+  if (!plotArea) return null;
+  const typeEl = Array.from(plotArea.children).find((c) => /Chart$/.test(c.localName));
+  if (!typeEl) return null;
+  const kind = typeEl.localName;
+  const seriesEls = localElements(typeEl, "ser");
+  if (!seriesEls.length) return null;
+  const series = seriesEls.map(parseSeries);
+  const categories = series[0]?.cats ?? [];
+  const title = chartTitle(chartEl);
+  const baseTitle = title ? { title: { text: title, left: "center", textStyle: { fontSize: 14 } } } : {};
+  const legend = series.length > 1 || /pie|doughnut/i.test(kind) ? { legend: { bottom: 0, type: "scroll" } } : {};
+  if (/pie|doughnut/i.test(kind)) {
+    const s = series[0];
+    const radius = /doughnut/i.test(kind) ? ["40%", "70%"] : "70%";
+    return {
+      color: PALETTE,
+      ...baseTitle,
+      tooltip: { trigger: "item" },
+      legend: { bottom: 0, type: "scroll" },
+      series: [{ type: "pie", radius, center: ["50%", "48%"], data: s.cats.map((c, i) => ({ name: c || `#${i + 1}`, value: s.vals[i] ?? 0 })), label: { fontSize: 11 } }]
+    };
+  }
+  if (/scatter/i.test(kind)) {
+    return {
+      color: PALETTE,
+      ...baseTitle,
+      ...legend,
+      tooltip: { trigger: "item" },
+      xAxis: { type: "value" },
+      yAxis: { type: "value" },
+      series: series.map((s) => ({ name: s.name, type: "scatter", data: s.vals.map((v, i) => [parseFloat(s.cats[i]) || i, v]) }))
+    };
+  }
+  const isBarHorizontal = /barChart/i.test(kind) && firstLocal(typeEl, "barDir")?.getAttribute("val") === "bar";
+  const isArea = /areaChart/i.test(kind);
+  const isLine = /lineChart/i.test(kind);
+  const catAxis = { type: "category", data: categories };
+  const valAxis = { type: "value" };
+  return {
+    color: PALETTE,
+    ...baseTitle,
+    ...legend,
+    grid: { left: 48, right: 24, top: title ? 48 : 24, bottom: series.length > 1 ? 48 : 32, containLabel: true },
+    tooltip: { trigger: "axis" },
+    xAxis: isBarHorizontal ? valAxis : catAxis,
+    yAxis: isBarHorizontal ? catAxis : valAxis,
+    series: series.map((s) => ({ name: s.name, type: isLine || isArea ? "line" : "bar", areaStyle: isArea ? {} : void 0, smooth: false, data: s.vals }))
+  };
+}
+async function renderChartPng(option, wPx, hPx) {
+  const w = Math.max(240, Math.min(1600, Math.round(wPx)));
+  const h = Math.max(160, Math.min(1200, Math.round(hPx)));
+  const div = document.createElement("div");
+  div.style.cssText = `position:absolute;left:-99999px;top:0;width:${w}px;height:${h}px;`;
+  document.body.appendChild(div);
+  const chart = echarts.init(div, void 0, { renderer: "canvas", width: w, height: h });
+  chart.setOption({ animation: false, ...option });
+  const url = chart.getDataURL({ type: "png", pixelRatio: 2, backgroundColor: "#ffffff" });
+  chart.dispose();
+  div.remove();
+  return url;
+}
+function dataUrlToBytes(dataUrl) {
+  const b64 = dataUrl.split(",")[1];
+  const bin = atob(b64);
+  const bytes = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
+  return bytes;
+}
+function resolvePath(baseDir, target) {
+  const parts = (baseDir + target).split("/");
+  const stack = [];
+  for (const p of parts) {
+    if (p === "..") stack.pop();
+    else if (p !== "." && p !== "") stack.push(p);
+  }
+  return stack.join("/");
+}
+function buildPicNode(doc, relId, cx, cy) {
+  const pic = doc.createElementNS(NS.pic, "pic:pic");
+  const nvPicPr = doc.createElementNS(NS.pic, "pic:nvPicPr");
+  const cNvPr = doc.createElementNS(NS.pic, "pic:cNvPr");
+  cNvPr.setAttribute("id", "0");
+  cNvPr.setAttribute("name", "chart");
+  const cNvPicPr = doc.createElementNS(NS.pic, "pic:cNvPicPr");
+  nvPicPr.append(cNvPr, cNvPicPr);
+  const blipFill = doc.createElementNS(NS.pic, "pic:blipFill");
+  const blip = doc.createElementNS(NS.a, "a:blip");
+  blip.setAttributeNS(NS.r, "r:embed", relId);
+  const stretch = doc.createElementNS(NS.a, "a:stretch");
+  stretch.appendChild(doc.createElementNS(NS.a, "a:fillRect"));
+  blipFill.append(blip, stretch);
+  const spPr = doc.createElementNS(NS.pic, "pic:spPr");
+  const xfrm = doc.createElementNS(NS.a, "a:xfrm");
+  const off = doc.createElementNS(NS.a, "a:off");
+  off.setAttribute("x", "0");
+  off.setAttribute("y", "0");
+  const ext = doc.createElementNS(NS.a, "a:ext");
+  ext.setAttribute("cx", cx);
+  ext.setAttribute("cy", cy);
+  xfrm.append(off, ext);
+  const prstGeom = doc.createElementNS(NS.a, "a:prstGeom");
+  prstGeom.setAttribute("prst", "rect");
+  prstGeom.appendChild(doc.createElementNS(NS.a, "a:avLst"));
+  spPr.append(xfrm, prstGeom);
+  pic.append(nvPicPr, blipFill, spPr);
+  return pic;
+}
+function getExtent(chartNode) {
+  let el = chartNode;
+  while (el && el.localName !== "inline" && el.localName !== "anchor") el = el.parentElement;
+  if (el) {
+    const ext = firstLocal(el, "extent");
+    if (ext) return { cx: ext.getAttribute("cx") || "5486400", cy: ext.getAttribute("cy") || "3200400" };
+  }
+  return { cx: "5486400", cy: "3200400" };
+}
+async function preprocessDocxCharts(data) {
+  let zip;
+  try {
+    zip = await JSZip.loadAsync(data);
+  } catch {
+    return data;
+  }
+  const partNames = Object.keys(zip.files).filter((n) => /^word\/(document|header\d*|footer\d*)\.xml$/.test(n));
+  let imgCounter = 0, touched = false;
+  const parser = new DOMParser(), serializer = new XMLSerializer();
+  for (const partName of partNames) {
+    const xmlText = await zip.file(partName).async("string");
+    if (!xmlText.includes("drawingml/2006/chart")) continue;
+    const doc = parser.parseFromString(xmlText, "application/xml");
+    const chartNodes = Array.from(doc.getElementsByTagNameNS(NS.c, "chart")).filter(
+      (n) => n.localName === "chart" && n.getAttributeNS(NS.r, "id")
+    );
+    if (!chartNodes.length) continue;
+    const dir = partName.substring(0, partName.lastIndexOf("/") + 1);
+    const relsPath = `${dir}_rels/${partName.substring(dir.length)}.rels`;
+    const relsFile = zip.file(relsPath);
+    if (!relsFile) continue;
+    const relsDoc = parser.parseFromString(await relsFile.async("string"), "application/xml");
+    const relsRoot = relsDoc.documentElement;
+    const relTarget = (id) => {
+      const rel = Array.from(relsRoot.children).find((r) => r.getAttribute("Id") === id);
+      return rel ? rel.getAttribute("Target") : null;
+    };
+    const existingIds = new Set(Array.from(relsRoot.children).map((r) => r.getAttribute("Id") || ""));
+    const newRelId = () => {
+      let i = 1, id = `rIdChart${i}`;
+      while (existingIds.has(id)) id = `rIdChart${++i}`;
+      existingIds.add(id);
+      return id;
+    };
+    for (const chartNode of chartNodes) {
+      const relId = chartNode.getAttributeNS(NS.r, "id");
+      const target = relTarget(relId);
+      if (!target) continue;
+      const chartPath = resolvePath(dir, target);
+      const chartFile = zip.file(chartPath);
+      if (!chartFile) continue;
+      let option = null;
+      try {
+        const chartDoc = parser.parseFromString(await chartFile.async("string"), "application/xml");
+        option = buildOption(chartDoc.documentElement);
+      } catch {
+        option = null;
+      }
+      if (!option) continue;
+      const { cx, cy } = getExtent(chartNode);
+      const wPx = parseInt(cx, 10) / EMU_PER_PX, hPx = parseInt(cy, 10) / EMU_PER_PX;
+      let png;
+      try {
+        const url = await renderChartPng(option, wPx, hPx);
+        png = dataUrlToBytes(url);
+      } catch {
+        continue;
+      }
+      imgCounter++;
+      const imgName = `media/chartimg${imgCounter}.png`;
+      zip.file(`word/${imgName}`, png);
+      const rId = newRelId();
+      const rel = relsDoc.createElementNS(NS.rel, "Relationship");
+      rel.setAttribute("Id", rId);
+      rel.setAttribute("Type", "http://schemas.openxmlformats.org/officeDocument/2006/relationships/image");
+      rel.setAttribute("Target", imgName);
+      relsRoot.appendChild(rel);
+      const graphicData = chartNode.parentElement;
+      if (!graphicData) continue;
+      graphicData.setAttribute("uri", NS.pic);
+      while (graphicData.firstChild) graphicData.removeChild(graphicData.firstChild);
+      graphicData.appendChild(buildPicNode(doc, rId, cx, cy));
+      touched = true;
+    }
+    zip.file(partName, serializer.serializeToString(doc));
+    zip.file(relsPath, serializer.serializeToString(relsDoc));
+  }
+  if (!touched) return data;
+  const ctFile = zip.file("[Content_Types].xml");
+  if (ctFile) {
+    const ctDoc = parser.parseFromString(await ctFile.async("string"), "application/xml");
+    const hasPng = Array.from(ctDoc.documentElement.children).some(
+      (e) => e.localName === "Default" && e.getAttribute("Extension")?.toLowerCase() === "png"
+    );
+    if (!hasPng) {
+      const def = ctDoc.createElementNS(NS.ct, "Default");
+      def.setAttribute("Extension", "png");
+      def.setAttribute("ContentType", "image/png");
+      ctDoc.documentElement.appendChild(def);
+      zip.file("[Content_Types].xml", serializer.serializeToString(ctDoc));
+    }
+  }
+  return zip.generateAsync({ type: "blob" });
+}
+function stampPageNumbers(container) {
+  const sections = Array.from(container.querySelectorAll("section"));
+  if (sections.length === 0) return { sections: [], labels: [] };
+  const total = sections.length;
+  const labels = [];
+  sections.forEach((section, i) => {
+    section.style.boxShadow = "0 1px 4px 0 rgba(15,23,42,0.08), 0 0 0 1px rgba(15,23,42,0.04)";
+    const label = document.createElement("div");
+    label.setAttribute("aria-hidden", "true");
+    label.style.display = "flex";
+    label.style.justifyContent = "center";
+    label.style.alignItems = "center";
+    label.style.padding = "10px 0 26px";
+    label.style.fontSize = "12px";
+    label.style.color = "#94a3b8";
+    label.style.userSelect = "none";
+    label.style.letterSpacing = "0.04em";
+    label.textContent = `Page ${i + 1} of ${total}`;
+    section.insertAdjacentElement("afterend", label);
+    labels.push(label);
+  });
+  return { sections, labels };
+}
+function stylePages(sections, labels, mode, activeIndex) {
+  sections.forEach((s, i) => {
+    s.style.display = mode === "navigation" && i !== activeIndex ? "none" : "";
+  });
+  labels.forEach((l) => {
+    l.style.display = mode === "navigation" ? "none" : "";
+  });
+}
+function DocxViewer({
+  data,
+  mode = "scroll",
+  className,
+  onError
+}) {
+  const containerRef = useRef(null);
+  const sectionsRef = useRef([]);
+  const labelsRef = useRef([]);
+  const currentPageRef = useRef(0);
+  const modeRef = useRef(mode);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [currentPage, setCurrentPage] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+  useEffect(() => {
+    modeRef.current = mode;
+  }, [mode]);
+  const isNavMode = mode === "navigation";
+  const canPrev = currentPage > 0;
+  const canNext = currentPage < totalPages - 1;
+  const goToPage = useCallback((index) => {
+    const sections = sectionsRef.current;
+    if (!sections.length || index < 0 || index >= sections.length) return;
+    stylePages(sections, labelsRef.current, "navigation", index);
+    currentPageRef.current = index;
+    setCurrentPage(index);
+    containerRef.current?.scrollIntoView({ block: "start", behavior: "smooth" });
+  }, []);
+  const applyMode = useCallback((m) => {
+    const sections = sectionsRef.current;
+    if (!sections.length) return;
+    const idx = Math.min(currentPageRef.current, sections.length - 1);
+    stylePages(sections, labelsRef.current, m, idx);
+    if (m === "navigation") {
+      currentPageRef.current = idx;
+      setCurrentPage(idx);
+    }
+  }, []);
+  useEffect(() => {
+    applyMode(mode);
+  }, [mode, applyMode]);
+  useEffect(() => {
+    if (mode !== "navigation") return;
+    const handleKey = (e) => {
+      if (e.target instanceof HTMLSelectElement) return;
+      if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        e.preventDefault();
+        goToPage(currentPageRef.current + 1);
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        e.preventDefault();
+        goToPage(currentPageRef.current - 1);
+      }
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [mode, goToPage]);
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    (async () => {
+      try {
+        const prepared = await preprocessDocxCharts(data.slice(0));
+        if (cancelled || !containerRef.current) return;
+        containerRef.current.innerHTML = "";
+        sectionsRef.current = [];
+        labelsRef.current = [];
+        await renderAsync(prepared, containerRef.current, void 0, {
+          className: "docx",
+          inWrapper: true,
+          ignoreWidth: false,
+          ignoreHeight: false,
+          breakPages: true,
+          experimental: true,
+          renderHeaders: true,
+          renderFooters: true,
+          renderFootnotes: true,
+          renderEndnotes: true,
+          useBase64URL: true
+        });
+        if (!cancelled && containerRef.current) {
+          const { sections, labels } = stampPageNumbers(containerRef.current);
+          sectionsRef.current = sections;
+          labelsRef.current = labels;
+          setTotalPages(sections.length);
+          const m = modeRef.current;
+          const idx = Math.min(currentPageRef.current, sections.length - 1);
+          stylePages(sections, labels, m, idx);
+          if (m === "navigation") {
+            currentPageRef.current = idx;
+            setCurrentPage(idx);
+          }
+        }
+      } catch (e) {
+        const err = e instanceof Error ? e : new Error("Failed to render document");
+        if (!cancelled) {
+          setError(err.message);
+          onError?.(err);
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [data, onError]);
+  return /* @__PURE__ */ jsxs("div", { className: `ov-docx${className ? ` ${className}` : ""}`, children: [
+    loading && /* @__PURE__ */ jsxs("div", { className: "ov-docx__loading", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "ov-docx__loading-icon" }),
+      /* @__PURE__ */ jsx("span", { className: "ov-docx__loading-text", children: "Rendering document\u2026" })
+    ] }),
+    error && /* @__PURE__ */ jsx("div", { className: "ov-docx__error", children: error }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "ov-docx__body",
+        style: { visibility: loading ? "hidden" : "visible" },
+        children: /* @__PURE__ */ jsx("div", { ref: containerRef, className: "ov-docx__render" })
+      }
+    ),
+    isNavMode && !loading && totalPages > 0 && /* @__PURE__ */ jsxs("div", { className: "ov-docx__nav", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => goToPage(currentPageRef.current - 1),
+          disabled: !canPrev,
+          "aria-label": "Previous page",
+          className: "ov-docx__nav-btn",
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "ov-docx__nav-btn-icon", strokeWidth: 2 })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "ov-docx__nav-counter", children: [
+        /* @__PURE__ */ jsx("span", { className: "ov-docx__nav-current", children: currentPage + 1 }),
+        /* @__PURE__ */ jsxs("span", { className: "ov-docx__nav-total", children: [
+          " of ",
+          totalPages
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => goToPage(currentPageRef.current + 1),
+          disabled: !canNext,
+          "aria-label": "Next page",
+          className: "ov-docx__nav-btn",
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "ov-docx__nav-btn-icon", strokeWidth: 2 })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/plugins/DocxPlugin.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function DocxPluginComponent({ data, mode, onError }) {
+  return /* @__PURE__ */ jsx2(
+    DocxViewer,
+    {
+      data,
+      mode: mode || "scroll",
+      onError
+    }
+  );
+}
+var DocxPlugin = {
+  id: "docx",
+  detect: (ext, mime) => ext === "docx" || mime.includes("wordprocessingml"),
+  viewModes: [
+    { value: "scroll", label: "Continuous Scroll" },
+    { value: "navigation", label: "Page Navigation" }
+  ],
+  defaultMode: "scroll",
+  needsClip: () => false,
+  component: DocxPluginComponent
+};
+
+// src/styles/PptxViewer.css
+styleInject('.ov-pptx {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-inline: 1rem;\n  padding-block: 1.5rem;\n}\n.ov-pptx--nav {\n  flex-direction: row;\n  height: 100%;\n  padding: 0;\n  justify-content: center;\n}\n.ov-pptx__loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.5rem;\n  color: var(--ov-muted-fg);\n  padding-block: 4rem;\n}\n.ov-pptx__loading--nav {\n  position: absolute;\n  inset: 0;\n  justify-content: center;\n  padding: 0;\n}\n.ov-pptx__loading-icon {\n  width: 1.5rem;\n  height: 1.5rem;\n  animation: ov-spin 1s linear infinite;\n}\n.ov-pptx__loading-text {\n  font-size: 0.875rem;\n}\n.ov-pptx__error {\n  margin-top: 1rem;\n  border-radius: 0.5rem;\n  border: 1px solid color-mix(in oklch, var(--ov-destructive) 30%, transparent);\n  background: color-mix(in oklch, var(--ov-destructive) 5%, transparent);\n  padding: 1rem 1.5rem;\n  font-size: 0.875rem;\n  color: var(--ov-destructive);\n}\n.ov-pptx__slide-area {\n  width: 100%;\n  max-width: 87.5rem;\n}\n.ov-pptx__host {\n  width: 100%;\n}\n.ov-pptx__nav-btn {\n  position: absolute;\n  top: 50%;\n  z-index: 10;\n  display: flex;\n  width: 3.75rem;\n  height: 3.75rem;\n  transform: translateY(-50%);\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  border: 2px solid #e2e8f0;\n  background: #ffffff;\n  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14), 0 1px 3px rgba(15, 23, 42, 0.10);\n  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);\n  cursor: pointer;\n}\n.ov-pptx__nav-btn:hover {\n  transform: translateY(-50%) scale(1.05);\n  border-color: #cbd5e1;\n}\n.ov-pptx__nav-btn:disabled {\n  cursor: not-allowed;\n  opacity: 0.25;\n}\n.ov-pptx__nav-btn--prev {\n  left: 1.25rem;\n}\n.ov-pptx__nav-btn--next {\n  right: 1.25rem;\n}\n.ov-pptx__nav-btn-icon {\n  width: 1.5rem;\n  height: 1.5rem;\n  color: #1e293b;\n}\n.ov-pptx__nav-counter {\n  position: absolute;\n  bottom: 1.5rem;\n  left: 50%;\n  transform: translateX(-50%);\n  min-width: 7.5rem;\n  border-radius: 9999px;\n  border: 1px solid #e2e8f0;\n  background: #ffffff;\n  padding: 0.4375rem 1.25rem;\n  text-align: center;\n  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.07);\n}\n.ov-pptx__nav-current {\n  font-size: 13px;\n  font-weight: 600;\n  color: #334155;\n}\n.ov-pptx__nav-total {\n  font-size: 13px;\n  color: #94a3b8;\n}\n.ov-container .pptx-host .pptx-preview-wrapper {\n  background: transparent !important;\n  margin: 0 auto;\n}\n.ov-container .pptx-host .pptx-preview-slide-wrapper {\n  box-shadow:\n    0 1px 3px oklch(0 0 0 / 0.1),\n    0 8px 20px oklch(0 0 0 / 0.16),\n    0 24px 48px oklch(0 0 0 / 0.1);\n  margin: 0 auto 1.25rem auto !important;\n  background: #fff;\n  border-radius: 2px;\n  overflow: hidden;\n}\n.ov-container .pptx-host img {\n  max-width: none;\n  height: revert;\n  display: inline;\n  vertical-align: unset;\n}\n.ov-container .pptx-host .slide-wrapper,\n.ov-container .pptx-host .slide-layout-wrapper {\n  font-family:\n    "Calibri",\n    "Calibri Light",\n    Arial,\n    Helvetica,\n    sans-serif;\n}\n.ov-container .pptx-host .slide-wrapper,\n.ov-container .pptx-host .slide-layout-wrapper {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n}\n.ov-container .pptx-host .text-wrapper > div {\n  margin-top: 0 !important;\n}\n');
+
+// src/viewers/PptxViewer.tsx
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { init as initPptx } from "pptx-preview";
+import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2, Loader2 as Loader22 } from "lucide-react";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function fixImageSizing(host) {
+  host.querySelectorAll("img").forEach((img) => {
+    const w = img.getAttribute("width");
+    const h = img.getAttribute("height");
+    if (w && !img.style.width) img.style.setProperty("width", `${w}px`);
+    if (h && !img.style.height) img.style.setProperty("height", `${h}px`);
+  });
+}
+function fixTextRendering(host) {
+  host.querySelectorAll(".text-wrapper span").forEach((span) => {
+    if (!span.style.fontFamily && parseFloat(span.style.letterSpacing) < 0) {
+      span.style.letterSpacing = "";
+    }
+  });
+  host.querySelectorAll(".text-wrapper p").forEach((p) => {
+    if (p.style.lineHeight === "1") p.style.lineHeight = "1.15";
+  });
+}
+function styleSlides(slides, mode, activeIndex) {
+  slides.forEach((s, i) => {
+    if (mode === "navigation") {
+      s.style.display = i === activeIndex ? "" : "none";
+      s.style.marginBottom = "0";
+      s.style.marginTop = "0";
+    } else {
+      s.style.display = "";
+      s.style.marginBottom = "";
+      s.style.marginTop = "";
+    }
+  });
+}
+function PptxViewer({
+  data,
+  mode = "scroll",
+  className,
+  onError
+}) {
+  const outerRef = useRef2(null);
+  const slideAreaRef = useRef2(null);
+  const hostRef = useRef2(null);
+  const slidesRef = useRef2([]);
+  const currentSlideRef = useRef2(0);
+  const modeRef = useRef2(mode);
+  const [loading, setLoading] = useState2(false);
+  const [error, setError] = useState2(null);
+  const [currentSlide, setCurrentSlide] = useState2(0);
+  const [totalSlides, setTotalSlides] = useState2(0);
+  useEffect2(() => {
+    modeRef.current = mode;
+  }, [mode]);
+  const isNavMode = mode === "navigation";
+  const canPrev = currentSlide > 0;
+  const canNext = currentSlide < totalSlides - 1;
+  const goToSlide = useCallback2((index) => {
+    const slides = slidesRef.current;
+    if (!slides.length || index < 0 || index >= slides.length) return;
+    styleSlides(slides, "navigation", index);
+    currentSlideRef.current = index;
+    setCurrentSlide(index);
+  }, []);
+  const applyMode = useCallback2((m) => {
+    const slides = slidesRef.current;
+    if (!slides.length) return;
+    const idx = Math.min(currentSlideRef.current, slides.length - 1);
+    styleSlides(slides, m, idx);
+    if (m === "navigation") {
+      currentSlideRef.current = idx;
+      setCurrentSlide(idx);
+    }
+  }, []);
+  useEffect2(() => {
+    applyMode(mode);
+  }, [mode, applyMode]);
+  useEffect2(() => {
+    if (mode !== "navigation") return;
+    const handleKey = (e) => {
+      if (e.target instanceof HTMLSelectElement) return;
+      if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        e.preventDefault();
+        goToSlide(currentSlideRef.current + 1);
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        e.preventDefault();
+        goToSlide(currentSlideRef.current - 1);
+      }
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [mode, goToSlide]);
+  const renderPptx = useCallback2(
+    async (containerWidth) => {
+      const host = hostRef.current;
+      if (!host || containerWidth === 0) return;
+      setLoading(true);
+      setError(null);
+      host.innerHTML = "";
+      slidesRef.current = [];
+      try {
+        const previewer = initPptx(host, { width: containerWidth, mode: "list" });
+        await previewer.preview(data.slice(0));
+        fixImageSizing(host);
+        fixTextRendering(host);
+        const slides = Array.from(
+          host.querySelectorAll(".pptx-preview-slide-wrapper")
+        );
+        slidesRef.current = slides;
+        setTotalSlides(slides.length);
+        const m = modeRef.current;
+        const idx = Math.min(currentSlideRef.current, slides.length - 1);
+        styleSlides(slides, m, idx);
+        if (m === "navigation") {
+          currentSlideRef.current = idx;
+          setCurrentSlide(idx);
+        }
+      } catch (e) {
+        const err = e instanceof Error ? e : new Error("Failed to render presentation");
+        setError(err.message);
+        onError?.(err);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [data, onError]
+  );
+  useEffect2(() => {
+    let cancelled = false;
+    let lastWidth = 0;
+    let ro = null;
+    let debounceTimer;
+    function triggerRender() {
+      if (cancelled || !hostRef.current) return;
+      const w = Math.floor(hostRef.current.getBoundingClientRect().width);
+      if (w === 0 || w === lastWidth) return;
+      lastWidth = w;
+      renderPptx(w);
+    }
+    const rafId = requestAnimationFrame(() => {
+      if (cancelled) return;
+      triggerRender();
+      if (slideAreaRef.current) {
+        ro = new ResizeObserver(() => {
+          clearTimeout(debounceTimer);
+          debounceTimer = setTimeout(triggerRender, 250);
+        });
+        ro.observe(slideAreaRef.current);
+      }
+    });
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(rafId);
+      clearTimeout(debounceTimer);
+      ro?.disconnect();
+    };
+  }, [data, renderPptx]);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: outerRef,
+      className: `ov-pptx${isNavMode ? " ov-pptx--nav" : ""}${className ? ` ${className}` : ""}`,
+      children: [
+        loading && /* @__PURE__ */ jsxs2("div", { className: `ov-pptx__loading${isNavMode ? " ov-pptx__loading--nav" : ""}`, children: [
+          /* @__PURE__ */ jsx3(Loader22, { className: "ov-pptx__loading-icon" }),
+          /* @__PURE__ */ jsx3("span", { className: "ov-pptx__loading-text", children: "Rendering slides\u2026" })
+        ] }),
+        error && /* @__PURE__ */ jsx3("div", { className: "ov-pptx__error", children: error }),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            ref: slideAreaRef,
+            className: "ov-pptx__slide-area",
+            style: { visibility: loading ? "hidden" : "visible" },
+            children: /* @__PURE__ */ jsx3("div", { ref: hostRef, className: "pptx-host ov-pptx__host" })
+          }
+        ),
+        isNavMode && !loading && totalSlides > 0 && /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              onClick: () => goToSlide(currentSlideRef.current - 1),
+              disabled: !canPrev,
+              "aria-label": "Previous slide",
+              className: "ov-pptx__nav-btn ov-pptx__nav-btn--prev",
+              children: /* @__PURE__ */ jsx3(ChevronLeft2, { className: "ov-pptx__nav-btn-icon", strokeWidth: 2 })
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              onClick: () => goToSlide(currentSlideRef.current + 1),
+              disabled: !canNext,
+              "aria-label": "Next slide",
+              className: "ov-pptx__nav-btn ov-pptx__nav-btn--next",
+              children: /* @__PURE__ */ jsx3(ChevronRight2, { className: "ov-pptx__nav-btn-icon", strokeWidth: 2 })
+            }
+          ),
+          /* @__PURE__ */ jsxs2("div", { className: "ov-pptx__nav-counter", children: [
+            /* @__PURE__ */ jsx3("span", { className: "ov-pptx__nav-current", children: currentSlide + 1 }),
+            /* @__PURE__ */ jsxs2("span", { className: "ov-pptx__nav-total", children: [
+              " of ",
+              totalSlides
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/plugins/PptxPlugin.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function PptxPluginComponent({ data, mode, onError }) {
+  return /* @__PURE__ */ jsx4(
+    PptxViewer,
+    {
+      data,
+      mode: mode || "scroll",
+      onError
+    }
+  );
+}
+var PptxPlugin = {
+  id: "pptx",
+  detect: (ext, mime) => ext === "pptx" || mime.includes("presentationml"),
+  viewModes: [
+    { value: "scroll", label: "Vertical Scroll" },
+    { value: "navigation", label: "Slide Navigation" }
+  ],
+  defaultMode: "scroll",
+  needsClip: (mode) => mode === "navigation",
+  component: PptxPluginComponent
+};
+
+// src/styles/XlsxViewer.css
+styleInject(".ov-xlsx__loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.5rem;\n  padding-block: 6rem;\n  color: var(--ov-muted-fg);\n}\n.ov-xlsx__loading-icon {\n  width: 1.5rem;\n  height: 1.5rem;\n  animation: ov-spin 1s linear infinite;\n}\n.ov-xlsx__loading-text {\n  font-size: 0.875rem;\n}\n.ov-xlsx__error {\n  margin-inline: auto;\n  margin-top: 3rem;\n  width: fit-content;\n  border-radius: 0.5rem;\n  border: 1px solid color-mix(in oklch, var(--ov-destructive) 30%, transparent);\n  background: color-mix(in oklch, var(--ov-destructive) 5%, transparent);\n  padding: 1rem 1.5rem;\n  font-size: 0.875rem;\n  color: var(--ov-destructive);\n}\n.ov-xlsx {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n}\n.ov-xlsx__grid-area {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  background: var(--ov-page);\n}\n.ov-xlsx__table {\n  border-collapse: collapse;\n  font-size: 20px;\n}\n.ov-xlsx__corner {\n  position: sticky;\n  left: 0;\n  top: 0;\n  z-index: 20;\n  height: 2rem;\n  border: 1px solid var(--ov-grid-line);\n  background: var(--ov-grid-header);\n}\n.ov-xlsx__col-header {\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  height: 2rem;\n  border: 1px solid var(--ov-grid-line);\n  background: var(--ov-grid-header);\n  text-align: center;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--ov-muted-fg);\n}\n.ov-xlsx__row-header {\n  position: sticky;\n  left: 0;\n  z-index: 10;\n  border: 1px solid var(--ov-grid-line);\n  background: var(--ov-grid-header);\n  text-align: center;\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--ov-muted-fg);\n}\n.ov-xlsx__cell {\n  overflow: hidden;\n  border: 1px solid var(--ov-grid-line);\n  padding-inline: 0.375rem;\n  vertical-align: middle;\n}\n.ov-container .ov-xlsx__cell[data-ov-bold] {\n  font-weight: 600 !important;\n}\n.ov-xlsx__cell-accounting {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  overflow: hidden;\n}\n.ov-xlsx__cell-text {\n  display: block;\n  overflow: hidden;\n}\n.ov-xlsx__tabbar {\n  display: flex;\n  height: 3rem;\n  flex-shrink: 0;\n  align-items: flex-end;\n  border-top: 1px solid #c0c0c0;\n  background: #d6d6d6;\n}\n.ov-xlsx__tabnav {\n  display: flex;\n  flex-shrink: 0;\n  align-self: stretch;\n  align-items: center;\n  border-right: 1px solid #d0d0d0;\n  padding-inline: 0.375rem;\n}\n.ov-xlsx__tabnav-btn {\n  display: flex;\n  width: 1.75rem;\n  height: 1.75rem;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0.25rem;\n  color: #666;\n  cursor: pointer;\n  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.ov-xlsx__tabnav-btn:hover {\n  background: #e0e0e0;\n}\n.ov-xlsx__tabnav-icon {\n  width: 1rem;\n  height: 1rem;\n}\n.ov-xlsx__tabs {\n  display: flex;\n  flex: 1;\n  align-items: flex-end;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.ov-xlsx__tab {\n  position: relative;\n  display: flex;\n  flex-shrink: 0;\n  max-width: 16rem;\n  align-items: center;\n  padding-inline: 1.5rem;\n  font-size: 15px;\n  font-weight: 500;\n  user-select: none;\n  cursor: pointer;\n  height: 2.25rem;\n  border: 1px solid #c8c8c8;\n  background: #e4e4e4;\n  color: #5a5a5a;\n  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.ov-xlsx__tab + .ov-xlsx__tab {\n  margin-left: -1px;\n}\n.ov-xlsx__tab:hover {\n  background: #d8d8d8;\n  color: #1a1a1a;\n}\n.ov-xlsx__tab--active {\n  margin-top: -1px;\n  z-index: 10;\n  height: 3rem;\n  background: #ffffff;\n  font-weight: 600;\n  color: #1a1a1a;\n  border: 1px solid #a8a8a8;\n  border-bottom: 1px solid #ffffff;\n}\n.ov-xlsx__tab-name {\n  max-width: 13rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n");
+
+// src/viewers/XlsxViewer.tsx
+import { useEffect as useEffect3, useMemo, useRef as useRef3, useState as useState3 } from "react";
+import ExcelJS from "exceljs";
+import * as XLSX from "xlsx";
+import { ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight3, Loader2 as Loader23 } from "lucide-react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function colLetter(n) {
+  let s = "";
+  while (n > 0) {
+    const m = (n - 1) % 26;
+    s = String.fromCharCode(65 + m) + s;
+    n = Math.floor((n - 1) / 26);
+  }
+  return s;
+}
+function letterToNum(letters) {
+  let n = 0;
+  for (const ch of letters) n = n * 26 + (ch.charCodeAt(0) - 64);
+  return n;
+}
+var THEME_COLORS = [
+  "#FFFFFF",
+  // 0: lt1 (background)
+  "#000000",
+  // 1: dk1 (text / borders)
+  "#E7E6E6",
+  // 2: lt2
+  "#44546A",
+  // 3: dk2
+  "#4472C4",
+  // 4: accent1
+  "#ED7D31",
+  // 5: accent2
+  "#A5A5A5",
+  // 6: accent3
+  "#FFC000",
+  // 7: accent4
+  "#5B9BD5",
+  // 8: accent5
+  "#70AD47"
+  // 9: accent6
+];
+var INDEXED_COLORS = [
+  "#000000",
+  "#FFFFFF",
+  "#FF0000",
+  "#00FF00",
+  "#0000FF",
+  "#FFFF00",
+  "#FF00FF",
+  "#00FFFF",
+  "#000000",
+  "#FFFFFF",
+  "#FF0000",
+  "#00FF00",
+  "#0000FF",
+  "#FFFF00",
+  "#FF00FF",
+  "#00FFFF",
+  "#800000",
+  "#008000",
+  "#000080",
+  "#808000",
+  "#800080",
+  "#008080",
+  "#C0C0C0",
+  "#808080",
+  "#9999FF",
+  "#993366",
+  "#FFFFCC",
+  "#CCFFFF",
+  "#660066",
+  "#FF8080",
+  "#0066CC",
+  "#CCCCFF",
+  "#000080",
+  "#FF00FF",
+  "#FFFF00",
+  "#00FFFF",
+  "#800080",
+  "#800000",
+  "#008080",
+  "#0000FF",
+  "#00CCFF",
+  "#CCFFFF",
+  "#CCFFCC",
+  "#FFFF99",
+  "#99CCFF",
+  "#FF99CC",
+  "#CC99FF",
+  "#FFCC99",
+  "#3366FF",
+  "#33CCCC",
+  "#99CC00",
+  "#FFCC00",
+  "#FF9900",
+  "#FF6600",
+  "#666699",
+  "#969696",
+  "#003366",
+  "#339966",
+  "#003300",
+  "#333300",
+  "#993300",
+  "#993366",
+  "#333399",
+  "#333333"
+];
+function argbToCss(color) {
+  if (!color) return void 0;
+  if (color.argb) {
+    const argb = color.argb;
+    const hex = argb.length === 8 ? argb.slice(2) : argb;
+    if (!/^[0-9a-fA-F]{6}$/.test(hex)) return void 0;
+    return `#${hex}`;
+  }
+  if (color.theme !== void 0) return THEME_COLORS[color.theme];
+  if (color.indexed !== void 0) return color.indexed === 64 ? "#000000" : INDEXED_COLORS[color.indexed];
+  return void 0;
+}
+var SCALE = 1.5;
+var JS_DATE_TOSTRING_RE = /^(Mon|Tue|Wed|Thu|Fri|Sat|Sun)\s/;
+function excelSerialToDate(serial) {
+  return new Date(Math.round((serial - 25569) * 864e5));
+}
+function fmtDate(d) {
+  return `${d.getUTCMonth() + 1}/${d.getUTCDate()}/${d.getUTCFullYear()}`;
+}
+var MONTH_LONG = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+var MONTH_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+var DAY_LONG = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+var DAY_SHORT = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+function serialToDateParts(serial) {
+  const frac = serial - Math.floor(serial);
+  const totalSec = Math.round(frac * 86400);
+  const h = Math.floor(totalSec / 3600);
+  const mi = Math.floor(totalSec % 3600 / 60);
+  const s = totalSec % 60;
+  const ds = Math.floor(serial);
+  if (ds <= 0) return { y: 1900, mo: 1, d: ds, dow: 6, h, mi, s };
+  if (ds === 60) return { y: 1900, mo: 2, d: 29, dow: 3, h, mi, s };
+  const adj = ds < 60 ? ds + 1 : ds;
+  const js = new Date(Math.round((adj - 25569) * 864e5));
+  return { y: js.getUTCFullYear(), mo: js.getUTCMonth() + 1, d: js.getUTCDate(), dow: js.getUTCDay(), h, mi, s };
+}
+function applyDateFmt(fmt, p) {
+  const section = fmt.split(";")[0];
+  const unquoted = section.replace(/"[^"]*"/g, "").replace(/\[.*?\]/g, "");
+  const hasHour = /h/i.test(unquoted);
+  const hasAmPm = /am\/pm|a\/p/i.test(unquoted);
+  let out = "", i = 0;
+  let prevHour = false;
+  while (i < section.length) {
+    if (section[i] === "[") {
+      const end = section.indexOf("]", i);
+      if (end >= 0) {
+        i = end + 1;
+        continue;
+      }
+    }
+    if (section[i] === "_") {
+      i += 2;
+      continue;
+    }
+    if (section[i] === "*") {
+      i += 2;
+      continue;
+    }
+    if (section[i] === '"') {
+      const end = section.indexOf('"', i + 1);
+      if (end < 0) {
+        out += section.slice(i + 1);
+        break;
+      }
+      out += section.slice(i + 1, end);
+      i = end + 1;
+      continue;
+    }
+    if (section[i] === "\\") {
+      out += section[i + 1] ?? "";
+      i += 2;
+      continue;
+    }
+    const rest = section.slice(i);
+    if (/^AM\/PM/i.test(rest)) {
+      out += p.h >= 12 ? "PM" : "AM";
+      i += 5;
+      prevHour = false;
+      continue;
+    }
+    if (/^A\/P/i.test(rest)) {
+      out += p.h >= 12 ? "P" : "A";
+      i += 3;
+      prevHour = false;
+      continue;
+    }
+    if (/^hh/i.test(rest)) {
+      const hr = hasAmPm ? p.h % 12 || 12 : p.h;
+      out += String(hr).padStart(2, "0");
+      i += 2;
+      prevHour = true;
+      continue;
+    }
+    if (/^h/i.test(rest)) {
+      const hr = hasAmPm ? p.h % 12 || 12 : p.h;
+      out += String(hr);
+      i += 1;
+      prevHour = true;
+      continue;
+    }
+    if (/^ss/i.test(rest)) {
+      out += String(p.s).padStart(2, "0");
+      i += 2;
+      prevHour = false;
+      continue;
+    }
+    if (/^s/i.test(rest)) {
+      out += String(p.s);
+      i += 1;
+      prevHour = false;
+      continue;
+    }
+    if (/^yyyy/i.test(rest)) {
+      out += String(p.y).padStart(4, "0");
+      i += 4;
+      prevHour = false;
+      continue;
+    }
+    if (/^yy/i.test(rest)) {
+      out += String(p.y % 100).padStart(2, "0");
+      i += 2;
+      prevHour = false;
+      continue;
+    }
+    if (/^mmmm/i.test(rest)) {
+      out += MONTH_LONG[p.mo - 1] ?? "";
+      i += 4;
+      prevHour = false;
+      continue;
+    }
+    if (/^mmm/i.test(rest)) {
+      out += MONTH_SHORT[p.mo - 1] ?? "";
+      i += 3;
+      prevHour = false;
+      continue;
+    }
+    if (/^mm/i.test(rest)) {
+      if (hasHour) {
+        out += String(p.mi).padStart(2, "0");
+      } else {
+        out += String(p.mo).padStart(2, "0");
+      }
+      i += 2;
+      prevHour = false;
+      continue;
+    }
+    if (/^m/i.test(rest)) {
+      if (hasHour && prevHour) {
+        out += String(p.mi);
+      } else {
+        out += String(p.mo);
+      }
+      i += 1;
+      prevHour = false;
+      continue;
+    }
+    if (/^dddd/i.test(rest)) {
+      out += DAY_LONG[p.dow] ?? "";
+      i += 4;
+      prevHour = false;
+      continue;
+    }
+    if (/^ddd/i.test(rest)) {
+      out += DAY_SHORT[p.dow] ?? "";
+      i += 3;
+      prevHour = false;
+      continue;
+    }
+    if (/^dd/i.test(rest)) {
+      out += String(p.d).padStart(2, "0");
+      i += 2;
+      prevHour = false;
+      continue;
+    }
+    if (/^d/i.test(rest)) {
+      out += String(p.d);
+      i += 1;
+      prevHour = false;
+      continue;
+    }
+    out += section[i];
+    i++;
+    prevHour = false;
+  }
+  return out;
+}
+function fmtExcelDate(d, numFmt) {
+  const serial = d.getTime() / 864e5 + 25569;
+  const parts = serialToDateParts(serial);
+  return numFmt && /[yYmMdDhHsS]/.test(numFmt) ? applyDateFmt(numFmt, parts) : fmtDate(d);
+}
+function fmtNumber(value, numFmt) {
+  if (!numFmt || numFmt === "General" || numFmt === "@") return null;
+  if (/[yY]/.test(numFmt) || /mmmm?/i.test(numFmt) || /[hH]/.test(numFmt)) return null;
+  const sections = numFmt.split(";");
+  let si = 0;
+  if (value < 0 && sections.length >= 2) si = 1;
+  else if (value === 0 && sections.length >= 3) si = 2;
+  const sec = sections[si];
+  let isPercent = false;
+  {
+    let inQ = false;
+    for (const ch of sec) {
+      if (ch === '"') inQ = !inQ;
+      else if (!inQ && ch === "%") {
+        isPercent = true;
+        break;
+      }
+    }
+  }
+  let prefix = "", suffix = "", numStr = "";
+  let inNum = false;
+  let i = 0;
+  while (i < sec.length) {
+    if (sec[i] === "[") {
+      const e = sec.indexOf("]", i);
+      i = e >= 0 ? e + 1 : i + 1;
+      continue;
+    }
+    if (sec[i] === "_") {
+      i += 2;
+      continue;
+    }
+    if (sec[i] === "*") {
+      i += 2;
+      continue;
+    }
+    if (sec[i] === '"') {
+      const e = sec.indexOf('"', i + 1);
+      const lit = e >= 0 ? sec.slice(i + 1, e) : sec.slice(i + 1);
+      inNum ? suffix += lit : prefix += lit;
+      i = e >= 0 ? e + 1 : sec.length;
+      continue;
+    }
+    if (sec[i] === "\\") {
+      inNum ? suffix += sec[i + 1] ?? "" : prefix += sec[i + 1] ?? "";
+      i += 2;
+      continue;
+    }
+    const ch = sec[i];
+    if ("$\u20AC\xA3\xA5".includes(ch)) {
+      inNum ? suffix += ch : prefix += ch;
+      i++;
+      continue;
+    }
+    if (ch === "(" || ch === ")") {
+      i++;
+      continue;
+    }
+    if ("#0?.".includes(ch) || ch === "," && inNum) {
+      inNum = true;
+      numStr += ch;
+      i++;
+      continue;
+    }
+    inNum ? suffix += ch : prefix += ch;
+    i++;
+  }
+  if (!/[#0]/.test(numStr)) {
+    const lit = (prefix + suffix).replace(/[$€£¥]/g, "").trim();
+    return lit || null;
+  }
+  const dotIdx = numStr.indexOf(".");
+  const decPlaces = dotIdx >= 0 ? (numStr.slice(dotIdx + 1).match(/^[#0?]+/) ?? [""])[0].length : 0;
+  const hasGroup = /[#0],[#0]/.test(numStr);
+  const absVal = Math.abs(isPercent ? value * 100 : value);
+  const formatted = absVal.toLocaleString("en-US", {
+    minimumFractionDigits: decPlaces,
+    maximumFractionDigits: decPlaces,
+    useGrouping: hasGroup
+  });
+  let result = `${prefix}${formatted}${suffix}`;
+  if (value < 0 && si === 0) result = `-${result}`;
+  else if (value < 0 && si === 1 && (sections[1].includes("(") || sections[1].includes(")"))) {
+    result = `(${result})`;
+  }
+  return result;
+}
+function getAccountingCurrency(numFmt) {
+  if (!numFmt) return null;
+  if (!/_\([$€£¥]\*/.test(numFmt) && !/_\(\*[$€£¥]/.test(numFmt)) return null;
+  const m = numFmt.match(/[$€£¥]/);
+  return m ? m[0] : null;
+}
+function effectiveValue(cell) {
+  const v = cell.value;
+  if (v !== null && typeof v === "object" && !(v instanceof Date) && ("formula" in v || "sharedFormula" in v)) {
+    return v.result ?? null;
+  }
+  return v;
+}
+function getCellText(cell) {
+  const val = effectiveValue(cell);
+  if (val !== null && typeof val === "object" && !(val instanceof Date) && "error" in val) {
+    return val.error ?? "";
+  }
+  if (typeof val === "string" && /^#[A-Z0-9\/]+[!?]?$/.test(val)) {
+    return val;
+  }
+  const text = cell.text ?? "";
+  if (val instanceof Date) {
+    if (isNaN(val.getTime())) return "";
+    return fmtExcelDate(val, cell.numFmt ?? "");
+  }
+  if (JS_DATE_TOSTRING_RE.test(text) || text === "Invalid Date") return "";
+  if (typeof val === "number") {
+    const numFmt = cell.numFmt ?? "";
+    const isDateTimeFmt = numFmt && (/[yY]/.test(numFmt) || /mmmm?/i.test(numFmt) || /[hH]/.test(numFmt) || /[dD]/.test(numFmt));
+    if (isDateTimeFmt) {
+      if (val >= 0) {
+        const d = excelSerialToDate(val);
+        if (!isNaN(d.getTime())) return fmtExcelDate(d, numFmt);
+      }
+      return text;
+    }
+    if (numFmt && numFmt !== "General" && numFmt !== "@") {
+      const formatted = fmtNumber(val, numFmt);
+      if (formatted !== null) return formatted;
+    }
+    if (text && !/^-?\d+\.?\d*$/.test(text)) return text;
+    if (!text) return Number.isInteger(val) ? String(val) : val.toLocaleString("en-US");
+  }
+  return text;
+}
+function borderStyle(b) {
+  if (!b?.style) return void 0;
+  const color = argbToCss(b.color) || "#000000";
+  const weight = b.style.includes("thick") || b.style.includes("medium") ? "2px" : "1px";
+  const kind = b.style.includes("dash") ? "dashed" : b.style.includes("dot") ? "dotted" : b.style.includes("double") ? "double" : "solid";
+  return `${weight} ${kind} ${color}`;
+}
+function buildRawResultMap(ws) {
+  const map = /* @__PURE__ */ new Map();
+  const sheetModel = ws.model;
+  for (const rawRow of sheetModel?.rows ?? []) {
+    const rn = rawRow?.number;
+    if (!rn || !rawRow.cells) continue;
+    for (const rc of rawRow.cells) {
+      if (!rc?.col) continue;
+      if ((rc.type === 6 || rc.formula !== void 0 || rc.sharedFormula !== void 0) && rc.result !== void 0) {
+        map.set(`${rn}:${rc.col}`, rc.result);
+      }
+    }
+  }
+  return map;
+}
+function formatRawResult(result, numFmt) {
+  if (result === null || result === void 0) return "";
+  if (typeof result === "object" && !Array.isArray(result) && !(result instanceof Date)) {
+    if ("error" in result) return result.error ?? "";
+  }
+  if (result instanceof Date) {
+    if (isNaN(result.getTime())) return "";
+    return fmtExcelDate(result, numFmt);
+  }
+  if (typeof result === "number") {
+    if (numFmt && numFmt !== "General" && numFmt !== "@") {
+      const f = fmtNumber(result, numFmt);
+      if (f !== null) return f;
+    }
+    return Number.isInteger(result) ? String(result) : result.toLocaleString("en-US");
+  }
+  if (typeof result === "string") return result;
+  if (typeof result === "boolean") return result ? "TRUE" : "FALSE";
+  return String(result);
+}
+function buildSheet(ws, sjSheet) {
+  const sjCells = /* @__PURE__ */ new Map();
+  let sjMaxRow = 0;
+  let sjMaxCol = 0;
+  if (sjSheet) {
+    for (const addr of Object.keys(sjSheet)) {
+      if (addr.startsWith("!")) continue;
+      const sjc = sjSheet[addr];
+      if (!sjc || !sjc.t || sjc.t === "z") continue;
+      const m = addr.match(/^([A-Z]+)(\d+)$/);
+      if (!m) continue;
+      const rowNum = parseInt(m[2], 10);
+      const colNum = letterToNum(m[1]);
+      if (rowNum > sjMaxRow) sjMaxRow = rowNum;
+      if (colNum > sjMaxCol) sjMaxCol = colNum;
+      sjCells.set(`${rowNum}:${colNum}`, sjc);
+    }
+  }
+  let originalCols = Math.max(ws.columnCount, sjMaxCol);
+  let cols = Math.max(originalCols, 26);
+  let rowsN = Math.max(ws.rowCount, 50);
+  const exRawModel = ws.model;
+  if (exRawModel?.rows) {
+    for (const rawRow of exRawModel.rows) {
+      if (rawRow?.number) rowsN = Math.max(rowsN, rawRow.number);
+    }
+  }
+  if (sjMaxRow > 0) rowsN = Math.max(rowsN, sjMaxRow);
+  if (sjMaxCol > 0) {
+    originalCols = Math.max(originalCols, sjMaxCol);
+    cols = Math.max(cols, sjMaxCol);
+  }
+  const rawResults = buildRawResultMap(ws);
+  const merges = {};
+  const covered = /* @__PURE__ */ new Set();
+  const mergeList = ws.model.merges || [];
+  for (const range of mergeList) {
+    const [a, b] = range.split(":");
+    const m1 = a.match(/([A-Z]+)(\d+)/);
+    const m2 = b.match(/([A-Z]+)(\d+)/);
+    if (!m1 || !m2) continue;
+    const c1 = letterToNum(m1[1]);
+    const r1 = parseInt(m1[2], 10);
+    const c2 = letterToNum(m2[1]);
+    const r2 = parseInt(m2[2], 10);
+    merges[`${r1}:${c1}`] = { rowSpan: r2 - r1 + 1, colSpan: c2 - c1 + 1 };
+    for (let r = r1; r <= r2; r++)
+      for (let c = c1; c <= c2; c++) if (!(r === r1 && c === c1)) covered.add(`${r}:${c}`);
+  }
+  const colWidths = [];
+  for (let c = 1; c <= cols; c++) {
+    const col = ws.getColumn(c);
+    if (col.hidden) {
+      colWidths[c - 1] = 0;
+      continue;
+    }
+    const w = col.width;
+    colWidths[c - 1] = w ? Math.max(Math.round((w * 7 + 5) * SCALE), 10) : Math.round(64 * SCALE);
+  }
+  const rowHeights = [];
+  const rows = [];
+  for (let r = 1; r <= rowsN; r++) {
+    const row = ws.getRow(r);
+    rowHeights[r - 1] = row.height ? Math.max(Math.round(row.height * 4 / 3 * SCALE), 6) : Math.round(20 * SCALE);
+    const cells = [];
+    const ccIndices = [];
+    for (let c = 1; c <= cols; c++) {
+      if (covered.has(`${r}:${c}`)) {
+        cells.push(null);
+        continue;
+      }
+      const cell = row.getCell(c);
+      const s = cell.style || {};
+      const style = {};
+      let isCenterContinuous = false;
+      if (s.font) {
+        if (s.font.bold) style.fontWeight = 600;
+        if (s.font.italic) style.fontStyle = "italic";
+        {
+          const dec = [];
+          if (s.font.underline) dec.push("underline");
+          if (s.font.strike) dec.push("line-through");
+          if (dec.length) style.textDecoration = dec.join(" ");
+        }
+        if (s.font.size) style.fontSize = `${Math.round(s.font.size * 4 / 3 * SCALE)}px`;
+        if (s.font.name) style.fontFamily = s.font.name;
+        const fc = argbToCss(s.font.color);
+        if (fc) style.color = fc;
+      }
+      if (s.fill && s.fill.type === "pattern" && s.fill.pattern === "solid") {
+        const bg = argbToCss(s.fill.fgColor);
+        if (bg) style.backgroundColor = bg;
+      }
+      if (s.alignment) {
+        const h = s.alignment.horizontal;
+        if (h) {
+          isCenterContinuous = h === "centerContinuous";
+          style.textAlign = isCenterContinuous || h === "distributed" ? "center" : h === "fill" ? "left" : h;
+        }
+        const v = s.alignment.vertical;
+        if (v) {
+          style.verticalAlign = v === "center" || v === "middle" ? "middle" : v === "top" ? "top" : "bottom";
+        }
+        if (s.alignment.wrapText) style.whiteSpace = "normal";
+        if (s.alignment.indent) style.paddingLeft = `${s.alignment.indent * 16 + 6}px`;
+      }
+      if (s.border) {
+        const t = borderStyle(s.border.top);
+        const l = borderStyle(s.border.left);
+        const bo = borderStyle(s.border.bottom);
+        const ri = borderStyle(s.border.right);
+        if (t) style.borderTop = t;
+        if (l) style.borderLeft = l;
+        if (bo) style.borderBottom = bo;
+        if (ri) style.borderRight = ri;
+      }
+      if (style.textAlign === void 0) {
+        const ev = effectiveValue(cell);
+        if (typeof ev === "number" || ev instanceof Date) style.textAlign = "right";
+      }
+      const merge = merges[`${r}:${c}`];
+      const sj = sjCells.get(`${r}:${c}`);
+      const numFmt = cell.numFmt || sj?.z || "";
+      const accountingCurrency = getAccountingCurrency(numFmt);
+      let text = "";
+      if (sj) {
+        if (sj.t === "e") {
+          text = sj.w ?? (typeof sj.v === "string" ? sj.v : "");
+        } else if (sj.t === "n" && typeof sj.v === "number") {
+          const isDateFmt = numFmt && (/[yY]/.test(numFmt) || /mmmm?/i.test(numFmt) || /[hH]/.test(numFmt) || /[dD]/.test(numFmt));
+          if (isDateFmt && sj.v >= 0) {
+            const d = excelSerialToDate(sj.v);
+            if (!isNaN(d.getTime())) text = fmtExcelDate(d, numFmt);
+          } else if (numFmt && numFmt !== "General" && numFmt !== "@") {
+            const formatted = fmtNumber(sj.v, numFmt);
+            if (formatted !== null) text = formatted;
+          }
+          if (!text) text = sj.w ?? String(sj.v);
+          if (style.textAlign === void 0) style.textAlign = "right";
+        } else if (sj.t === "s") {
+          text = sj.w ?? "";
+        } else if (sj.t === "str") {
+          text = sj.w ?? String(sj.v ?? "");
+        } else if (sj.t === "b") {
+          text = sj.v ? "TRUE" : "FALSE";
+        } else {
+          text = sj.w ?? String(sj.v ?? "");
+        }
+      }
+      if (!text) text = getCellText(cell);
+      if (!text) {
+        const raw = rawResults.get(`${r}:${c}`);
+        if (raw !== void 0) {
+          text = formatRawResult(raw, numFmt);
+          if (style.textAlign === void 0) {
+            if (typeof raw === "number" || raw instanceof Date) style.textAlign = "right";
+          }
+        }
+      }
+      if (accountingCurrency && text) {
+        text = text.replace(/[$€£¥]/g, "").trim() || text;
+      }
+      cells.push({
+        key: `${r}:${c}`,
+        text,
+        accountingPrefix: accountingCurrency && text ? accountingCurrency : void 0,
+        style,
+        rowSpan: merge?.rowSpan ?? 1,
+        colSpan: merge?.colSpan ?? 1
+      });
+      if (isCenterContinuous && text) ccIndices.push(cells.length - 1);
+    }
+    for (const idx of ccIndices) {
+      const cc = cells[idx];
+      for (let cj = idx + 1; cj < originalCols; cj++) {
+        const adj = cells[cj];
+        if (adj === null || adj.text !== "") break;
+        cc.colSpan++;
+        cells[cj] = null;
+      }
+    }
+    for (let idx = 0; idx < cells.length; idx++) {
+      const cell = cells[idx];
+      if (!cell || !cell.text || cell.colSpan > 1 || cell.style.whiteSpace === "normal") continue;
+      const align = cell.style.textAlign;
+      if (align === "right" || align === "center") continue;
+      if (cell.style.borderRight) continue;
+      for (let cj = idx + 1; cj < originalCols; cj++) {
+        const adj = cells[cj];
+        if (!adj || adj.text !== "") break;
+        if (adj.style.borderLeft) break;
+        if (adj.style.borderRight) {
+          cell.style.borderRight = adj.style.borderRight;
+          cells[cj] = null;
+          cell.colSpan++;
+          break;
+        }
+        cells[cj] = null;
+        cell.colSpan++;
+      }
+    }
+    rows.push(cells);
+  }
+  return { name: ws.name, rows, colWidths, rowHeights, cols };
+}
+function XlsxViewer({
+  data,
+  className,
+  onError
+}) {
+  const [sheets, setSheets] = useState3([]);
+  const [active, setActive] = useState3(0);
+  const [loading, setLoading] = useState3(true);
+  const [error, setError] = useState3(null);
+  const tabBarRef = useRef3(null);
+  const scrollTabs = (dir) => {
+    tabBarRef.current?.scrollBy({ left: dir === "left" ? -160 : 160, behavior: "smooth" });
+  };
+  useEffect3(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    (async () => {
+      try {
+        const wb = new ExcelJS.Workbook();
+        await wb.xlsx.load(data.slice(0));
+        let sjSheets = [];
+        try {
+          const sjWb = XLSX.read(new Uint8Array(data), {
+            type: "array",
+            cellFormula: true,
+            cellText: true,
+            cellNF: true,
+            cellDates: false,
+            sheetRows: 0
+          });
+          const visibleWs = wb.worksheets.filter(
+            (ws) => ws.state !== "hidden" && ws.state !== "veryHidden"
+          );
+          sjSheets = visibleWs.map((ws, idx) => {
+            if (sjWb.Sheets[ws.name]) return sjWb.Sheets[ws.name];
+            const lc = ws.name.toLowerCase();
+            const found = sjWb.SheetNames.find((n) => n.toLowerCase() === lc);
+            if (found && sjWb.Sheets[found]) return sjWb.Sheets[found];
+            const sjName = sjWb.SheetNames[idx];
+            return sjName && sjWb.Sheets[sjName] ? sjWb.Sheets[sjName] : void 0;
+          });
+        } catch (sjErr) {
+          console.warn("[XlsxViewer] SheetJS failed, falling back to ExcelJS only:", sjErr);
+        }
+        const visibleWorksheets = wb.worksheets.filter(
+          (ws) => ws.state !== "hidden" && ws.state !== "veryHidden"
+        );
+        const built = visibleWorksheets.map(
+          (ws, idx) => buildSheet(ws, sjSheets[idx])
+        );
+        if (cancelled) return;
+        setSheets(built);
+        setActive(0);
+      } catch (e) {
+        const err = e instanceof Error ? e : new Error("Failed to read spreadsheet");
+        if (!cancelled) {
+          setError(err.message);
+          onError?.(err);
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [data, onError]);
+  const sheet = sheets[active];
+  const headerCols = useMemo(() => sheet ? Array.from({ length: sheet.cols }, (_, i) => i + 1) : [], [sheet]);
+  if (loading)
+    return /* @__PURE__ */ jsxs3("div", { className: `ov-xlsx__loading${className ? ` ${className}` : ""}`, children: [
+      /* @__PURE__ */ jsx5(Loader23, { className: "ov-xlsx__loading-icon" }),
+      /* @__PURE__ */ jsx5("span", { className: "ov-xlsx__loading-text", children: "Reading spreadsheet\u2026" })
+    ] });
+  if (error)
+    return /* @__PURE__ */ jsx5("div", { className: `ov-xlsx__error${className ? ` ${className}` : ""}`, children: error });
+  if (!sheet) return null;
+  return /* @__PURE__ */ jsxs3("div", { className: `ov-xlsx${className ? ` ${className}` : ""}`, children: [
+    /* @__PURE__ */ jsx5("div", { className: "ov-xlsx__grid-area", children: /* @__PURE__ */ jsxs3("table", { className: "ov-xlsx__table", style: { tableLayout: "fixed", fontFamily: "Calibri, 'Segoe UI', Arial, sans-serif" }, children: [
+      /* @__PURE__ */ jsxs3("colgroup", { children: [
+        /* @__PURE__ */ jsx5("col", { style: { width: 44, minWidth: 44 } }),
+        headerCols.map((c) => /* @__PURE__ */ jsx5("col", { style: { width: sheet.colWidths[c - 1], minWidth: sheet.colWidths[c - 1] } }, c))
+      ] }),
+      /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsxs3("tr", { children: [
+        /* @__PURE__ */ jsx5("th", { className: "ov-xlsx__corner" }),
+        headerCols.map((c) => {
+          const w = sheet.colWidths[c - 1];
+          if (w === 0) return /* @__PURE__ */ jsx5("th", { style: { width: 0, padding: 0, border: "none" } }, c);
+          return /* @__PURE__ */ jsx5("th", { className: "ov-xlsx__col-header", children: colLetter(c) }, c);
+        })
+      ] }) }),
+      /* @__PURE__ */ jsx5("tbody", { children: sheet.rows.map((row, ri) => {
+        const h = sheet.rowHeights[ri];
+        if (h === 0) return null;
+        return /* @__PURE__ */ jsxs3("tr", { style: { height: h }, children: [
+          /* @__PURE__ */ jsx5("td", { className: "ov-xlsx__row-header", children: ri + 1 }),
+          row.map(
+            (cell) => cell === null ? null : /* @__PURE__ */ jsx5(
+              "td",
+              {
+                rowSpan: cell.rowSpan,
+                colSpan: cell.colSpan,
+                className: "ov-xlsx__cell",
+                style: cell.style,
+                "data-ov-bold": cell.style.fontWeight === 600 ? "" : void 0,
+                children: cell.accountingPrefix ? /* @__PURE__ */ jsxs3("span", { className: "ov-xlsx__cell-accounting", style: { whiteSpace: "nowrap" }, children: [
+                  /* @__PURE__ */ jsx5("span", { children: cell.accountingPrefix }),
+                  /* @__PURE__ */ jsx5("span", { style: { flex: 1, textAlign: "right" }, children: cell.text })
+                ] }) : /* @__PURE__ */ jsx5(
+                  "span",
+                  {
+                    className: "ov-xlsx__cell-text",
+                    style: { whiteSpace: cell.style.whiteSpace ?? "nowrap" },
+                    children: cell.text
+                  }
+                )
+              },
+              cell.key
+            )
+          )
+        ] }, ri);
+      }) })
+    ] }) }),
+    /* @__PURE__ */ jsxs3("div", { className: "ov-xlsx__tabbar", children: [
+      sheets.length > 5 && /* @__PURE__ */ jsxs3("div", { className: "ov-xlsx__tabnav", children: [
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            onClick: () => scrollTabs("left"),
+            "aria-label": "Scroll sheet tabs left",
+            className: "ov-xlsx__tabnav-btn",
+            children: /* @__PURE__ */ jsx5(ChevronLeft3, { className: "ov-xlsx__tabnav-icon" })
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            onClick: () => scrollTabs("right"),
+            "aria-label": "Scroll sheet tabs right",
+            className: "ov-xlsx__tabnav-btn",
+            children: /* @__PURE__ */ jsx5(ChevronRight3, { className: "ov-xlsx__tabnav-icon" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx5("div", { ref: tabBarRef, className: "ov-xlsx__tabs", children: sheets.map((s, i) => /* @__PURE__ */ jsx5(
+        "button",
+        {
+          onClick: () => setActive(i),
+          title: s.name,
+          className: `ov-xlsx__tab${i === active ? " ov-xlsx__tab--active" : ""}`,
+          children: /* @__PURE__ */ jsx5("span", { className: "ov-xlsx__tab-name", children: s.name })
+        },
+        i
+      )) })
+    ] })
+  ] });
+}
+
+// src/plugins/XlsxPlugin.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function XlsxPluginComponent({ data, onError }) {
+  return /* @__PURE__ */ jsx6(XlsxViewer, { data, onError });
+}
+var XlsxPlugin = {
+  id: "xlsx",
+  detect: (ext, mime) => ext === "xlsx" || mime.includes("spreadsheetml"),
+  needsClip: () => true,
+  component: XlsxPluginComponent
+};
+
+// src/plugins/registry.ts
+var REGISTRY = [
+  DocxPlugin,
+  PptxPlugin,
+  XlsxPlugin
+  // PdfPlugin,   — future
+  // ImagePlugin, — future
+];
+function detectPlugin(file, filename) {
+  const name = file instanceof File ? file.name : filename ?? "";
+  const ext = (name.split(".").pop() ?? "").toLowerCase();
+  const mime = file instanceof Blob && !(file instanceof File) ? file.type : "";
+  return REGISTRY.find((p) => p.detect(ext, mime)) ?? null;
+}
+
+// src/components/OfficeViewer.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var MESSAGES = {
+  LOADING: "Loading\u2026",
+  LOAD_FAILED: "Failed to load file",
+  UNSUPPORTED: "Unsupported file type. Please provide a .docx, .xlsx, or .pptx file."
+};
+var LABELS = {
+  VIEW_MODE: "View Mode"
+};
+var CLS = {
+  CONTAINER: "ov-container",
+  LOADING: "ov-loading",
+  SPINNER: "ov-spinner",
+  ERROR: "ov-error",
+  TOOLBAR: "ov-toolbar",
+  TOOLBAR_LABEL: "ov-toolbar-label",
+  SELECT_WRAP: "ov-select-wrap",
+  SELECT: "ov-select",
+  SELECT_ICON: "ov-select-icon",
+  VIEWER: "ov-viewer",
+  VIEWER_CLIP: "ov-viewer--clip"
+};
+var CHEVRON = {
+  VIEW_BOX: "0 0 10 6",
+  PATH: "M1 1l4 4 4-4",
+  STROKE_WIDTH: "1.5"
+};
+async function toBuffer(file) {
+  if (file instanceof ArrayBuffer) return file;
+  return file.arrayBuffer();
+}
+function LoadingState() {
+  return /* @__PURE__ */ jsxs4("div", { className: CLS.LOADING, children: [
+    /* @__PURE__ */ jsx7(Loader24, { className: CLS.SPINNER }),
+    /* @__PURE__ */ jsx7("span", { children: MESSAGES.LOADING })
+  ] });
+}
+function ErrorState({ message }) {
+  return /* @__PURE__ */ jsx7("div", { className: CLS.ERROR, children: message });
+}
+function UnsupportedState() {
+  return /* @__PURE__ */ jsx7("div", { className: CLS.ERROR, children: MESSAGES.UNSUPPORTED });
+}
+function OfficeViewer({
+  file,
+  filename,
+  className,
+  onError
+}) {
+  const [data, setData] = useState4(null);
+  const [plugin, setPlugin] = useState4(null);
+  const [viewMode, setViewMode] = useState4("");
+  const [loading, setLoading] = useState4(true);
+  const [error, setError] = useState4(null);
+  useEffect4(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    const p = detectPlugin(file, filename);
+    setPlugin(p);
+    setViewMode(p?.defaultMode ?? "");
+    toBuffer(file).then((ab) => {
+      if (!cancelled) {
+        setData(ab);
+        setLoading(false);
+      }
+    }).catch((e) => {
+      if (cancelled) return;
+      const err = e instanceof Error ? e : new Error(MESSAGES.LOAD_FAILED);
+      setError(err.message);
+      onError?.(err);
+      setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [file, filename, onError]);
+  const handleError = (e) => {
+    setError(e.message);
+    onError?.(e);
+  };
+  const containerCls = `${CLS.CONTAINER}${className ? ` ${className}` : ""}`;
+  if (loading) {
+    return /* @__PURE__ */ jsx7("div", { className: containerCls, children: /* @__PURE__ */ jsx7(LoadingState, {}) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx7("div", { className: containerCls, children: /* @__PURE__ */ jsx7(ErrorState, { message: error }) });
+  }
+  if (!plugin) {
+    return /* @__PURE__ */ jsx7("div", { className: containerCls, children: /* @__PURE__ */ jsx7(UnsupportedState, {}) });
+  }
+  if (!data) return null;
+  const needsClip = plugin.needsClip?.(viewMode) ?? false;
+  const viewerCls = `${CLS.VIEWER}${needsClip ? ` ${CLS.VIEWER_CLIP}` : ""}`;
+  const ViewerComponent = plugin.component;
+  return /* @__PURE__ */ jsxs4("div", { className: containerCls, "data-office-viewer": true, children: [
+    plugin.viewModes && plugin.viewModes.length > 0 && /* @__PURE__ */ jsxs4("div", { className: CLS.TOOLBAR, children: [
+      /* @__PURE__ */ jsx7("span", { className: CLS.TOOLBAR_LABEL, children: LABELS.VIEW_MODE }),
+      /* @__PURE__ */ jsxs4("div", { className: CLS.SELECT_WRAP, children: [
+        /* @__PURE__ */ jsx7(
+          "select",
+          {
+            value: viewMode,
+            onChange: (e) => setViewMode(e.target.value),
+            className: CLS.SELECT,
+            children: plugin.viewModes.map(({ value, label }) => /* @__PURE__ */ jsx7("option", { value, children: label }, value))
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "svg",
+          {
+            className: CLS.SELECT_ICON,
+            viewBox: CHEVRON.VIEW_BOX,
+            fill: "none",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx7(
+              "path",
+              {
+                d: CHEVRON.PATH,
+                stroke: "currentColor",
+                strokeWidth: CHEVRON.STROKE_WIDTH,
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx7("div", { className: viewerCls, children: /* @__PURE__ */ jsx7(ViewerComponent, { data, mode: viewMode, onError: handleError }) })
+  ] });
+}
+export {
+  OfficeViewer
+};