gbs-add-block 1.3.0 → 2.0.1

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v1.3.0)
+# GBS Building Blocks 2.0 (v2.0.1)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -7,10 +7,10 @@ Latest and upgraded version of GBS building blocks with headless UI and removed
 For detailed documentation on usage and props, Please visit: [Building Block Documentation](https://gramprokit.vercel.app)
 
 ## Beta Components
-    
-New Beta Components are avilable for testing and feedback, Please visit: [Building Block Documentation v2.0.0 beta](https://gramprokit.vercel.app/2.0.0-beta)
 
-## What's New 🎉 (Ver 1.3.0)
+New 2.0.0 beta (current version) is available for testing and feedback, Please visit: [Building Block Documentation v2.0.0 beta](https://gramprokit.vercel.app)
+
+## What's New 🎉 (Ver 2.0.1)
 
 - Update Candidate for next major change 2.0.0
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "1.3.0",
+  "version": "2.0.1",
   "description": "React Component Library",
   "type": "module",
   "files": [

package/source/beta-components/data-grid/__tests__/pdf.test.ts

@@ -0,0 +1,209 @@
+import { describe, expect, it } from "vitest";
+import { computeLayout, resolveColumns } from "../core/columns";
+import { createInitialState } from "../core/state";
+import type { ColumnDef } from "../core/types";
+import { createFormatters } from "../core/values";
+import { encode, fit, literal, widthOf } from "../export/pdf-font";
+import { buildPdf, pdfDate, textString } from "../export/pdf-writer";
+import { createPdfBlob, defaultPdfTheme, renderPages } from "../export/pdf";
+import { buildExportTable } from "../export/table";
+
+interface Row {
+  id: number;
+  name: string;
+  salary: number;
+}
+
+const defs: ColumnDef<Row>[] = [
+  { field: "id", type: "number", width: 80 },
+  { field: "name", width: 220 },
+  { field: "salary", type: "number", width: 120 },
+];
+
+function tableOf(count: number) {
+  const rows = Array.from({ length: count }, (_, index) => ({
+    id: index + 1,
+    name: `Person (${index + 1})`,
+    salary: 1000 * (index + 1),
+  }));
+
+  const columns = resolveColumns(defs);
+  const layout = computeLayout(columns, createInitialState({ data: rows, columns: defs }));
+  return buildExportTable(rows, layout.columns, createFormatters("en-US"));
+}
+
+const options = {
+  title: "Report",
+  orientation: "landscape",
+  paperSize: "A4",
+  margin: 36,
+  fontSize: 9,
+  header: { left: "{title}" },
+  footer: { right: "Page {page} of {pages}" },
+  theme: defaultPdfTheme,
+} as const;
+
+/** Reads the file back the way it was written: one character, one byte. */
+async function latin1(blob: Blob): Promise<string> {
+  const bytes = new Uint8Array(await blob.arrayBuffer());
+  let out = "";
+  for (const byte of bytes) out += String.fromCharCode(byte);
+  return out;
+}
+
+describe("pdf fonts", () => {
+  it("encodes WinAnsi, replacing what the encoding cannot carry", () => {
+    // Latin-1 passes through; the 0x80-0x9F specials are remapped.
+    expect(encode("Müller")).toEqual([77, 0xfc, 108, 108, 101, 114]);
+    expect(encode("“quoted” — €5")).toEqual([0x93, 113, 117, 111, 116, 101, 100, 0x94, 32, 0x97, 32, 0x80, 53]);
+
+    // Malayalam and emoji have no WinAnsi code, so they read as "?".
+    expect(encode("ത")).toEqual([0x3f]);
+    expect(encode("a\tb")).toEqual([97, 32, 98]);
+  });
+
+  it("measures with the real Helvetica advance widths", () => {
+    // "A" is 667/1000 em, "i" is 222/1000, at 10pt.
+    expect(widthOf(encode("A"), "regular", 10)).toBeCloseTo(6.67, 5);
+    expect(widthOf(encode("i"), "regular", 10)).toBeCloseTo(2.22, 5);
+    // Bold "A" is wider at 722/1000.
+    expect(widthOf(encode("A"), "bold", 10)).toBeCloseTo(7.22, 5);
+  });
+
+  it("truncates to an ellipsis and never overruns the cell", () => {
+    const long = encode("Engineering Department");
+    const clipped = fit(long, "regular", 9, 40);
+
+    expect(clipped.length).toBeLessThan(long.length);
+    expect(clipped[clipped.length - 1]).toBe(0x85);
+    expect(widthOf(clipped, "regular", 9)).toBeLessThanOrEqual(40);
+
+    // Text that already fits is returned untouched.
+    expect(fit(encode("ok"), "regular", 9, 400)).toEqual(encode("ok"));
+    // Not even the ellipsis fits.
+    expect(fit(long, "regular", 9, 1)).toEqual([]);
+  });
+
+  it("escapes only the three string delimiters", () => {
+    expect(literal(encode("a(b)c\\d"))).toBe("a\\(b\\)c\\\\d");
+    expect(literal(encode("plain"))).toBe("plain");
+  });
+});
+
+describe("pdf writer", () => {
+  it("writes a header, an xref whose offsets are right, and a trailer", async () => {
+    const blob = buildPdf(["<</Type/Catalog/Pages 2 0 R>>", { stream: "hello" }], {
+      root: 1,
+      info: 1,
+    });
+    const text = await latin1(blob);
+
+    expect(text.startsWith("%PDF-1.7\n")).toBe(true);
+    expect(text.trimEnd().endsWith("%%EOF")).toBe(true);
+    expect(text).toContain("<</Length 5>>\nstream\nhello\nendstream");
+
+    // Every xref offset must land exactly on its object header.
+    const start = Number(text.slice(text.lastIndexOf("startxref") + 10).split("\n")[0]);
+    expect(text.startsWith("xref\n", start)).toBe(true);
+
+    // Skip "xref" and the "0 N" subsection line to reach the 20-byte entries.
+    const first = text.indexOf("\n", text.indexOf("\n", start) + 1) + 1;
+
+    for (let id = 1; id <= 2; id++) {
+      const at = Number(text.slice(first + id * 20, first + id * 20 + 10));
+      expect(text.startsWith(`${id} 0 obj`, at)).toBe(true);
+    }
+  });
+
+  it("writes document info as UTF-16BE, which /Title needs", () => {
+    // A bare literal would be read as PDFDocEncoding, where 0x97 is S-caron
+    // rather than the em dash the caller passed.
+    expect(textString("A—B")).toBe("<FEFF004120140042>");
+    expect(textString("Hi")).toBe("<FEFF00480069>");
+  });
+
+  it("formats dates the way /CreationDate wants them", () => {
+    expect(pdfDate(new Date(Date.UTC(2026, 8, 22, 9, 5, 3)))).toBe("D:20260922090503+00'00'");
+  });
+});
+
+describe("pdf layout", () => {
+  it("repeats the header row on every page and fills page tokens", () => {
+    const pages = renderPages(tableOf(120), options);
+
+    expect(pages.length).toBeGreaterThan(1);
+
+    for (const page of pages) {
+      expect(page).toContain("(Name) Tj");
+      expect(page).toContain("/F2 9 Tf");
+    }
+
+    expect(pages[0]).toContain(`(Page 1 of ${pages.length}) Tj`);
+    expect(pages[1]).toContain(`(Page 2 of ${pages.length}) Tj`);
+    expect(pages[0]).toContain("(Report) Tj");
+  });
+
+  it("puts every row on exactly one page, in order", () => {
+    const table = tableOf(120);
+    const pages = renderPages(table, options);
+    const drawn = pages.flatMap((page) => [...page.matchAll(/\(Person \\\((\d+)\\\)\) Tj/g)].map((m) => Number(m[1])));
+
+    expect(drawn).toEqual(table.text.map((_, index) => index + 1));
+  });
+
+  it("right-aligns numbers and left-aligns text", () => {
+    const [page] = renderPages(tableOf(1), options);
+    const at = (label: string) => {
+      const match = page.match(new RegExp(`([\\d.]+) [\\d.]+ Td \\(${label}\\) Tj`));
+      return Number(match![1]);
+    };
+
+    // Compare each cell against its own column header, which is always drawn
+    // from the left edge. A numeric cell is pushed right; a text cell is not.
+    expect(at("1")).toBeGreaterThan(at("Id"));
+    expect(at("1000")).toBeGreaterThan(at("Salary"));
+    expect(at("Person \\\\\\(1\\\\\\)")).toBeCloseTo(at("Name"), 5);
+  });
+
+  it("honours paper size and orientation", async () => {
+    const table = tableOf(3);
+    const portrait = await latin1(await createPdfBlob(table, { ...options, orientation: "portrait" }));
+    const landscape = await latin1(await createPdfBlob(table, { ...options, orientation: "landscape" }));
+    const a5 = await latin1(await createPdfBlob(table, { ...options, paperSize: "A5" }));
+
+    expect(portrait).toContain("/MediaBox[0 0 595.28 841.89]");
+    expect(landscape).toContain("/MediaBox[0 0 841.89 595.28]");
+    expect(a5).toContain("/MediaBox[0 0 595.28 419.53]");
+  });
+
+  it("drops the bands when they are null, and the stripe when it is null", () => {
+    const bare = renderPages(tableOf(2), {
+      ...options,
+      header: null,
+      footer: null,
+      theme: { ...defaultPdfTheme, stripe: null },
+    });
+
+    expect(bare[0]).not.toContain("(Report) Tj");
+    expect(bare[0]).not.toContain("Page 1 of");
+    // One `re f` remains: the header row's fill.
+    expect(bare[0].match(/re f/g)).toHaveLength(1);
+  });
+
+  it("produces a single valid file for the whole table", async () => {
+    const blob = await createPdfBlob(tableOf(60), options);
+    const text = await latin1(blob);
+
+    expect(blob.type).toBe("application/pdf");
+    expect(text.startsWith("%PDF-1.7")).toBe(true);
+    expect(text).toContain("/BaseFont/Helvetica/Encoding/WinAnsiEncoding");
+    expect(text).toContain("/BaseFont/Helvetica-Bold/Encoding/WinAnsiEncoding");
+    expect(text).toContain(`/Title ${textString("Report")}`);
+
+    const count = Number(text.match(/\/Type\/Pages\/Count (\d+)/)![1]);
+    expect(text.match(/\/Type\/Page\//g)).toHaveLength(count);
+
+    // Node has CompressionStream, so the streams should be Flate encoded.
+    expect(text).toContain("/Filter/FlateDecode");
+  });
+});

package/source/beta-components/data-grid/core/grid.ts

@@ -24,6 +24,7 @@ import type {
   GridRow,
   GridState,
   PdfExportOptions,
+  PrintExportOptions,
   PinSide,
   ResolvedColumn,
   RowId,
@@ -105,7 +106,10 @@ export interface GridApi<T> {
   getRows(scope?: ExportScope): T[];
   exportCsv(options?: ExportOptions<T>): Promise<void>;
   exportExcel(options?: ExportOptions<T>): Promise<void>;
+  /** Renders a PDF and downloads it. No print dialog, no browser pagination. */
   exportPdf(options?: PdfExportOptions<T>): Promise<void>;
+  /** Opens the browser's print dialog with the table laid out for paper. */
+  print(options?: PrintExportOptions<T>): Promise<void>;
   /** Copies selected rows as TSV, or the active cell when nothing is selected. */
   copyToClipboard(): Promise<void>;
 }
@@ -551,6 +555,24 @@ export function createGridEngine<T>(initialOptions: GridOptions<T>) {
       downloadBlob(createXlsxBlob(table), `${fileName(exportOptions)}.xlsx`);
     },
     async exportPdf(exportOptions = {}) {
+      const [{ createPdfBlob }, { downloadBlob }, table] = await Promise.all([
+        import("../export/pdf"),
+        import("../export/download"),
+        buildTable(exportOptions),
+      ]);
+      const blob = await createPdfBlob(table, {
+        title: exportOptions.title ?? fileName(exportOptions),
+        orientation: exportOptions.orientation ?? "landscape",
+        paperSize: exportOptions.paperSize ?? "A4",
+        margin: exportOptions.margin,
+        fontSize: exportOptions.fontSize,
+        header: exportOptions.header,
+        footer: exportOptions.footer,
+        theme: exportOptions.theme,
+      });
+      downloadBlob(blob, `${fileName(exportOptions)}.pdf`);
+    },
+    async print(exportOptions = {}) {
       const [{ printTable }, table] = await Promise.all([
         import("../export/pdf"),
         buildTable(exportOptions),

package/source/beta-components/data-grid/core/types.ts

@@ -225,10 +225,46 @@ export interface ExportOptions<T> {
   rows?: readonly T[];
 }
 
-export interface PdfExportOptions<T> extends ExportOptions<T> {
+export type PdfPaperSize = "A3" | "A4" | "A5" | "letter" | "legal";
+
+/**
+ * A repeating page band. Each slot takes plain text with `{title}`, `{page}`,
+ * `{pages}`, `{date}` and `{time}` substituted as the page is drawn.
+ */
+export interface PdfBand {
+  left?: string;
+  center?: string;
+  right?: string;
+}
+
+/** Colors for the generated PDF, as `#rgb` or `#rrggbb`. */
+export interface PdfTheme {
+  text: string;
+  /** Header and footer bands. */
+  muted: string;
+  border: string;
+  headerBg: string;
+  headerText: string;
+  /** Every other body row, or null for no striping. */
+  stripe: string | null;
+}
+
+export interface PrintExportOptions<T> extends ExportOptions<T> {
   title?: string;
   orientation?: "portrait" | "landscape";
-  paperSize?: "A3" | "A4" | "A5" | "letter" | "legal";
+  paperSize?: PdfPaperSize;
+}
+
+export interface PdfExportOptions<T> extends PrintExportOptions<T> {
+  /** Page margin in points. 72 points to the inch; defaults to 36. */
+  margin?: number;
+  /** Body text size in points; defaults to 9. */
+  fontSize?: number;
+  /** Top of every page. Defaults to the title on the left; null removes it. */
+  header?: PdfBand | null;
+  /** Bottom of every page. Defaults to date and page numbers; null removes it. */
+  footer?: PdfBand | null;
+  theme?: Partial<PdfTheme>;
 }
 
 export interface GridOptions<T> {

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

@@ -0,0 +1,139 @@
+/*
+ * Metrics for the two standard-14 fonts the PDF exporter uses.
+ *
+ * Helvetica and Helvetica-Bold are built into every conforming PDF viewer, so
+ * nothing is embedded and the export stays dependency-free. The trade is
+ * WinAnsi (CP1252) coverage — Latin-1 plus a few typographic characters. Text
+ * outside it is replaced with "?" rather than silently dropped, so a wrong
+ * glyph is visible instead of a missing column.
+ *
+ * Widths are advance widths in 1/1000 em, indexed from character code 32. A
+ * zero means the code is unused in WinAnsi; `encode` never produces one.
+ */
+
+// prettier-ignore
+const HELVETICA = [
+  278, 278, 355, 556, 556, 889, 667, 191, 333, 333, 389, 584, 278, 333, 278, 278,
+  556, 556, 556, 556, 556, 556, 556, 556, 556, 556, 278, 278, 584, 584, 584, 556,
+  1015, 667, 667, 722, 722, 667, 611, 778, 722, 278, 500, 667, 556, 833, 722, 778,
+  667, 778, 722, 667, 611, 722, 667, 944, 667, 667, 611, 278, 278, 278, 469, 556,
+  333, 556, 556, 500, 556, 556, 278, 556, 556, 222, 222, 500, 222, 833, 556, 556,
+  556, 556, 333, 500, 278, 556, 500, 722, 500, 500, 500, 334, 260, 334, 584, 0,
+  556, 0, 222, 556, 333, 1000, 556, 556, 333, 1000, 667, 333, 1000, 0, 611, 0,
+  0, 222, 222, 333, 333, 350, 556, 1000, 333, 1000, 500, 333, 944, 0, 500, 667,
+  278, 333, 556, 556, 556, 556, 260, 556, 333, 737, 370, 556, 584, 333, 737, 333,
+  400, 584, 333, 333, 333, 556, 537, 278, 333, 333, 365, 556, 834, 834, 834, 611,
+  667, 667, 667, 667, 667, 667, 1000, 722, 667, 667, 667, 667, 278, 278, 278, 278,
+  722, 722, 778, 778, 778, 778, 778, 584, 778, 722, 722, 722, 722, 667, 667, 611,
+  556, 556, 556, 556, 556, 556, 889, 500, 556, 556, 556, 556, 278, 278, 278, 278,
+  556, 556, 556, 556, 556, 556, 556, 584, 611, 556, 556, 556, 556, 500, 556, 500,
+];
+
+// prettier-ignore
+const HELVETICA_BOLD = [
+  278, 333, 474, 556, 556, 889, 722, 238, 333, 333, 389, 584, 278, 333, 278, 278,
+  556, 556, 556, 556, 556, 556, 556, 556, 556, 556, 333, 333, 584, 584, 584, 611,
+  975, 722, 722, 722, 722, 667, 611, 778, 722, 278, 556, 722, 611, 833, 722, 778,
+  667, 778, 722, 667, 611, 722, 667, 944, 667, 667, 611, 333, 278, 333, 584, 556,
+  333, 556, 611, 556, 611, 556, 333, 611, 611, 278, 278, 556, 278, 889, 611, 611,
+  611, 611, 389, 556, 333, 611, 556, 778, 556, 556, 500, 389, 280, 389, 584, 0,
+  556, 0, 278, 556, 500, 1000, 556, 556, 333, 1000, 667, 333, 1000, 0, 611, 0,
+  0, 278, 278, 500, 500, 350, 556, 1000, 333, 1000, 556, 333, 944, 0, 500, 667,
+  278, 333, 556, 556, 556, 556, 280, 556, 333, 737, 370, 556, 584, 333, 737, 333,
+  400, 584, 333, 333, 333, 611, 556, 278, 333, 333, 365, 556, 834, 834, 834, 611,
+  722, 722, 722, 722, 722, 722, 1000, 722, 667, 667, 667, 667, 278, 278, 278, 278,
+  722, 722, 778, 778, 778, 778, 778, 584, 778, 722, 722, 722, 722, 667, 667, 611,
+  556, 556, 556, 556, 556, 556, 889, 556, 556, 556, 556, 556, 278, 278, 278, 278,
+  611, 611, 611, 611, 611, 611, 611, 584, 611, 611, 611, 611, 611, 556, 611, 556,
+];
+
+export type PdfFont = "regular" | "bold";
+
+/** Code points WinAnsi keeps in 0x80-0x9F, where Latin-1 has control codes. */
+const HIGH = new Map<number, number>([
+  [0x20ac, 0x80], [0x201a, 0x82], [0x0192, 0x83], [0x201e, 0x84],
+  [0x2026, 0x85], [0x2020, 0x86], [0x2021, 0x87], [0x02c6, 0x88],
+  [0x2030, 0x89], [0x0160, 0x8a], [0x2039, 0x8b], [0x0152, 0x8c],
+  [0x017d, 0x8e], [0x2018, 0x91], [0x2019, 0x92], [0x201c, 0x93],
+  [0x201d, 0x94], [0x2022, 0x95], [0x2013, 0x96], [0x2014, 0x97],
+  [0x02dc, 0x98], [0x2122, 0x99], [0x0161, 0x9a], [0x203a, 0x9b],
+  [0x0153, 0x9c], [0x017e, 0x9e], [0x0178, 0x9f],
+]);
+
+const QUESTION = 0x3f;
+const ELLIPSIS = 0x85;
+const SPACE = 0x20;
+
+/**
+ * Encodes text as WinAnsi bytes. Characters the encoding cannot carry become
+ * "?", and control characters become spaces so a stray tab or newline in a cell
+ * cannot break the line layout.
+ */
+export function encode(text: string): number[] {
+  const bytes: number[] = [];
+
+  for (const char of text) {
+    const code = char.codePointAt(0) ?? QUESTION;
+
+    if (code === 0x09 || code === 0x0a || code === 0x0d) bytes.push(SPACE);
+    else if (code >= 0x20 && code <= 0x7e) bytes.push(code);
+    else if (code >= 0xa0 && code <= 0xff) bytes.push(code);
+    else bytes.push(HIGH.get(code) ?? QUESTION);
+  }
+
+  return bytes;
+}
+
+/** Width of already-encoded bytes, in points, at `size`. */
+export function widthOf(bytes: readonly number[], font: PdfFont, size: number): number {
+  const widths = font === "bold" ? HELVETICA_BOLD : HELVETICA;
+  let total = 0;
+
+  for (const byte of bytes) total += widths[byte - 32] ?? 0;
+
+  return (total * size) / 1000;
+}
+
+/**
+ * Trims bytes to `max` points, ending in an ellipsis when anything was cut.
+ * Returns an empty run when not even the ellipsis fits.
+ */
+export function fit(
+  bytes: readonly number[],
+  font: PdfFont,
+  size: number,
+  max: number,
+): number[] {
+  if (widthOf(bytes, font, size) <= max) return [...bytes];
+
+  const room = max - widthOf([ELLIPSIS], font, size);
+  if (room < 0) return [];
+
+  const widths = font === "bold" ? HELVETICA_BOLD : HELVETICA;
+  let used = 0;
+  let end = 0;
+
+  while (end < bytes.length) {
+    const next = used + ((widths[bytes[end] - 32] ?? 0) * size) / 1000;
+    if (next > room) break;
+    used = next;
+    end++;
+  }
+
+  return [...bytes.slice(0, end), ELLIPSIS];
+}
+
+/**
+ * A PDF literal string body, without the surrounding parentheses. Only the
+ * three delimiters need escaping; every other byte is legal as-is.
+ */
+export function literal(bytes: readonly number[]): string {
+  let out = "";
+
+  for (const byte of bytes) {
+    if (byte === 0x28 || byte === 0x29 || byte === 0x5c) out += "\\";
+    out += String.fromCharCode(byte);
+  }
+
+  return out;
+}

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

@@ -0,0 +1,113 @@
+/*
+ * Minimal PDF 1.7 writer: a header, numbered objects, a cross-reference table
+ * of byte offsets and a trailer. Enough for a paginated table, and nothing
+ * more.
+ *
+ * Everything that is not stream data is built as a string whose character
+ * codes are all <= 255, so one character is one byte and offsets stay exact.
+ * Using UTF-8 here would silently shift every offset past the first accented
+ * character and produce a file that some viewers repair and others reject.
+ */
+
+/**
+ * A body such as `<</Type/Catalog …>>`, or a stream. A stream's `/Length` is
+ * measured by the writer; `extra` carries anything else the dictionary needs,
+ * such as `/Filter/FlateDecode`.
+ */
+export type PdfObject = string | { extra?: string; stream: string | Uint8Array };
+
+const HEADER = "%PDF-1.7\n%âãÏÓ\n";
+
+function latin1(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;
+}
+
+/**
+ * Deflates with the platform's own compressor, which emits exactly the zlib
+ * wrapper `/FlateDecode` expects. Returns null where CompressionStream is
+ * missing, and the caller writes the stream uncompressed instead.
+ */
+export async function deflate(data: Uint8Array): Promise<Uint8Array | null> {
+  if (typeof CompressionStream === "undefined") return null;
+
+  const stream = new Blob([data as BlobPart]).stream().pipeThrough(new CompressionStream("deflate"));
+  return new Uint8Array(await new Response(stream).arrayBuffer());
+}
+
+/**
+ * A PDF text string, for values like /Title that a viewer shows as chrome.
+ *
+ * These are NOT the page's WinAnsi strings: a bare literal is read as
+ * PDFDocEncoding, which disagrees with WinAnsi across 0x80-0x9F — an em dash
+ * would arrive as "S-caron". UTF-16BE behind a byte-order mark is unambiguous.
+ */
+export function textString(value: string): string {
+  let hex = "FEFF";
+  for (let i = 0; i < value.length; i++) {
+    hex += value.charCodeAt(i).toString(16).padStart(4, "0").toUpperCase();
+  }
+  return `<${hex}>`;
+}
+
+function pad(value: number, length: number): string {
+  return String(value).padStart(length, "0");
+}
+
+/** A PDF date string, as `/CreationDate` wants it. */
+export function pdfDate(at: Date): string {
+  return (
+    `D:${at.getUTCFullYear()}${pad(at.getUTCMonth() + 1, 2)}${pad(at.getUTCDate(), 2)}` +
+    `${pad(at.getUTCHours(), 2)}${pad(at.getUTCMinutes(), 2)}${pad(at.getUTCSeconds(), 2)}` +
+    `+00'00'`
+  );
+}
+
+/**
+ * Assembles the file. Objects are numbered by position, so `objects[0]` is
+ * object 1 — the same numbers the bodies reference.
+ */
+export function buildPdf(
+  objects: readonly PdfObject[],
+  trailer: { root: number; info: number },
+): Blob {
+  const parts: Uint8Array[] = [latin1(HEADER)];
+  const offsets: number[] = [];
+  let offset = HEADER.length;
+
+  const push = (chunk: Uint8Array) => {
+    parts.push(chunk);
+    offset += chunk.length;
+  };
+
+  objects.forEach((object, index) => {
+    offsets.push(offset);
+    push(latin1(`${index + 1} 0 obj\n`));
+
+    if (typeof object === "string") {
+      push(latin1(`${object}\n`));
+    } else {
+      const data = typeof object.stream === "string" ? latin1(object.stream) : object.stream;
+      push(latin1(`<</Length ${data.length}${object.extra ?? ""}>>\nstream\n`));
+      push(data);
+      push(latin1("\nendstream\n"));
+    }
+
+    push(latin1("endobj\n"));
+  });
+
+  const start = offset;
+  // Entries are exactly 20 bytes each; the table is unusable otherwise.
+  let xref = `xref\n0 ${objects.length + 1}\n0000000000 65535 f \n`;
+  for (const at of offsets) xref += `${pad(at, 10)} 00000 n \n`;
+
+  push(
+    latin1(
+      `${xref}trailer\n<</Size ${objects.length + 1}/Root ${trailer.root} 0 R` +
+        `/Info ${trailer.info} 0 R>>\nstartxref\n${start}\n%%EOF\n`,
+    ),
+  );
+
+  return new Blob(parts as BlobPart[], { type: "application/pdf" });
+}

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

@@ -1,9 +1,326 @@
+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: "A3" | "A4" | "A5" | "letter" | "legal";
+  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) =>
@@ -37,8 +354,9 @@ td.num { text-align: end; font-variant-numeric: tabular-nums; }
 }
 
 /**
- * Opens the browser's print dialog with the table laid out for paper, where
- * the user picks "Save as PDF". No PDF library is bundled.
+ * 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");

package/source/beta-components/data-grid/react/Toolbar.tsx

@@ -127,6 +127,7 @@ export function Toolbar<T>({ options, globalFilter, filters, density, columns, c
                   [locale.exportCsv, () => api.exportCsv()],
                   [locale.exportExcel, () => api.exportExcel()],
                   [locale.exportPdf, () => api.exportPdf()],
+                  [locale.print, () => api.print()],
                 ] as const
               ).map(([label, action]) => (
                 <button

package/source/beta-components/data-grid/react/locale.ts

@@ -10,6 +10,7 @@ export interface LocaleText {
   exportCsv: string;
   exportExcel: string;
   exportPdf: string;
+  print: string;
   density: string;
   densityCompact: string;
   densityStandard: string;
@@ -64,7 +65,8 @@ export const defaultLocaleText: LocaleText = {
   export: "Export",
   exportCsv: "CSV",
   exportExcel: "Excel (.xlsx)",
-  exportPdf: "PDF (print)",
+  exportPdf: "PDF (.pdf)",
+  print: "Print…",
   density: "Density",
   densityCompact: "Compact",
   densityStandard: "Standard",