@squadbase/vantage 0.5.3 → 0.6.0-dev.3cc6138

package/dist/table/index.js

@@ -0,0 +1,680 @@
+import { FILE_PAGE_MAX_ROWS, FILE_PAGE_MAX_BYTES } from '../chunk-TDUIW7LD.js';
+import { useQuery } from '../chunk-PVTHHV7X.js';
+import '../chunk-DTDVSFRY.js';
+import { Loading, ErrorState } from '../chunk-5ZOP4SQR.js';
+import { PageShell, PageShellHeader, PageShellHeading, PageShellTitle, PageShellMeta, PageShellActions, PageShellContent } from '../chunk-PLST5Q7T.js';
+import { Button } from '../chunk-MXI3PZFT.js';
+import { cn } from '../chunk-A2UUGASH.js';
+import { useRef, useState, useMemo, useLayoutEffect, useEffect, useCallback } from 'react';
+import { DownloadIcon } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// @squadbase/vantage — generated build. Do not edit.
+
+// src/table/infer.ts
+var TYPE_SAMPLE_ROWS = 500;
+var TYPE_CONFIDENCE = 0.9;
+function isEmpty(value) {
+  return value === null || value === void 0 || value === "";
+}
+var ISO_DATE = /^\d{4}-\d{2}-\d{2}(?:[T ]\d{2}:\d{2}(?::\d{2})?)?$/;
+function classify(value) {
+  if (value instanceof Date) return "date";
+  if (typeof value === "number" && Number.isFinite(value)) return "number";
+  if (typeof value === "string" && ISO_DATE.test(value)) return "date";
+  return "text";
+}
+function toColumns(header, width, body) {
+  const columns = [];
+  for (let index = 0; index < width; index++) {
+    const raw = header[index];
+    const label = isEmpty(raw) ? "" : String(raw).trim();
+    let numbers = 0;
+    let dates = 0;
+    let filled = 0;
+    for (let row = 0; row < Math.min(body.length, TYPE_SAMPLE_ROWS); row++) {
+      const cell = body[row]?.[index];
+      if (isEmpty(cell)) continue;
+      filled++;
+      const kind = classify(cell);
+      if (kind === "number") numbers++;
+      else if (kind === "date") dates++;
+    }
+    let format = "text";
+    if (filled > 0) {
+      if (numbers / filled >= TYPE_CONFIDENCE) format = "number";
+      else if (dates / filled >= TYPE_CONFIDENCE) format = "date";
+    }
+    columns.push({ key: `c${index}`, label, format });
+  }
+  return columns;
+}
+function toSheet(name, rows) {
+  if (rows.length === 0) {
+    return { name, columns: [], rows: [], totalRows: 0, truncated: false };
+  }
+  const header = rows[0] ?? [];
+  const body = rows.slice(1);
+  const width = rows.reduce((max, row) => Math.max(max, row.length), 0);
+  const truncated = body.length > FILE_PAGE_MAX_ROWS;
+  const kept = truncated ? body.slice(0, FILE_PAGE_MAX_ROWS) : body;
+  return {
+    name,
+    columns: toColumns(header, width, kept),
+    // Pad short rows so every row has a value at every column index; ragged
+    // rows are common in hand-edited CSV and would otherwise read as holes.
+    rows: kept.map((row) => Array.from({ length: width }, (_, i) => row[i] ?? null)),
+    totalRows: body.length,
+    truncated
+  };
+}
+var numberFormat = new Intl.NumberFormat();
+function formatCell(value, format) {
+  if (isEmpty(value)) return "";
+  if (format === "date" && typeof value === "string") return value;
+  if (format === "date" && value instanceof Date) return value.toLocaleDateString();
+  if (format === "number" && typeof value === "number") return numberFormat.format(value);
+  if (value instanceof Date) return value.toLocaleString();
+  if (typeof value === "boolean") return value ? "TRUE" : "FALSE";
+  return String(value);
+}
+
+// src/table/parse.ts
+var FilePageError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "FilePageError";
+  }
+};
+function megabytes(bytes) {
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+function decodeCsv(buffer) {
+  const bytes = new Uint8Array(buffer);
+  const hasBom = bytes[0] === 239 && bytes[1] === 187 && bytes[2] === 191;
+  const body = hasBom ? bytes.subarray(3) : bytes;
+  const utf8 = new TextDecoder("utf-8").decode(body);
+  const replacements = (utf8.match(/�/g) ?? []).length;
+  if (replacements > 0 && replacements / Math.max(utf8.length, 1) > 5e-4) {
+    try {
+      return new TextDecoder("shift-jis").decode(body);
+    } catch {
+    }
+  }
+  return utf8;
+}
+async function parseCsv(buffer) {
+  const { default: Papa } = await import('papaparse');
+  const text = decodeCsv(buffer);
+  const result = Papa.parse(text, {
+    header: false,
+    dynamicTyping: true,
+    skipEmptyLines: "greedy"
+  });
+  return { sheets: [toSheet("Sheet1", result.data)] };
+}
+async function parseXlsx(buffer) {
+  const { default: readXlsxFile } = await import('read-excel-file/browser');
+  const sheets = await readXlsxFile(buffer);
+  return {
+    sheets: sheets.map((sheet) => toSheet(sheet.sheet, sheet.data))
+  };
+}
+async function loadWorkbook(src, kind) {
+  let buffer;
+  try {
+    const response = await fetch(src);
+    if (!response.ok) {
+      throw new FilePageError(`Could not load the file (HTTP ${response.status}).`);
+    }
+    buffer = await response.arrayBuffer();
+  } catch (err) {
+    if (err instanceof FilePageError) throw err;
+    throw new FilePageError(`Could not load the file: ${err.message}`);
+  }
+  if (buffer.byteLength > FILE_PAGE_MAX_BYTES) {
+    throw new FilePageError(
+      `This file is ${megabytes(buffer.byteLength)}, over the ${megabytes(
+        FILE_PAGE_MAX_BYTES
+      )} limit for a data-file page. Download it, or serve the data from server/api/ and render it with DataTable.`
+    );
+  }
+  try {
+    switch (kind) {
+      case "csv":
+        return await parseCsv(buffer);
+      case "xlsx":
+        return await parseXlsx(buffer);
+      default:
+        throw new FilePageError(`No viewer for ".${kind}" files.`);
+    }
+  } catch (err) {
+    if (err instanceof FilePageError) throw err;
+    throw new FilePageError(
+      `This file could not be read. It may be corrupt, password-protected, or not really a .${kind} file. (${err.message})`
+    );
+  }
+}
+var ROW_HEIGHT = 22;
+var HEAD_HEIGHT = 22;
+var MIN_GUTTER_WIDTH = 44;
+var MIN_COL_WIDTH = 56;
+var MAX_COL_WIDTH = 420;
+var FILLER_COL_WIDTH = 100;
+var COL_PADDING = 18;
+var OVERSCAN_ROWS = 8;
+var OVERSCAN_COLS = 2;
+var WIDTH_SAMPLE_ROWS = 200;
+var CELL_FONT = '13px ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif';
+function columnLabel(index) {
+  let label = "";
+  for (let n = index; n >= 0; n = Math.floor(n / 26) - 1) {
+    label = String.fromCharCode(65 + n % 26) + label;
+  }
+  return label;
+}
+function measureWidths(sheet) {
+  const context = typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d");
+  if (context) context.font = CELL_FONT;
+  const widthOf = (text) => context ? context.measureText(text).width : text.length * 7.2;
+  const stride = Math.max(1, Math.ceil(sheet.rows.length / WIDTH_SAMPLE_ROWS));
+  return sheet.columns.map((column, index) => {
+    let max = widthOf(column.label);
+    for (let row = 0; row < sheet.rows.length; row += stride) {
+      const text = formatCell(sheet.rows[row]?.[index], column.format);
+      if (text !== "") max = Math.max(max, widthOf(text));
+    }
+    return Math.min(MAX_COL_WIDTH, Math.max(MIN_COL_WIDTH, Math.ceil(max) + COL_PADDING));
+  });
+}
+function runningOffsets(widths) {
+  const offsets = [0];
+  for (const width of widths) offsets.push(offsets[offsets.length - 1] + width);
+  return offsets;
+}
+function columnAt(offsets, x) {
+  let low = 0;
+  let high = offsets.length - 2;
+  while (low < high) {
+    const mid = low + high + 1 >> 1;
+    if (offsets[mid] <= x) low = mid;
+    else high = mid - 1;
+  }
+  return Math.max(0, low);
+}
+function SheetGrid({ sheet, className }) {
+  const scrollRef = useRef(null);
+  const [scroll, setScroll] = useState({ top: 0, left: 0 });
+  const [viewport, setViewport] = useState({ width: 0, height: 0 });
+  const [selected, setSelected] = useState({ row: 0, col: 0 });
+  const dataWidths = useMemo(() => measureWidths(sheet), [sheet]);
+  const dataCols = sheet.columns.length;
+  const dataRows = sheet.rows.length;
+  const gutterWidth = Math.max(MIN_GUTTER_WIDTH, String(dataRows + 1).length * 8 + 16);
+  const dataWidth = dataWidths.reduce((sum, width) => sum + width, 0);
+  const fillerCols = Math.max(
+    0,
+    Math.ceil((viewport.width - gutterWidth - dataWidth) / FILLER_COL_WIDTH)
+  );
+  const fillerRows = Math.max(
+    0,
+    Math.ceil((viewport.height - HEAD_HEIGHT - (dataRows + 1) * ROW_HEIGHT) / ROW_HEIGHT)
+  );
+  const colCount = dataCols + fillerCols;
+  const rowCount = dataRows + fillerRows;
+  const widths = useMemo(
+    () => [...dataWidths, ...Array.from({ length: fillerCols }, () => FILLER_COL_WIDTH)],
+    [dataWidths, fillerCols]
+  );
+  const offsets = useMemo(() => runningOffsets(widths), [widths]);
+  const totalWidth = offsets[offsets.length - 1] ?? 0;
+  useLayoutEffect(() => {
+    const element = scrollRef.current;
+    if (!element) return;
+    const measure = () => setViewport({ width: element.clientWidth, height: element.clientHeight });
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  useEffect(() => {
+    setSelected({ row: 0, col: 0 });
+    scrollRef.current?.scrollTo({ top: 0, left: 0 });
+  }, [sheet]);
+  const firstRow = Math.max(0, Math.floor(scroll.top / ROW_HEIGHT) - OVERSCAN_ROWS);
+  const lastRow = Math.min(
+    rowCount,
+    Math.ceil((scroll.top + viewport.height - HEAD_HEIGHT - ROW_HEIGHT) / ROW_HEIGHT) + OVERSCAN_ROWS
+  );
+  const firstCol = Math.max(0, columnAt(offsets, scroll.left) - OVERSCAN_COLS);
+  const lastCol = Math.min(
+    colCount,
+    columnAt(offsets, scroll.left + viewport.width) + 1 + OVERSCAN_COLS
+  );
+  const leadWidth = offsets[firstCol] ?? 0;
+  const tailWidth = totalWidth - (offsets[lastCol] ?? totalWidth);
+  const visibleCols = Array.from({ length: Math.max(0, lastCol - firstCol) }, (_, i) => firstCol + i);
+  const reveal = useCallback(
+    (next) => {
+      const element = scrollRef.current;
+      if (!element) return;
+      if (next.row > 0) {
+        const top = HEAD_HEIGHT + ROW_HEIGHT + (next.row - 1) * ROW_HEIGHT;
+        const frozen = HEAD_HEIGHT + ROW_HEIGHT;
+        if (top - element.scrollTop < frozen) element.scrollTop = top - frozen;
+        else if (top + ROW_HEIGHT - element.scrollTop > element.clientHeight) {
+          element.scrollTop = top + ROW_HEIGHT - element.clientHeight;
+        }
+      }
+      const left = offsets[next.col] ?? 0;
+      const width = widths[next.col] ?? 0;
+      if (left - element.scrollLeft < 0) element.scrollLeft = left;
+      else if (left + width + gutterWidth - element.scrollLeft > element.clientWidth) {
+        element.scrollLeft = left + width + gutterWidth - element.clientWidth;
+      }
+    },
+    [gutterWidth, offsets, widths]
+  );
+  const cellText = useCallback(
+    (row, col) => {
+      const column = sheet.columns[col];
+      if (!column) return "";
+      if (row === 0) return column.label;
+      return formatCell(sheet.rows[row - 1]?.[col], column.format);
+    },
+    [sheet]
+  );
+  const onKeyDown = useCallback(
+    (event) => {
+      const step = (rows, cols, escapable = false) => {
+        const next = {
+          row: Math.min(dataRows, Math.max(0, selected.row + rows)),
+          col: Math.min(dataCols - 1, Math.max(0, selected.col + cols))
+        };
+        const moved = next.row !== selected.row || next.col !== selected.col;
+        if (moved || !escapable) event.preventDefault();
+        if (!moved) return;
+        setSelected(next);
+        reveal(next);
+      };
+      const page = Math.max(1, Math.floor(viewport.height / ROW_HEIGHT) - 1);
+      switch (event.key) {
+        case "ArrowDown":
+          return step(1, 0);
+        case "ArrowUp":
+          return step(-1, 0);
+        case "Tab":
+          return step(0, event.shiftKey ? -1 : 1, true);
+        case "ArrowRight":
+          return step(0, 1);
+        case "ArrowLeft":
+          return step(0, -1);
+        case "PageDown":
+          return step(page, 0);
+        case "PageUp":
+          return step(-page, 0);
+        case "Home":
+          return step(event.ctrlKey || event.metaKey ? -dataRows : 0, -dataCols);
+        case "End":
+          return step(event.ctrlKey || event.metaKey ? dataRows : 0, dataCols);
+        case "c":
+        case "C":
+          if (event.metaKey || event.ctrlKey) {
+            navigator.clipboard?.writeText(cellText(selected.row, selected.col)).catch(() => {
+            });
+          }
+          return;
+        default:
+          return;
+      }
+    },
+    [cellText, dataCols, dataRows, reveal, selected, viewport.height]
+  );
+  if (dataCols === 0) {
+    return /* @__PURE__ */ jsx("p", { className: cn("p-4 text-sm text-muted-foreground", className), children: "This sheet is empty." });
+  }
+  const select = (row, col) => {
+    setSelected({ row, col });
+    scrollRef.current?.focus({ preventScroll: true });
+  };
+  const rowStyle = { height: ROW_HEIGHT, width: gutterWidth + totalWidth };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: scrollRef,
+      role: "grid",
+      "aria-label": sheet.name,
+      "aria-rowcount": dataRows + 1,
+      "aria-colcount": dataCols,
+      tabIndex: 0,
+      onScroll: (event) => setScroll({ top: event.currentTarget.scrollTop, left: event.currentTarget.scrollLeft }),
+      onKeyDown,
+      className: cn(
+        "relative h-full overflow-auto bg-background text-[13px] outline-none select-none [overscroll-behavior:contain]",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { role: "rowgroup", style: { width: gutterWidth + totalWidth }, children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "sticky top-0 z-40 flex",
+            style: { ...rowStyle, height: HEAD_HEIGHT },
+            role: "row",
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "sticky left-0 z-10 shrink-0 border-r border-b border-border bg-muted",
+                  style: { width: gutterWidth, height: HEAD_HEIGHT }
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b border-border bg-muted", style: { width: leadWidth } }),
+              visibleCols.map((col) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: col < dataCols ? "columnheader" : "presentation",
+                  "aria-colindex": col < dataCols ? col + 1 : void 0,
+                  onMouseDown: col < dataCols ? () => select(selected.row, col) : void 0,
+                  className: cn(
+                    "flex shrink-0 items-center justify-center border-r border-b border-border bg-muted text-[11px] text-muted-foreground",
+                    selected.col === col && col < dataCols && "bg-accent font-medium text-foreground"
+                  ),
+                  style: { width: widths[col], height: HEAD_HEIGHT },
+                  children: columnLabel(col)
+                },
+                col
+              )),
+              /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b border-border bg-muted", style: { width: tailWidth } })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "sticky z-30 flex bg-background",
+            style: { ...rowStyle, top: HEAD_HEIGHT },
+            role: "row",
+            children: [
+              /* @__PURE__ */ jsx(
+                RowHeader,
+                {
+                  label: "1",
+                  width: gutterWidth,
+                  active: selected.row === 0,
+                  onSelect: () => select(0, selected.col)
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b border-foreground/25", style: { width: leadWidth } }),
+              visibleCols.map((col) => /* @__PURE__ */ jsx(
+                Cell,
+                {
+                  width: widths[col],
+                  format: "text",
+                  text: sheet.columns[col]?.label ?? "",
+                  header: true,
+                  selected: selected.row === 0 && selected.col === col,
+                  onSelect: col < dataCols ? () => select(0, col) : void 0,
+                  colIndex: col < dataCols ? col : void 0
+                },
+                col
+              )),
+              /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b border-foreground/25", style: { width: tailWidth } })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { role: "presentation", className: "relative", style: { height: rowCount * ROW_HEIGHT }, children: Array.from({ length: Math.max(0, lastRow - firstRow) }, (_, offset) => {
+          const row = firstRow + offset;
+          const cells = sheet.rows[row];
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "row",
+              "aria-rowindex": row < dataRows ? row + 2 : void 0,
+              className: "absolute flex",
+              style: { ...rowStyle, top: row * ROW_HEIGHT },
+              children: [
+                /* @__PURE__ */ jsx(
+                  RowHeader,
+                  {
+                    label: String(row + 2),
+                    width: gutterWidth,
+                    active: selected.row === row + 1,
+                    onSelect: row < dataRows ? () => select(row + 1, selected.col) : void 0
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "shrink-0", style: { width: leadWidth } }),
+                visibleCols.map((col) => {
+                  const column = sheet.columns[col];
+                  return /* @__PURE__ */ jsx(
+                    Cell,
+                    {
+                      width: widths[col],
+                      format: column?.format ?? "text",
+                      text: column ? formatCell(cells?.[col], column.format) : "",
+                      selected: selected.row === row + 1 && selected.col === col,
+                      onSelect: row < dataRows && col < dataCols ? () => select(row + 1, col) : void 0,
+                      colIndex: col < dataCols ? col : void 0
+                    },
+                    col
+                  );
+                }),
+                /* @__PURE__ */ jsx("div", { className: "shrink-0", style: { width: tailWidth } })
+              ]
+            },
+            row
+          );
+        }) })
+      ] })
+    }
+  );
+}
+SheetGrid.displayName = "SheetGrid";
+function RowHeader({
+  label,
+  width,
+  active,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: onSelect ? "rowheader" : "presentation",
+      onMouseDown: onSelect,
+      className: cn(
+        // Above a selected cell (`z-10`): scrolling a selected column under the
+        // gutter must not paint its outline over the row number.
+        "sticky left-0 z-20 flex h-full shrink-0 items-center justify-center border-r border-b border-border bg-muted text-[11px] text-muted-foreground",
+        active && "bg-accent font-medium text-foreground"
+      ),
+      style: { width },
+      children: label
+    }
+  );
+}
+function Cell({
+  width,
+  format,
+  text,
+  header,
+  selected,
+  onSelect,
+  colIndex
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: onSelect ? "gridcell" : "presentation",
+      "aria-colindex": colIndex === void 0 ? void 0 : colIndex + 1,
+      "aria-selected": onSelect ? selected : void 0,
+      onMouseDown: onSelect,
+      title: text || void 0,
+      className: cn(
+        "flex h-full shrink-0 items-center border-r border-b border-border px-1.5",
+        header && "border-b-foreground/25 font-medium",
+        // Numbers and dates read right-aligned, as they do in a spreadsheet.
+        format === "text" ? "justify-start" : "justify-end tabular-nums",
+        selected && onSelect && "relative z-10 outline-2 -outline-offset-2 outline-primary"
+      ),
+      style: { width },
+      children: /* @__PURE__ */ jsx("span", { className: "truncate", children: text })
+    }
+  );
+}
+var MIN_HEIGHT = 320;
+var MIN_BOTTOM_GAP = 8;
+function spaceBelow(element) {
+  let total = 0;
+  for (let node = element.parentElement; node && node !== document.body; node = node.parentElement) {
+    const style = getComputedStyle(node);
+    total += parseFloat(style.paddingBottom) + parseFloat(style.borderBottomWidth) + parseFloat(style.marginBottom);
+  }
+  return Number.isFinite(total) ? total : 0;
+}
+function useFillHeight(ref, enabled) {
+  const [height, setHeight] = useState(MIN_HEIGHT);
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element || !enabled) return;
+    const measure = () => {
+      const rect = element.getBoundingClientRect();
+      const top = rect.top + window.scrollY;
+      const next = Math.max(
+        MIN_HEIGHT,
+        window.innerHeight - top - Math.max(spaceBelow(element), MIN_BOTTOM_GAP)
+      );
+      setHeight((current) => Math.abs(current - next) > 1 ? next : current);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(document.body);
+    window.addEventListener("resize", measure);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", measure);
+    };
+  }, [enabled, ref]);
+  return height;
+}
+function plural(count, noun) {
+  return `${count.toLocaleString()} ${noun}${count === 1 ? "" : "s"}`;
+}
+function TableViewer({
+  sheet,
+  sheetNames,
+  activeSheet = 0,
+  onSheetChange,
+  height,
+  className
+}) {
+  const frameRef = useRef(null);
+  const filled = useFillHeight(frameRef, height === void 0);
+  const tabs = sheetNames && sheetNames.length > 1 ? sheetNames : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: frameRef,
+      className: cn(
+        "flex flex-col overflow-hidden rounded-md border border-border bg-background",
+        className
+      ),
+      style: { height: height ?? filled },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx(SheetGrid, { sheet }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 border-t border-border bg-muted/60 px-2 py-1", children: [
+          tabs ? /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-end gap-px overflow-x-auto", role: "tablist", children: tabs.map((name, index) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "aria-selected": index === activeSheet,
+              onClick: () => onSheetChange?.(index),
+              className: cn(
+                "shrink-0 rounded-t-sm border-t-2 px-3 py-1 text-xs whitespace-nowrap",
+                index === activeSheet ? "border-primary bg-background font-medium text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
+              ),
+              children: name
+            },
+            name
+          )) }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-3 text-[11px] text-muted-foreground", children: [
+            sheet.truncated ? /* @__PURE__ */ jsxs("span", { className: "font-medium text-foreground", children: [
+              "First ",
+              sheet.rows.length.toLocaleString(),
+              " of ",
+              sheet.totalRows.toLocaleString(),
+              " rows \u2014 download the file for the rest"
+            ] }) : null,
+            /* @__PURE__ */ jsxs("span", { children: [
+              plural(sheet.totalRows, "row"),
+              " \xD7 ",
+              plural(sheet.columns.length, "column")
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+TableViewer.displayName = "TableViewer";
+function FilePageView({ kind, src, fileName, title }) {
+  const [active, setActive] = useState(0);
+  const workbook = useQuery({
+    queryKey: ["vantage:file-page", src],
+    queryFn: () => loadWorkbook(src, kind),
+    staleTime: Infinity
+  });
+  const download = (
+    // `nativeButton={false}` because this renders an `<a>`: Base UI needs to
+    // know it is not driving a real button, or it warns and keeps button
+    // semantics that would fight the link's.
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        nativeButton: false,
+        render: /* @__PURE__ */ jsx("a", { href: src, download: fileName }),
+        children: [
+          /* @__PURE__ */ jsx(DownloadIcon, { "aria-hidden": "true" }),
+          "Download"
+        ]
+      }
+    )
+  );
+  const sheets = workbook.data?.sheets ?? [];
+  const sheet = sheets[Math.min(active, Math.max(sheets.length - 1, 0))];
+  return /* @__PURE__ */ jsxs(PageShell, { children: [
+    /* @__PURE__ */ jsxs(PageShellHeader, { className: "py-6", children: [
+      /* @__PURE__ */ jsxs(PageShellHeading, { children: [
+        /* @__PURE__ */ jsx(PageShellTitle, { children: title ?? fileName }),
+        /* @__PURE__ */ jsx(PageShellMeta, { children: fileName })
+      ] }),
+      /* @__PURE__ */ jsx(PageShellActions, { children: download })
+    ] }),
+    /* @__PURE__ */ jsxs(PageShellContent, { children: [
+      workbook.isPending ? /* @__PURE__ */ jsx(Loading, { label: `Reading ${fileName}\u2026` }) : null,
+      workbook.isError ? /* @__PURE__ */ jsx(
+        ErrorState,
+        {
+          title: `Could not display ${fileName}`,
+          message: workbook.error.message,
+          action: download
+        }
+      ) : null,
+      sheet ? /* @__PURE__ */ jsx(
+        TableViewer,
+        {
+          sheet,
+          sheetNames: sheets.map((s) => s.name),
+          activeSheet: active,
+          onSheetChange: setActive
+        }
+      ) : null
+    ] })
+  ] });
+}
+FilePageView.displayName = "FilePageView";
+
+export { FilePageError, FilePageView, SheetGrid, TableViewer, columnLabel, formatCell, loadWorkbook, toSheet };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map