@grampro/kit 0.0.0-stage → 2.4.0

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

@@ -0,0 +1,98 @@
+import type { ResolvedColumn } from "./types";
+
+const DATE_ONLY = /^(\d{4})-(\d{2})-(\d{2})$/;
+
+export interface Formatters {
+  date: Intl.DateTimeFormat;
+  yes: string;
+  no: string;
+}
+
+export function createFormatters(
+  locale?: string,
+  labels: { yes: string; no: string } = { yes: "Yes", no: "No" },
+): Formatters {
+  return {
+    date: new Intl.DateTimeFormat(locale, { dateStyle: "medium" }),
+    ...labels,
+  };
+}
+
+/** Milliseconds since epoch, or null. Date-only strings are read as local dates. */
+export function toTime(value: unknown): number | null {
+  if (value instanceof Date) {
+    const time = value.getTime();
+    return Number.isNaN(time) ? null : time;
+  }
+  if (typeof value === "number") return Number.isFinite(value) ? value : null;
+  if (typeof value === "string" && value !== "") {
+    const match = DATE_ONLY.exec(value);
+    const time = match
+      ? new Date(+match[1], +match[2] - 1, +match[3]).getTime()
+      : Date.parse(value);
+    return Number.isNaN(time) ? null : time;
+  }
+  return null;
+}
+
+export function startOfNextDay(time: number): number {
+  const date = new Date(time);
+  date.setHours(0, 0, 0, 0);
+  date.setDate(date.getDate() + 1);
+  return date.getTime();
+}
+
+export function startOfDay(time: number): number {
+  const date = new Date(time);
+  date.setHours(0, 0, 0, 0);
+  return date.getTime();
+}
+
+export function isEmptyValue(value: unknown): boolean {
+  return (
+    value === null ||
+    value === undefined ||
+    (typeof value === "string" && value.trim() === "") ||
+    (typeof value === "number" && Number.isNaN(value)) ||
+    (Array.isArray(value) && value.length === 0)
+  );
+}
+
+/** `YYYY-MM-DD` in local time, for `<input type="date">`. */
+export function toDateInputValue(value: unknown): string {
+  const time = toTime(value);
+  if (time === null) return "";
+  const date = new Date(time);
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+
+/** Display text for a cell; also used by search, CSV, PDF and clipboard copy. */
+export function formatCellValue<T>(
+  column: ResolvedColumn<T>,
+  value: unknown,
+  row: T,
+  formatters: Formatters,
+): string {
+  if (column.def.format) return column.def.format(value, row);
+  if (value === null || value === undefined) return "";
+
+  const { options } = column.def;
+  if (options) {
+    const option = options.find((o) => o.value === value);
+    if (option) return option.label;
+  }
+
+  switch (column.type) {
+    case "date": {
+      const time = toTime(value);
+      return time === null ? String(value) : formatters.date.format(time);
+    }
+    case "boolean":
+      return value ? formatters.yes : formatters.no;
+    default:
+      if (Array.isArray(value)) return value.join(", ");
+      if (value instanceof Date) return formatters.date.format(value);
+      return String(value);
+  }
+}

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

@@ -0,0 +1,85 @@
+import type { ColumnLayout } from "./types";
+
+export interface Viewport {
+  scrollTop: number;
+  scrollLeft: number;
+  width: number;
+  height: number;
+}
+
+/** Half-open range: `start` inclusive, `end` exclusive. */
+export interface Range {
+  start: number;
+  end: number;
+}
+
+export interface VisibleRange {
+  rows: Range;
+  columns: Range;
+}
+
+export function getRowRange(
+  viewport: Viewport,
+  rowCount: number,
+  rowHeight: number,
+  headerHeight: number,
+  overscan = 6,
+): Range {
+  if (rowCount === 0) return { start: 0, end: 0 };
+  const bodyHeight = Math.max(0, viewport.height - headerHeight);
+  const first = Math.floor(viewport.scrollTop / rowHeight);
+  const last = Math.ceil((viewport.scrollTop + bodyHeight) / rowHeight);
+  return {
+    start: Math.max(0, Math.min(rowCount, first) - overscan),
+    end: Math.min(rowCount, last + overscan),
+  };
+}
+
+/** Range of center (unpinned) columns intersecting the viewport. */
+export function getColumnRange<T>(
+  layout: ColumnLayout<T>,
+  viewport: Viewport,
+  overscan = 2,
+): Range {
+  const { center } = layout;
+  const count = center.length;
+  // Width is unknown before the first measurement (and during SSR): render everything.
+  if (count === 0 || viewport.width === 0) return { start: 0, end: count };
+
+  // Browsers report negative scrollLeft in RTL.
+  const windowStart = Math.abs(viewport.scrollLeft);
+  const windowEnd =
+    windowStart + Math.max(0, viewport.width - layout.leftWidth - layout.rightWidth);
+
+  // First column whose right edge is past windowStart.
+  let lo = 0;
+  let hi = count;
+  while (lo < hi) {
+    const mid = (lo + hi) >> 1;
+    if (center[mid].offset + center[mid].width <= windowStart) lo = mid + 1;
+    else hi = mid;
+  }
+  const start = lo;
+
+  // First column starting at or past windowEnd.
+  hi = count;
+  while (lo < hi) {
+    const mid = (lo + hi) >> 1;
+    if (center[mid].offset < windowEnd) lo = mid + 1;
+    else hi = mid;
+  }
+
+  return {
+    start: Math.max(0, start - overscan),
+    end: Math.min(count, Math.max(lo, start + 1) + overscan),
+  };
+}
+
+export function visibleRangeEqual(a: VisibleRange, b: VisibleRange): boolean {
+  return (
+    a.rows.start === b.rows.start &&
+    a.rows.end === b.rows.end &&
+    a.columns.start === b.columns.start &&
+    a.columns.end === b.columns.end
+  );
+}

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

@@ -0,0 +1,32 @@
+import type { ExportTable } from "./table";
+
+/** Spreadsheet apps execute cells starting with these characters as formulas. */
+const FORMULA_PREFIX = /^[=+\-@\t\r]/;
+
+function escapeField(text: string, isText: boolean, delimiter: string): string {
+  const safe = isText && FORMULA_PREFIX.test(text) ? `'${text}` : text;
+  const needsQuotes =
+    safe.includes(delimiter) || safe.includes('"') || safe.includes("\n") || safe.includes("\r");
+  return needsQuotes ? `"${safe.replace(/"/g, '""')}"` : safe;
+}
+
+function serialize(table: ExportTable, delimiter: string): string {
+  const lines = [table.columns.map((c) => escapeField(c.header, true, delimiter)).join(delimiter)];
+  table.text.forEach((row, r) => {
+    lines.push(
+      row
+        .map((text, c) => escapeField(text, typeof table.values[r][c] === "string", delimiter))
+        .join(delimiter),
+    );
+  });
+  return lines.join("\r\n");
+}
+
+export const toCsv = (table: ExportTable) => serialize(table, ",");
+
+export const toTsv = (table: ExportTable) => serialize(table, "\t");
+
+export function createCsvBlob(table: ExportTable): Blob {
+  // The BOM makes Excel read the file as UTF-8.
+  return new Blob(["", toCsv(table)], { type: "text/csv;charset=utf-8" });
+}

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

@@ -0,0 +1,12 @@
+export function downloadBlob(blob: Blob, fileName: string): void {
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = fileName;
+  link.rel = "noopener";
+  link.style.display = "none";
+  document.body.append(link);
+  link.click();
+  link.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+}

package/source/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/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" });
+}