@grampro/kit 0.0.0-stage → 2.4.1

package/source/components/data-grid/export/pdf.ts

@@ -0,0 +1,379 @@
+import type { PdfBand, PdfPaperSize, PdfTheme } from "../core/types";
+import { encode, fit, literal, widthOf, type PdfFont } from "./pdf-font";
+import { buildPdf, deflate, pdfDate, textString, type PdfObject } from "./pdf-writer";
+import type { ExportTable } from "./table";
+
+export interface PrintOptions {
+  title: string;
+  orientation: "portrait" | "landscape";
+  paperSize: PdfPaperSize;
+}
+
+/** Fully resolved, as the layout needs it. */
+export interface PdfOptions extends PrintOptions {
+  /** Page margin in points. 72 points to the inch. */
+  margin: number;
+  /** Body text size in points; the header row and bands follow from it. */
+  fontSize: number;
+  header: PdfBand | null;
+  footer: PdfBand | null;
+  theme: PdfTheme;
+}
+
+/** What callers pass. Everything but the print options has a default. */
+export interface CreatePdfOptions extends PrintOptions {
+  margin?: number;
+  fontSize?: number;
+  header?: PdfBand | null;
+  footer?: PdfBand | null;
+  theme?: Partial<PdfTheme>;
+}
+
+/** Portrait dimensions in points. Landscape swaps them. */
+const PAPER: Record<PdfPaperSize, readonly [number, number]> = {
+  A3: [841.89, 1190.55],
+  A4: [595.28, 841.89],
+  A5: [419.53, 595.28],
+  letter: [612, 792],
+  legal: [612, 1008],
+};
+
+export const defaultPdfTheme: PdfTheme = {
+  text: "#18181b",
+  muted: "#71717a",
+  border: "#d4d4d8",
+  headerBg: "#f4f4f5",
+  headerText: "#18181b",
+  stripe: "#fafafa",
+};
+
+/** The grid measures columns in CSS pixels; PDF works in points. */
+const PX_TO_PT = 0.75;
+const CELL_PAD = 4;
+
+function hex(color: string, stroke: boolean): string {
+  const value = color.replace("#", "");
+  const full =
+    value.length === 3
+      ? value
+          .split("")
+          .map((c) => c + c)
+          .join("")
+      : value;
+
+  const channel = (at: number) => (parseInt(full.slice(at, at + 2), 16) / 255).toFixed(3);
+
+  return `${channel(0)} ${channel(2)} ${channel(4)} ${stroke ? "RG" : "rg"}`;
+}
+
+function round(value: number): string {
+  return value.toFixed(2);
+}
+
+/**
+ * Fills the tokens a header or footer may use. `{pages}` is known before any
+ * page is drawn because every body row is the same height.
+ */
+function resolveBand(
+  band: PdfBand | null,
+  context: { title: string; page: number; pages: number; at: Date },
+): { left: string; center: string; right: string } | null {
+  if (!band) return null;
+
+  const swap = (text: string | undefined) =>
+    (text ?? "")
+      .replace(/\{title\}/g, context.title)
+      .replace(/\{page\}/g, String(context.page))
+      .replace(/\{pages\}/g, String(context.pages))
+      .replace(/\{date\}/g, context.at.toLocaleDateString())
+      .replace(/\{time\}/g, context.at.toLocaleTimeString());
+
+  return { left: swap(band.left), center: swap(band.center), right: swap(band.right) };
+}
+
+interface TextRun {
+  text: string;
+  x: number;
+  y: number;
+  font: PdfFont;
+  size: number;
+  align: "start" | "end";
+  max: number;
+}
+
+function drawText(runs: readonly TextRun[]): string {
+  let out = "";
+
+  for (const run of runs) {
+    if (!run.text) continue;
+
+    const bytes = fit(encode(run.text), run.font, run.size, run.max);
+    if (bytes.length === 0) continue;
+
+    // Measure what is actually drawn, not the input: `fit` may have trimmed it.
+    const x =
+      run.align === "end" ? run.x - widthOf(bytes, run.font, run.size) : run.x;
+    const clipped = literal(bytes);
+
+    out += `BT /${run.font === "bold" ? "F2" : "F1"} ${run.size} Tf `;
+    out += `${round(x)} ${round(run.y)} Td (${clipped}) Tj ET\n`;
+  }
+
+  return out;
+}
+
+/**
+ * Lays the table out across pages and returns one content stream per page.
+ *
+ * Rows are a single line each and clipped with an ellipsis, so every row is the
+ * same height and page breaks never land inside one.
+ */
+export function renderPages(table: ExportTable, options: PdfOptions): string[] {
+  const [shortSide, longSide] = PAPER[options.paperSize];
+  const [pageWidth, pageHeight] =
+    options.orientation === "landscape" ? [longSide, shortSide] : [shortSide, longSide];
+
+  const { margin, fontSize, theme } = options;
+  const bandHeight = fontSize * 1.6;
+  const rowHeight = fontSize * 1.5 + 4;
+
+  const left = margin;
+  const right = pageWidth - margin;
+  const available = right - left;
+
+  const top = pageHeight - margin - (options.header ? bandHeight : 0);
+  const bottom = margin + (options.footer ? bandHeight : 0);
+
+  // Match the grid's proportions, scaled to fill the page width.
+  const raw = table.columns.map((column) => Math.max(column.width * PX_TO_PT, 1));
+  const total = raw.reduce((sum, width) => sum + width, 0);
+  const widths = raw.map((width) => (width / total) * available);
+
+  const edges = [left];
+  for (const width of widths) edges.push(edges[edges.length - 1] + width);
+
+  const numeric = table.columns.map((column) => column.type === "number");
+  const bodyRows = Math.max(1, Math.floor((top - bottom - rowHeight) / rowHeight));
+  const pages = Math.max(1, Math.ceil(table.text.length / bodyRows));
+  const at = new Date();
+
+  const streams: string[] = [];
+
+  for (let page = 0; page < pages; page++) {
+    const rows = table.text.slice(page * bodyRows, (page + 1) * bodyRows);
+    const tableBottom = top - rowHeight - rows.length * rowHeight;
+
+    let fills = "";
+    let lines = "";
+    const runs: TextRun[] = [];
+
+    // Header row.
+    fills += `${hex(theme.headerBg, false)} ${round(left)} ${round(top - rowHeight)} `;
+    fills += `${round(available)} ${round(rowHeight)} re f\n`;
+
+    // Zebra striping, drawn before the rules so the rules stay crisp.
+    if (theme.stripe) {
+      fills += `${hex(theme.stripe, false)}\n`;
+      rows.forEach((_, index) => {
+        if (index % 2 === 0) return;
+        const y = top - rowHeight - (index + 1) * rowHeight;
+        fills += `${round(left)} ${round(y)} ${round(available)} ${round(rowHeight)} re f\n`;
+      });
+    }
+
+    lines += `${hex(theme.border, true)} 0.5 w\n`;
+    for (let index = 0; index <= rows.length + 1; index++) {
+      const y = top - index * rowHeight;
+      lines += `${round(left)} ${round(y)} m ${round(right)} ${round(y)} l\n`;
+    }
+    for (const edge of edges) {
+      lines += `${round(edge)} ${round(top)} m ${round(edge)} ${round(tableBottom)} l\n`;
+    }
+    lines += "S\n";
+
+    const baseline = (rowTop: number) =>
+      rowTop - rowHeight + (rowHeight - fontSize * 0.72) / 2;
+
+    table.columns.forEach((column, index) => {
+      runs.push({
+        text: column.header,
+        x: edges[index] + CELL_PAD,
+        y: baseline(top),
+        font: "bold",
+        size: fontSize,
+        align: "start",
+        max: widths[index] - CELL_PAD * 2,
+      });
+    });
+
+    rows.forEach((row, rowIndex) => {
+      const rowTop = top - rowHeight - rowIndex * rowHeight;
+
+      row.forEach((text, index) => {
+        const alignEnd = numeric[index];
+        runs.push({
+          text,
+          x: alignEnd ? edges[index + 1] - CELL_PAD : edges[index] + CELL_PAD,
+          y: baseline(rowTop),
+          font: "regular",
+          size: fontSize,
+          align: alignEnd ? "end" : "start",
+          max: widths[index] - CELL_PAD * 2,
+        });
+      });
+    });
+
+    const context = { title: options.title, page: page + 1, pages, at };
+    const bands: TextRun[] = [];
+
+    const band = (
+      resolved: { left: string; center: string; right: string } | null,
+      y: number,
+    ) => {
+      if (!resolved) return;
+
+      const third = available / 3;
+      bands.push(
+        { text: resolved.left, x: left, y, font: "regular", size: fontSize * 0.9, align: "start", max: third },
+        { text: resolved.center, x: left + available / 2 - third / 2, y, font: "regular", size: fontSize * 0.9, align: "start", max: third },
+        { text: resolved.right, x: right, y, font: "regular", size: fontSize * 0.9, align: "end", max: third },
+      );
+    };
+
+    band(resolveBand(options.header, context), pageHeight - margin - fontSize);
+    band(resolveBand(options.footer, context), margin);
+
+    streams.push(
+      `q\n${fills}${lines}${hex(theme.headerText, false)}\n` +
+        drawText(runs.slice(0, table.columns.length)) +
+        `${hex(theme.text, false)}\n` +
+        drawText(runs.slice(table.columns.length)) +
+        `${hex(theme.muted, false)}\n` +
+        drawText(bands) +
+        "Q\n",
+    );
+  }
+
+  return streams;
+}
+
+const DEFAULTS = {
+  margin: 36,
+  fontSize: 9,
+  header: { left: "{title}" },
+  footer: { left: "{date}", right: "Page {page} of {pages}" },
+} as const;
+
+/**
+ * Renders the table as a real PDF file — no print dialog, no browser
+ * pagination, the same output in every engine.
+ */
+export async function createPdfBlob(
+  table: ExportTable,
+  options: CreatePdfOptions,
+): Promise<Blob> {
+  const resolved: PdfOptions = {
+    ...options,
+    margin: options.margin ?? DEFAULTS.margin,
+    fontSize: options.fontSize ?? DEFAULTS.fontSize,
+    header: options.header === undefined ? DEFAULTS.header : options.header,
+    footer: options.footer === undefined ? DEFAULTS.footer : options.footer,
+    theme: { ...defaultPdfTheme, ...options.theme },
+  };
+
+  const [shortSide, longSide] = PAPER[resolved.paperSize];
+  const [width, height] =
+    resolved.orientation === "landscape" ? [longSide, shortSide] : [shortSide, longSide];
+
+  const streams = renderPages(table, resolved);
+
+  // 1 catalog, 2 pages, 3 regular font, 4 bold font, 5 info, then a page object
+  // and a content stream for each page.
+  const pageId = (index: number) => 6 + index * 2;
+  const kids = streams.map((_, index) => `${pageId(index)} 0 R`).join(" ");
+
+  const objects: PdfObject[] = [
+    "<</Type/Catalog/Pages 2 0 R>>",
+    `<</Type/Pages/Count ${streams.length}/Kids[${kids}]>>`,
+    "<</Type/Font/Subtype/Type1/BaseFont/Helvetica/Encoding/WinAnsiEncoding>>",
+    "<</Type/Font/Subtype/Type1/BaseFont/Helvetica-Bold/Encoding/WinAnsiEncoding>>",
+    `<</Title ${textString(resolved.title)}/Producer ${textString("GramproKit DataGrid")}` +
+      `/CreationDate (${pdfDate(new Date())})>>`,
+  ];
+
+  for (const [index, stream] of streams.entries()) {
+    const data = await deflate(toBytes(stream));
+
+    objects.push(
+      `<</Type/Page/Parent 2 0 R/MediaBox[0 0 ${round(width)} ${round(height)}]` +
+        `/Resources<</Font<</F1 3 0 R/F2 4 0 R>>>>/Contents ${pageId(index) + 1} 0 R>>`,
+      data
+        ? { extra: "/Filter/FlateDecode", stream: data }
+        : { stream },
+    );
+  }
+
+  return buildPdf(objects, { root: 1, info: 5 });
+}
+
+/** Content streams are latin1 by construction, so one character is one byte. */
+function toBytes(text: string): Uint8Array {
+  const bytes = new Uint8Array(text.length);
+  for (let i = 0; i < text.length; i++) bytes[i] = text.charCodeAt(i) & 0xff;
+  return bytes;
+}
+
+const escapeHtml = (text: string) =>
+  text.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);
+
+export function buildPrintHtml(table: ExportTable, options: PrintOptions): string {
+  const head = table.columns.map((c) => `<th>${escapeHtml(c.header)}</th>`).join("");
+  const numeric = table.columns.map((c) => c.type === "number");
+  const body = table.text
+    .map(
+      (row) =>
+        `<tr>${row
+          .map((text, i) => `<td${numeric[i] ? ' class="num"' : ""}>${escapeHtml(text)}</td>`)
+          .join("")}</tr>`,
+    )
+    .join("");
+
+  return `<!doctype html><html><head><meta charset="utf-8"><title>${escapeHtml(options.title)}</title>
+<style>
+@page { size: ${options.paperSize} ${options.orientation}; margin: 12mm; }
+body { font: 9pt/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; color: #111; margin: 0; }
+h1 { font-size: 13pt; margin: 0 0 8px; }
+table { border-collapse: collapse; width: 100%; }
+th, td { border: 1px solid #c8c8c8; padding: 3px 6px; text-align: start; vertical-align: top; }
+th { background: #f0f0f0; font-weight: 600; }
+thead { display: table-header-group; }
+tr { break-inside: avoid; }
+td.num { text-align: end; font-variant-numeric: tabular-nums; }
+</style></head><body><h1>${escapeHtml(options.title)}</h1>
+<table><thead><tr>${head}</tr></thead><tbody>${body}</tbody></table></body></html>`;
+}
+
+/**
+ * Opens the browser's print dialog with the table laid out for paper. Kept
+ * alongside `createPdfBlob` for printing to paper, and for text the standard
+ * fonts cannot encode.
+ */
+export function printTable(table: ExportTable, options: PrintOptions): void {
+  const iframe = document.createElement("iframe");
+  iframe.setAttribute("aria-hidden", "true");
+  iframe.style.cssText = "position:fixed;right:0;bottom:0;width:0;height:0;border:0;";
+
+  const cleanup = () => iframe.remove();
+  iframe.addEventListener("load", () => {
+    const win = iframe.contentWindow;
+    if (!win) return cleanup();
+    win.addEventListener("afterprint", cleanup, { once: true });
+    win.focus();
+    win.print();
+    // Fallback for browsers that never fire afterprint.
+    setTimeout(cleanup, 60_000);
+  }, { once: true });
+
+  iframe.srcdoc = buildPrintHtml(table, options);
+  document.body.append(iframe);
+}

package/source/components/data-grid/export/table.ts

@@ -0,0 +1,73 @@
+import type { ColumnType, ExportCellValue, ResolvedColumn } from "../core/types";
+import { formatCellValue, toTime, type Formatters } from "../core/values";
+
+export interface ExportColumn {
+  header: string;
+  width: number;
+  type: ColumnType;
+}
+
+export interface ExportTable {
+  columns: ExportColumn[];
+  /** Typed values, for formats that keep types (XLSX). */
+  values: ExportCellValue[][];
+  /** Display text, for text formats (CSV, PDF, clipboard). */
+  text: string[][];
+}
+
+function typedValue<T>(column: ResolvedColumn<T>, raw: unknown, text: string): ExportCellValue {
+  if (raw === null || raw === undefined) return null;
+  if (column.def.options) return text;
+  if (typeof raw === "number" || typeof raw === "boolean") return raw;
+  if (raw instanceof Date) return raw;
+  if (column.type === "date") {
+    const time = toTime(raw);
+    return time === null ? text : new Date(time);
+  }
+  return text;
+}
+
+export function buildExportTable<T>(
+  rows: readonly T[],
+  items: readonly { column: ResolvedColumn<T>; width: number }[],
+  formatters: Formatters,
+): ExportTable {
+  const values: ExportCellValue[][] = [];
+  const text: string[][] = [];
+
+  for (const row of rows) {
+    const rowValues: ExportCellValue[] = [];
+    const rowText: string[] = [];
+    for (const { column } of items) {
+      const { exportValue } = column.def;
+      if (exportValue) {
+        const value = exportValue(row);
+        rowValues.push(value);
+        rowText.push(
+          value === null || value === undefined
+            ? ""
+            : value instanceof Date
+              ? formatters.date.format(value)
+              : String(value),
+        );
+      } else {
+        const raw = column.getValue(row);
+        const display = formatCellValue(column, raw, row, formatters);
+        rowValues.push(typedValue(column, raw, display));
+        rowText.push(display);
+      }
+    }
+    values.push(rowValues);
+    text.push(rowText);
+  }
+
+  return {
+    columns: items.map(({ column, width }) => ({
+      header: column.header,
+      width,
+      type: column.type,
+    })),
+    values,
+    text,
+  };
+}

package/source/components/data-grid/export/xlsx.ts

@@ -0,0 +1,145 @@
+import type { ExportCellValue } from "../core/types";
+import type { ExportTable } from "./table";
+import { createZip } from "./zip";
+
+const XML_HEADER = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
+const MAIN_NS = "http://schemas.openxmlformats.org/spreadsheetml/2006/main";
+const REL_NS = "http://schemas.openxmlformats.org/officeDocument/2006/relationships";
+const PKG_REL_NS = "http://schemas.openxmlformats.org/package/2006/relationships";
+
+/** Characters XML 1.0 does not allow at all. */
+const INVALID_XML_CHARS = /[^\t\n\r -퟿-�\u{10000}-\u{10FFFF}]/gu;
+
+const XML_ENTITIES: Record<string, string> = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+};
+
+export const escapeXml = (text: string) =>
+  text.replace(INVALID_XML_CHARS, "").replace(/[&<>"]/g, (c) => XML_ENTITIES[c]);
+
+export function columnName(index: number): string {
+  let n = index + 1;
+  let name = "";
+  while (n > 0) {
+    const remainder = (n - 1) % 26;
+    name = String.fromCharCode(65 + remainder) + name;
+    n = Math.floor((n - 1) / 26);
+  }
+  return name;
+}
+
+/** Excel serial date in local time. */
+function toSerialDate(date: Date): number {
+  return (date.getTime() - date.getTimezoneOffset() * 60_000) / 86_400_000 + 25_569;
+}
+
+// Style indexes into cellXfs below.
+const STYLE_HEADER = 1;
+const STYLE_DATE = 2;
+const STYLE_DATETIME = 3;
+
+function cell(ref: string, value: ExportCellValue, style = 0): string {
+  const s = style ? ` s="${style}"` : "";
+  if (value === null || value === undefined || value === "") return "";
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? `<c r="${ref}"${s}><v>${value}</v></c>` : "";
+  }
+  if (typeof value === "boolean") return `<c r="${ref}" t="b"${s}><v>${value ? 1 : 0}</v></c>`;
+  if (value instanceof Date) {
+    if (Number.isNaN(value.getTime())) return "";
+    const serial = toSerialDate(value);
+    const dateStyle = Number.isInteger(serial) ? STYLE_DATE : STYLE_DATETIME;
+    return `<c r="${ref}" s="${dateStyle}"><v>${serial}</v></c>`;
+  }
+  return `<c r="${ref}" t="inlineStr"${s}><is><t xml:space="preserve">${escapeXml(value)}</t></is></c>`;
+}
+
+const STYLES = `${XML_HEADER}<styleSheet xmlns="${MAIN_NS}">\
+<numFmts count="2"><numFmt numFmtId="164" formatCode="yyyy-mm-dd"/><numFmt numFmtId="165" formatCode="yyyy-mm-dd hh:mm"/></numFmts>\
+<fonts count="2"><font><sz val="11"/><name val="Calibri"/></font><font><b/><sz val="11"/><name val="Calibri"/></font></fonts>\
+<fills count="2"><fill><patternFill patternType="none"/></fill><fill><patternFill patternType="gray125"/></fill></fills>\
+<borders count="1"><border><left/><right/><top/><bottom/><diagonal/></border></borders>\
+<cellStyleXfs count="1"><xf numFmtId="0" fontId="0" fillId="0" borderId="0"/></cellStyleXfs>\
+<cellXfs count="4"><xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0"/>\
+<xf numFmtId="0" fontId="1" fillId="0" borderId="0" xfId="0" applyFont="1"/>\
+<xf numFmtId="164" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/>\
+<xf numFmtId="165" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/></cellXfs>\
+<cellStyles count="1"><cellStyle name="Normal" xfId="0" builtinId="0"/></cellStyles></styleSheet>`;
+
+export function createXlsxBlob(table: ExportTable, sheetName = "Sheet1"): Blob {
+  const encoder = new TextEncoder();
+  const name = sheetName.replace(/[[\]:*?/\\]/g, " ").slice(0, 31) || "Sheet1";
+  const columnCount = Math.max(1, table.columns.length);
+  const lastRef = `${columnName(columnCount - 1)}${table.values.length + 1}`;
+
+  const header =
+    `${XML_HEADER}<worksheet xmlns="${MAIN_NS}">` +
+    `<sheetViews><sheetView workbookViewId="0"><pane ySplit="1" topLeftCell="A2" activePane="bottomLeft" state="frozen"/></sheetView></sheetViews>` +
+    `<cols>${table.columns
+      .map((c, i) => `<col min="${i + 1}" max="${i + 1}" width="${Math.max(8, Math.round(c.width / 7))}" customWidth="1"/>`)
+      .join("")}</cols>` +
+    `<sheetData><row r="1">${table.columns
+      .map((c, i) => cell(`${columnName(i)}1`, c.header, STYLE_HEADER))
+      .join("")}</row>`;
+
+  // Encode in chunks to keep peak memory low on large exports.
+  const chunks: Uint8Array[] = [encoder.encode(header)];
+  const names = table.columns.map((_, i) => columnName(i));
+  const CHUNK_ROWS = 2000;
+  for (let start = 0; start < table.values.length; start += CHUNK_ROWS) {
+    let xml = "";
+    const end = Math.min(table.values.length, start + CHUNK_ROWS);
+    for (let r = start; r < end; r++) {
+      const rowNumber = r + 2;
+      xml += `<row r="${rowNumber}">`;
+      table.values[r].forEach((value, c) => {
+        xml += cell(`${names[c]}${rowNumber}`, value);
+      });
+      xml += "</row>";
+    }
+    chunks.push(encoder.encode(xml));
+  }
+  chunks.push(encoder.encode(`</sheetData><autoFilter ref="A1:${lastRef}"/></worksheet>`));
+
+  const escapedName = escapeXml(name).replace(/'/g, "''");
+  const workbook =
+    `${XML_HEADER}<workbook xmlns="${MAIN_NS}" xmlns:r="${REL_NS}">` +
+    `<sheets><sheet name="${escapeXml(name)}" sheetId="1" r:id="rId1"/></sheets>` +
+    `<definedNames><definedName name="_xlnm._FilterDatabase" localSheetId="0" hidden="1">'${escapedName}'!$A$1:$${columnName(columnCount - 1)}$${table.values.length + 1}</definedName></definedNames>` +
+    `</workbook>`;
+
+  return createZip(
+    [
+      {
+        name: "[Content_Types].xml",
+        content:
+          `${XML_HEADER}<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types">` +
+          `<Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/>` +
+          `<Default Extension="xml" ContentType="application/xml"/>` +
+          `<Override PartName="/xl/workbook.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"/>` +
+          `<Override PartName="/xl/worksheets/sheet1.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml"/>` +
+          `<Override PartName="/xl/styles.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.styles+xml"/>` +
+          `</Types>`,
+      },
+      {
+        name: "_rels/.rels",
+        content: `${XML_HEADER}<Relationships xmlns="${PKG_REL_NS}"><Relationship Id="rId1" Type="${REL_NS}/officeDocument" Target="xl/workbook.xml"/></Relationships>`,
+      },
+      { name: "xl/workbook.xml", content: workbook },
+      {
+        name: "xl/_rels/workbook.xml.rels",
+        content:
+          `${XML_HEADER}<Relationships xmlns="${PKG_REL_NS}">` +
+          `<Relationship Id="rId1" Type="${REL_NS}/worksheet" Target="worksheets/sheet1.xml"/>` +
+          `<Relationship Id="rId2" Type="${REL_NS}/styles" Target="styles.xml"/>` +
+          `</Relationships>`,
+      },
+      { name: "xl/styles.xml", content: STYLES },
+      { name: "xl/worksheets/sheet1.xml", content: chunks },
+    ],
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  );
+}

package/source/components/data-grid/export/zip.ts

@@ -0,0 +1,87 @@
+/** Minimal ZIP writer (stored, uncompressed), enough for XLSX packages. */
+
+const CRC_TABLE = (() => {
+  const table = new Uint32Array(256);
+  for (let n = 0; n < 256; n++) {
+    let c = n;
+    for (let k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+    table[n] = c >>> 0;
+  }
+  return table;
+})();
+
+export function crc32(chunks: readonly Uint8Array[]): number {
+  let crc = 0xffffffff;
+  for (const chunk of chunks) {
+    for (let i = 0; i < chunk.length; i++) {
+      crc = CRC_TABLE[(crc ^ chunk[i]) & 0xff] ^ (crc >>> 8);
+    }
+  }
+  return (crc ^ 0xffffffff) >>> 0;
+}
+
+export interface ZipEntry {
+  name: string;
+  /** Content as text, or pre-encoded chunks for large files. */
+  content: string | Uint8Array[];
+}
+
+export function createZip(entries: readonly ZipEntry[], type = "application/zip"): Blob {
+  const encoder = new TextEncoder();
+  const now = new Date();
+  const dosTime = (now.getHours() << 11) | (now.getMinutes() << 5) | (now.getSeconds() >> 1);
+  const dosDate =
+    ((now.getFullYear() - 1980) << 9) | ((now.getMonth() + 1) << 5) | now.getDate();
+
+  const parts: Uint8Array[] = [];
+  const central: Uint8Array[] = [];
+  let offset = 0;
+
+  for (const entry of entries) {
+    const name = encoder.encode(entry.name);
+    const chunks = typeof entry.content === "string" ? [encoder.encode(entry.content)] : entry.content;
+    const size = chunks.reduce((sum, chunk) => sum + chunk.length, 0);
+    const crc = crc32(chunks);
+
+    const local = new DataView(new ArrayBuffer(30));
+    local.setUint32(0, 0x04034b50, true);
+    local.setUint16(4, 20, true);
+    local.setUint16(6, 0x0800, true); // UTF-8 names
+    local.setUint16(8, 0, true); // stored
+    local.setUint16(10, dosTime, true);
+    local.setUint16(12, dosDate, true);
+    local.setUint32(14, crc, true);
+    local.setUint32(18, size, true);
+    local.setUint32(22, size, true);
+    local.setUint16(26, name.length, true);
+    local.setUint16(28, 0, true);
+    parts.push(new Uint8Array(local.buffer), name, ...chunks);
+
+    const header = new DataView(new ArrayBuffer(46));
+    header.setUint32(0, 0x02014b50, true);
+    header.setUint16(4, 20, true);
+    header.setUint16(6, 20, true);
+    header.setUint16(8, 0x0800, true);
+    header.setUint16(10, 0, true);
+    header.setUint16(12, dosTime, true);
+    header.setUint16(14, dosDate, true);
+    header.setUint32(16, crc, true);
+    header.setUint32(20, size, true);
+    header.setUint32(24, size, true);
+    header.setUint16(28, name.length, true);
+    header.setUint32(42, offset, true);
+    central.push(new Uint8Array(header.buffer), name);
+
+    offset += 30 + name.length + size;
+  }
+
+  const centralSize = central.reduce((sum, part) => sum + part.length, 0);
+  const end = new DataView(new ArrayBuffer(22));
+  end.setUint32(0, 0x06054b50, true);
+  end.setUint16(8, entries.length, true);
+  end.setUint16(10, entries.length, true);
+  end.setUint32(12, centralSize, true);
+  end.setUint32(16, offset, true);
+
+  return new Blob([...parts, ...central, new Uint8Array(end.buffer)] as BlobPart[], { type });
+}