pivotkit-report 0.0.0-stage → 0.1.0

package/src/tokens.js

@@ -0,0 +1,180 @@
+/*
+ * The colours of a report on paper and on screen: the --pk-* tokens of pivotkit-react's styles.css
+ * that a printed report uses, with the same names and values (a kept copy: test/tokens.test.js
+ * compares them with styles.css, so a change there fails here until it is made here too). The chart of
+ * an SVG and a report is drawn with the light ones; a host passes its own as `tokens`.
+ */
+
+/** The light theme: print, and a screen in light mode. */
+export const LIGHT_TOKENS = Object.freeze({
+    "--pk-surface": "#ffffff",
+    "--pk-surface-2": "#f6f7f9",
+    "--pk-surface-raised": "#ffffff",
+    "--pk-text": "#1a1d23",
+    "--pk-muted": "#5a6270",
+    "--pk-border": "#dde1e7",
+    "--pk-border-strong": "#c3c9d2",
+    "--pk-grid": "#edf0f3",
+    "--pk-total": "#eef1f5",
+    "--pk-total-strong": "#e9edf3",
+    "--pk-shadow": "0 1px 2px rgb(16 24 40 / 0.06), 0 4px 12px rgb(16 24 40 / 0.08)",
+    "--pk-heat-low": "#eaf1fb",
+    "--pk-heat-high": "#2a78d6",
+    "--pk-scale-low": "var(--pk-heat-low)",
+    "--pk-scale-high": "var(--pk-heat-high)",
+    "--pk-chart-1": "#2a78d6",
+    "--pk-chart-2": "#eb6834",
+    "--pk-chart-3": "#1baf7a",
+    "--pk-chart-4": "#eda100",
+    "--pk-chart-5": "#e87ba4",
+    "--pk-chart-6": "#008300",
+    "--pk-chart-7": "#6250d6",
+    "--pk-chart-8": "#e34948"
+});
+
+/** The dark theme, for a report read on a screen in dark mode (never printed: print is light). */
+export const DARK_TOKENS = Object.freeze({
+    "--pk-surface": "#16181d",
+    "--pk-surface-2": "#1c1f25",
+    "--pk-surface-raised": "#22262d",
+    "--pk-text": "#e8eaef",
+    "--pk-muted": "#a3aab7",
+    "--pk-border": "#2f343e",
+    "--pk-border-strong": "#454c58",
+    "--pk-grid": "#23272e",
+    "--pk-total": "#21252d",
+    "--pk-total-strong": "#252a33",
+    "--pk-shadow": "0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.3)",
+    "--pk-heat-low": "#1d2735",
+    "--pk-heat-high": "#3987e5",
+    "--pk-scale-low": "var(--pk-heat-low)",
+    "--pk-scale-high": "var(--pk-heat-high)",
+    "--pk-chart-1": "#3987e5",
+    "--pk-chart-2": "#d95926",
+    "--pk-chart-3": "#199e70",
+    "--pk-chart-4": "#c98500",
+    "--pk-chart-5": "#d55181",
+    "--pk-chart-6": "#008300",
+    "--pk-chart-7": "#9085e9",
+    "--pk-chart-8": "#e66767"
+});
+
+/** The font weights, the same in both themes: pivotkit-react's scale (test/tokens.test.js compares them). */
+export const WEIGHT_TOKENS = Object.freeze({
+    "--pk-weight-normal": "400",
+    "--pk-weight-medium": "500",
+    "--pk-weight-strong": "600",
+    "--pk-weight-bold": "700"
+});
+
+/**
+ * The corners the report draws, the same in both themes: the chart's card, as pivotkit-react's tooltip
+ * (test/tokens.test.js compares them).
+ */
+export const SHAPE_TOKENS = Object.freeze({
+    "--pk-radius-card": "8px"
+});
+
+/**
+ * The report's font sizes, the same in both themes: its text (--pk-font-size, 14 px, the report's own
+ * default: pivotkit-react's follows the page, at least 14 px, and its Export menu passes it in px),
+ * secondary text (--pk-small, pivotkit-react's: the details, never below 14 px), the title (20 px at a
+ * 14 px text) and the printed text, in pt on paper: the table and, for a very wide table, the smaller
+ * size (PRINT_WIDE.small, never below 7 pt). A host passes its own as `tokens`.
+ */
+export const SIZE_TOKENS = Object.freeze({
+    "--pk-font-size": "14px",
+    "--pk-small": "max(14px, 0.93em)",
+    "--pk-report-title-size": "calc(var(--pk-font-size) * 10 / 7)",
+    "--pk-print-size": "10pt",
+    "--pk-print-small": "7pt"
+});
+
+/**
+ * The report's font: the system's, as the screen's report inherits from most hosts. Without quotes
+ * (names of several words are valid unquoted): ECharts 6.1 writes a font into an SVG's style attribute
+ * without escaping its quotes, which would end the attribute.
+ */
+export const REPORT_FONT = "system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif";
+
+/**
+ * A token value is written into CSS only when it holds no character that could end the rule, and no
+ * comment (a calc()'s * and / are kept apart from each other).
+ */
+const SAFE_VALUE = /^(?![\s\S]*(\/\*|\*\/))[#\w\s.,%()/*+-]*$/;
+/**
+ * The CSS functions a token may call: colours, a shadow's lengths and other tokens. Any other, url(),
+ * image-set() or src() among them, could load a resource where a report loads none.
+ */
+const SAFE_FUNCTIONS = new Set(["rgb", "rgba", "hsl", "hsla", "hwb", "lab", "lch", "oklab", "oklch", "color", "color-mix", "light-dark", "calc", "min", "max", "clamp", "var"]);
+
+/**
+ * Whether a value (its quoted strings left out) is plain and calls only SAFE_FUNCTIONS. A line break
+ * (LF, CR, FF) is refused before the strings are left out: inside a CSS string it ends the string, so
+ * what follows would be read as CSS; and url( is refused anywhere, also inside a string.
+ */
+function safeValue(value) {
+    if (/[\n\r\f]|url\(/i.test(value)) return false;
+    const plain = value.replace(/"[^"\\<>{};]*"/g, "");
+    return SAFE_VALUE.test(plain) && [...plain.matchAll(/([\w-]*)\(/g)].every((m) => SAFE_FUNCTIONS.has(m[1].toLowerCase()));
+}
+
+/**
+ * The tokens as a style the chart's code reads (getPropertyValue), the host's over the light ones.
+ * @param {Record<string, string>} [tokens]
+ * @returns {{ getPropertyValue(name: string): string }}
+ */
+export function tokenStyle(tokens = {}) {
+    const all = { ...LIGHT_TOKENS, ...WEIGHT_TOKENS, ...SHAPE_TOKENS, ...SIZE_TOKENS, "font-family": REPORT_FONT, ...cleanTokens(tokens) };
+    // the chart's font without quotes (see REPORT_FONT)
+    all["font-family"] = all["font-family"].replace(/["']/g, "");
+    return { getPropertyValue: (name) => (Object.hasOwn(all, name) ? all[name] : "") };
+}
+
+/**
+ * The host's tokens that may go into CSS: --pk-* names (and font-family) with plain values that call
+ * no function but SAFE_FUNCTIONS; others are left out.
+ * @param {Record<string, string>} tokens
+ */
+export function cleanTokens(tokens) {
+    /** @type {Record<string, string>} */
+    const out = {};
+    for (const [name, value] of Object.entries(tokens ?? {})) {
+        if ((/^--pk-[a-z0-9-]+$/.test(name) || name === "font-family") && typeof value === "string" && value.length <= 200 && safeValue(value)) {
+            out[name] = value.trim();
+        }
+    }
+    return out;
+}
+
+/** A colour a table cell and a workbook take: #rgb or #rrggbb. */
+const HEX_COLOR = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
+
+/**
+ * The colours of a colour scale and of data bars whose view names none, from the host's tokens over
+ * the light ones, as the report on screen resolves them: the scale --pk-scale-low, the host's
+ * --pk-scale-mid and --pk-scale-high (by default the heat tokens), the bars --pk-chart-1. A value
+ * that is no plain hex colour (another token is followed) keeps pivotkit-core's default.
+ * @param {Record<string, string>} [tokens]
+ * @returns {{ colorScale?: string[], dataBar?: string }}
+ */
+export function conditionalColors(tokens = {}) {
+    const all = { ...LIGHT_TOKENS, ...cleanTokens(tokens) };
+    const resolve = (/** @type {string} */ name, depth = 0) => {
+        const value = Object.hasOwn(all, name) ? all[name] : "";
+        const ref = /^var\((--pk-[a-z0-9-]+)\)$/.exec(value);
+        return ref && depth < 4 ? resolve(ref[1], depth + 1) : HEX_COLOR.test(value) ? value : null;
+    };
+    const [low, mid, high, bar] = ["--pk-scale-low", "--pk-scale-mid", "--pk-scale-high", "--pk-chart-1"].map((name) => resolve(name));
+    return {
+        ...(low && high ? { colorScale: mid ? [low, mid, high] : [low, high] } : {}),
+        ...(bar ? { dataBar: bar } : {})
+    };
+}
+
+/** Tokens as CSS declarations. */
+export const declarations = (tokens) =>
+    Object.entries(tokens)
+        .filter(([name]) => name.startsWith("--pk-"))
+        .map(([name, value]) => `${name}:${value}`)
+        .join(";");

package/types/default-template.d.ts

@@ -0,0 +1,2 @@
+export declare const REPORT_CSP = "default-src 'none'; style-src 'unsafe-inline'; img-src data:; base-uri 'none'; form-action 'none'";
+export declare const DEFAULT_TEMPLATE = "<!doctype html>\n<html lang=\"{{lang}}\" dir=\"{{dir}}\">\n<head>\n<meta http-equiv=\"Content-Security-Policy\" content=\"default-src 'none'; style-src 'unsafe-inline'; img-src data:; base-uri 'none'; form-action 'none'\">\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<meta name=\"generator\" content=\"pivotkit\">\n<meta name=\"description\" content=\"{{summary}}\">\n<title>{{title}}</title>\n{{style}}\n</head>\n<body>\n<main class=\"pk-report\">\n<header>\n<h1>{{title}}</h1>\n<p class=\"pk-report-description\">{{description}}</p>\n</header>\n{{chart}}\n{{table}}\n{{details}}\n</main>\n</body>\n</html>\n";

package/types/html-table.d.ts

@@ -0,0 +1,36 @@
+export type HtmlTable = {
+    /**
+     * the <table>
+     */
+    html: string;
+    /**
+     * the rules of the conditional colours, per cell class
+     */
+    css: string;
+    /**
+     * body rows shown of all, when the table was cut
+     */
+    cut: {
+        rows: number;
+        of: number;
+    } | null;
+};
+/**
+ * @typedef {object} HtmlTable
+ * @property {string} html  the <table>
+ * @property {string} css  the rules of the conditional colours, per cell class
+ * @property {{ rows: number, of: number } | null} cut  body rows shown of all, when the table was cut
+ */
+/**
+ * @param {import("pivotkit-core").Grid} grid
+ * @param {{ maxCells: number, caption?: string, colorScale?: string[], dataBar?: string }} options
+ *   colorScale, dataBar: the colours of a scale or a bar whose view names none (the host's tokens,
+ *   tokens.js conditionalColors; else pivotkit-core's DEFAULT_THEME)
+ * @returns {HtmlTable}
+ */
+export declare function htmlTable(grid: import("pivotkit-core").Grid, { maxCells, caption, colorScale, dataBar }: {
+    maxCells: number;
+    caption?: string;
+    colorScale?: string[];
+    dataBar?: string;
+}): HtmlTable;

package/types/index.d.ts

@@ -0,0 +1,13 @@
+export type RenderOptions = import("./render.js").RenderOptions;
+export type RenderResult = import("./render.js").RenderResult;
+export type ReportTexts = import("./texts.js").ReportTexts;
+/**
+ * @typedef {import("./render.js").RenderOptions} RenderOptions
+ * @typedef {import("./render.js").RenderResult} RenderResult
+ * @typedef {import("./texts.js").ReportTexts} ReportTexts
+ */
+export { render, RENDER_FORMATS, REPORT_LIMITS, REPORT_ISSUE_CODES, CHART_SIZE } from "./render.js";
+export { cleanSvg } from "./svg.js";
+export { DEFAULT_TEMPLATE, REPORT_CSP } from "./default-template.js";
+export { REPORT_TEXTS } from "./texts.js";
+export { LIGHT_TOKENS, DARK_TOKENS, WEIGHT_TOKENS, SHAPE_TOKENS, SIZE_TOKENS } from "./tokens.js";

package/types/render.d.ts

@@ -0,0 +1,176 @@
+/** The formats: media type, file extension, and whether the body is text (`text` is set). */
+export declare const RENDER_FORMATS: Readonly<{
+    json: Readonly<{
+        mediaType: "application/json";
+        extension: "json";
+        text: true;
+    }>;
+    csv: Readonly<{
+        mediaType: "text/csv;charset=utf-8";
+        extension: "csv";
+        text: true;
+    }>;
+    xlsx: Readonly<{
+        mediaType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+        extension: "xlsx";
+        text: false;
+    }>;
+    svg: Readonly<{
+        mediaType: "image/svg+xml";
+        extension: "svg";
+        text: true;
+    }>;
+    html: Readonly<{
+        mediaType: "text/html;charset=utf-8";
+        extension: "html";
+        text: true;
+    }>;
+}>;
+/**
+ * What a report allows at most, besides pivotkit-core's LIMITS: the characters of a template, the size
+ * of a chart in px, the cells of a report's table (a larger table is cut after the last whole row, and
+ * says so), the categories of a chart (the first ones, as on the screen).
+ */
+export declare const REPORT_LIMITS: Readonly<{
+    template: 262144;
+    chartWidth: 8000;
+    chartHeight: 8000;
+    tableCells: 200000;
+    categories: 50;
+}>;
+/** The default size of a chart in px. */
+export declare const CHART_SIZE: Readonly<{
+    width: 800;
+    height: 480;
+}>;
+/** Issues of a report itself (warnings), besides a view's (VIEW_ISSUES). */
+export declare const REPORT_ISSUE_CODES: readonly string[];
+export type RenderOptions = {
+    /**
+     * default "html"
+     */
+    format?: "json" | "csv" | "xlsx" | "svg" | "html";
+    /**
+     * used when the view names none; default "en-US"
+     */
+    locale?: string;
+    /**
+     * of rows that are not encoded yet (encode()), and of the "generated" time; default "UTC"
+     */
+    timeZone?: string;
+    /**
+     * "today" of relative date filters and the "generated" time; fix it for output that is the same on every run
+     */
+    now?: Date | number | string;
+    /**
+     * pivotkit-core's limits
+     */
+    limits?: Partial<import("pivotkit-core").Limits>;
+    /**
+     * the view is the host's own: the host's limits instead of outsideLimits() (default false)
+     */
+    trusted?: boolean;
+    /**
+     * no body when the view has an error (default false: the normalized view is rendered)
+     */
+    strict?: boolean;
+    /**
+     * pivotkit-core's texts (totals, value names)
+     */
+    labels?: Partial<import("pivotkit-core").Labels>;
+    /**
+     * the report's words around the table
+     */
+    texts?: Partial<import("./texts.js").ReportTexts>;
+    /**
+     * --pk-* colours over the light ones (the chart and the report)
+     */
+    tokens?: Record<string, string>;
+    /**
+     * the report's title; default the view file's name, the chart's title, "Report"
+     */
+    title?: string;
+    /**
+     * default the view file's description
+     */
+    description?: string;
+    /**
+     * where the data comes from, for the report's details (a file name)
+     */
+    source?: string;
+    /**
+     * html: a print template (parseTemplate), default DEFAULT_TEMPLATE
+     */
+    template?: string;
+    /**
+     * html: with the chart; "auto" (default) when the view shows the chart
+     */
+    chart?: boolean | "auto";
+    /**
+     * html: the chart as a data: image (default) or as inline SVG
+     */
+    chartEmbed?: "image" | "inline";
+    /**
+     * the ECharts module (with its SVG renderer): svg, and html with a chart
+     */
+    echarts?: {
+        init: Function;
+    };
+    /**
+     * of the chart in px, default 800 x 480
+     */
+    size?: {
+        width?: number;
+        height?: number;
+    };
+    /**
+     * html: cells of the table at most, default REPORT_LIMITS.tableCells
+     */
+    tableCells?: number;
+    /**
+     * csv: start with a byte order mark, so Excel reads it as UTF-8 (default true)
+     */
+    bom?: boolean;
+};
+export type RenderResult = {
+    format: string;
+    mediaType: string;
+    extension: string;
+    /**
+     * the file; null when `strict` and the view has an error
+     */
+    body: Uint8Array | null;
+    /**
+     * the body as text, for json, csv, svg and html
+     */
+    text?: string;
+    /**
+     * the view's issues, then the report's (REPORT_ISSUE_CODES)
+     */
+    issues: import("pivotkit-core").Issue[];
+    /**
+     * no issue of severity "error"
+     */
+    ok: boolean;
+    /**
+     * the table's body rows and columns, the data's rows, whether a part was cut
+     */
+    summary: {
+        rows: number;
+        columns: number;
+        sourceRows: number;
+        truncated: boolean;
+    } | null;
+    /**
+     * the normalized view that was rendered
+     */
+    view: import("pivotkit-core").View | null;
+};
+/**
+ * Renders a view over data as a file.
+ * @param {unknown} view  a view, a view file or a template { name, view }, as an object or JSON text
+ * @param {unknown} data  rows, columnar data ({ columns, types, data }) or encode()'s result
+ * @param {RenderOptions} [options]
+ * @returns {Promise<RenderResult>}
+ */
+export declare function render(view: unknown, data: unknown, options?: RenderOptions): Promise<RenderResult>;

package/types/report-css.d.ts

@@ -0,0 +1,14 @@
+/** Columns from which a printed table is turned to landscape, and from which its font gets smaller. */
+export declare const PRINT_WIDE: Readonly<{
+    landscape: 8;
+    small: 16;
+}>;
+/**
+ * @param {{ columns: number, tokens?: Record<string, string>, extra?: string }} options
+ *   columns: the table's; tokens: the host's (cleaned), over the light ones; extra: the cells' colour rules
+ */
+export declare function reportCss({ columns, tokens, extra }: {
+    columns: number;
+    tokens?: Record<string, string>;
+    extra?: string;
+}): string;

package/types/svg.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Checks an SVG string and makes it safe to open and to show under a strict Content-Security-Policy:
+ * only the elements an ECharts chart draws, no event handler attribute, no link but to a fragment or
+ * a data: image, no attribute name but a plain one, no namespace but SVG's and xlink's, no text that is not escaped; every `style` attribute becomes presentation attributes
+ * (a policy without 'unsafe-inline' blocks style attributes, not those) and a <style> element (ECharts'
+ * hover states) and characters XML does not allow, also as numeric references, are left out. Throws INVALID_ARGUMENT
+ * (`details.reason`) for anything else.
+ * @param {string} svg
+ * @returns {string}
+ */
+export declare function cleanSvg(svg: string): string;
+/**
+ * The chart of a pivot as SVG, as pivotkit-react draws it: chartPlan's type (the view's, or what
+ * "auto" picks; rows and columns swapped for the chart where it says so), the theme's colours from
+ * `style`, the axis labels laid out for the size, at most `maxCategories` categories.
+ * @param {import("pivotkit-core").PivotResult} result
+ * @param {{ echarts: { init: Function }, style: { getPropertyValue(name: string): string }, width: number, height: number,
+ *   locale: string, labels?: object, limits?: object, now?: any, maxCategories: number }} options
+ * @returns {{ svg: string, categories: number, of: number }}
+ */
+export declare function chartSvg(result: import("pivotkit-core").PivotResult, { echarts, style, width, height, locale, labels, limits, now, maxCategories }: {
+    echarts: {
+        init: Function;
+    };
+    style: {
+        getPropertyValue(name: string): string;
+    };
+    width: number;
+    height: number;
+    locale: string;
+    labels?: object;
+    limits?: object;
+    now?: any;
+    maxCategories: number;
+}): {
+    svg: string;
+    categories: number;
+    of: number;
+};

package/types/template.d.ts

@@ -0,0 +1,37 @@
+/** Characters a template may have. */
+export declare const TEMPLATE_LIMIT = 262144;
+/**
+ * The placeholders: text (escaped) and markup (built by pivotkit from escaped parts).
+ * @type {Readonly<Record<string, "text" | "markup">>}
+ */
+export declare const PLACEHOLDERS: Readonly<Record<string, "text" | "markup">>;
+/** Attributes whose quoted value may hold a text placeholder. */
+export declare const ATTRIBUTES: readonly string[];
+export type Slot = {
+    name: string;
+    kind: "text" | "markup";
+};
+export type Template = {
+    parts: Array<string | Slot>;
+    names: string[];
+};
+/**
+ * @typedef {{ name: string, kind: "text" | "markup" }} Slot
+ * @typedef {{ parts: Array<string | Slot>, names: string[] }} Template  the template's text cut at its placeholders
+ */
+/** Escapes text for HTML text content and quoted attribute values; bidi controls are left out. */
+export declare function escapeHtml(text: any): string;
+/**
+ * Checks a template and cuts it at its placeholders. Throws INVALID_TEMPLATE (see above).
+ * @param {string} source
+ * @returns {Template}
+ */
+export declare function parseTemplate(source: string): Template;
+/**
+ * The template with its placeholders filled: text values escaped, markup values as given (built by
+ * pivotkit). A placeholder without a value is empty.
+ * @param {Template} template  from parseTemplate()
+ * @param {Partial<Record<string, string>>} values
+ * @returns {string}
+ */
+export declare function fillTemplate(template: Template, values: Partial<Record<string, string>>): string;

package/types/texts.d.ts

@@ -0,0 +1,44 @@
+/**
+ * The characters that change the direction of text, as pivotkit-core's import leaves them out: a report
+ * writes none of them (HTML, SVG), so no name reads as another one ("invoice\u202Etxt.exe").
+ */
+export declare const BIDI_CONTROLS: RegExp;
+export declare const REPORT_TEXTS: Readonly<{
+    en: Readonly<{
+        untitled: "Report";
+        source: "Source";
+        rows: "Rows";
+        rowsCount: "{count} rows";
+        generated: "Generated";
+        filters: "Filters";
+        noFilters: "None";
+        chart: "Chart";
+        tableCut: "The table shows the first {shown} of {count} rows. Export it as Excel or CSV for all of them.";
+        chartCut: "The chart shows the first {shown} of {count} categories.";
+        chartUnavailable: "The chart is left out: ECharts is not available.";
+    }>;
+    de: Readonly<{
+        untitled: "Bericht";
+        source: "Quelle";
+        rows: "Zeilen";
+        rowsCount: "{count} Zeilen";
+        generated: "Erstellt";
+        filters: "Filter";
+        noFilters: "Keine";
+        chart: "Diagramm";
+        tableCut: "Die Tabelle zeigt die ersten {shown} von {count} Zeilen. Für alle als Excel oder CSV exportieren.";
+        chartCut: "Das Diagramm zeigt die ersten {shown} von {count} Kategorien.";
+        chartUnavailable: "Das Diagramm fehlt: ECharts ist nicht verfügbar.";
+    }>;
+}>;
+export type ReportTexts = typeof REPORT_TEXTS.en;
+/** @typedef {typeof REPORT_TEXTS.en} ReportTexts */
+/**
+ * The texts for a locale, the host's over them.
+ * @param {string} locale
+ * @param {Partial<ReportTexts>} [own]
+ * @returns {ReportTexts}
+ */
+export declare function textsFor(locale: string, own?: Partial<ReportTexts>): ReportTexts;
+/** "{count} rows" with its values. */
+export declare const fill: (text: any, values: any) => any;

package/types/tokens.d.ts

@@ -0,0 +1,114 @@
+/** The light theme: print, and a screen in light mode. */
+export declare const LIGHT_TOKENS: Readonly<{
+    "--pk-surface": "#ffffff";
+    "--pk-surface-2": "#f6f7f9";
+    "--pk-surface-raised": "#ffffff";
+    "--pk-text": "#1a1d23";
+    "--pk-muted": "#5a6270";
+    "--pk-border": "#dde1e7";
+    "--pk-border-strong": "#c3c9d2";
+    "--pk-grid": "#edf0f3";
+    "--pk-total": "#eef1f5";
+    "--pk-total-strong": "#e9edf3";
+    "--pk-shadow": "0 1px 2px rgb(16 24 40 / 0.06), 0 4px 12px rgb(16 24 40 / 0.08)";
+    "--pk-heat-low": "#eaf1fb";
+    "--pk-heat-high": "#2a78d6";
+    "--pk-scale-low": "var(--pk-heat-low)";
+    "--pk-scale-high": "var(--pk-heat-high)";
+    "--pk-chart-1": "#2a78d6";
+    "--pk-chart-2": "#eb6834";
+    "--pk-chart-3": "#1baf7a";
+    "--pk-chart-4": "#eda100";
+    "--pk-chart-5": "#e87ba4";
+    "--pk-chart-6": "#008300";
+    "--pk-chart-7": "#6250d6";
+    "--pk-chart-8": "#e34948";
+}>;
+/** The dark theme, for a report read on a screen in dark mode (never printed: print is light). */
+export declare const DARK_TOKENS: Readonly<{
+    "--pk-surface": "#16181d";
+    "--pk-surface-2": "#1c1f25";
+    "--pk-surface-raised": "#22262d";
+    "--pk-text": "#e8eaef";
+    "--pk-muted": "#a3aab7";
+    "--pk-border": "#2f343e";
+    "--pk-border-strong": "#454c58";
+    "--pk-grid": "#23272e";
+    "--pk-total": "#21252d";
+    "--pk-total-strong": "#252a33";
+    "--pk-shadow": "0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.3)";
+    "--pk-heat-low": "#1d2735";
+    "--pk-heat-high": "#3987e5";
+    "--pk-scale-low": "var(--pk-heat-low)";
+    "--pk-scale-high": "var(--pk-heat-high)";
+    "--pk-chart-1": "#3987e5";
+    "--pk-chart-2": "#d95926";
+    "--pk-chart-3": "#199e70";
+    "--pk-chart-4": "#c98500";
+    "--pk-chart-5": "#d55181";
+    "--pk-chart-6": "#008300";
+    "--pk-chart-7": "#9085e9";
+    "--pk-chart-8": "#e66767";
+}>;
+/** The font weights, the same in both themes: pivotkit-react's scale (test/tokens.test.js compares them). */
+export declare const WEIGHT_TOKENS: Readonly<{
+    "--pk-weight-normal": "400";
+    "--pk-weight-medium": "500";
+    "--pk-weight-strong": "600";
+    "--pk-weight-bold": "700";
+}>;
+/**
+ * The corners the report draws, the same in both themes: the chart's card, as pivotkit-react's tooltip
+ * (test/tokens.test.js compares them).
+ */
+export declare const SHAPE_TOKENS: Readonly<{
+    "--pk-radius-card": "8px";
+}>;
+/**
+ * The report's font sizes, the same in both themes: its text (--pk-font-size, 14 px, the report's own
+ * default: pivotkit-react's follows the page, at least 14 px, and its Export menu passes it in px),
+ * secondary text (--pk-small, pivotkit-react's: the details, never below 14 px), the title (20 px at a
+ * 14 px text) and the printed text, in pt on paper: the table and, for a very wide table, the smaller
+ * size (PRINT_WIDE.small, never below 7 pt). A host passes its own as `tokens`.
+ */
+export declare const SIZE_TOKENS: Readonly<{
+    "--pk-font-size": "14px";
+    "--pk-small": "max(14px, 0.93em)";
+    "--pk-report-title-size": "calc(var(--pk-font-size) * 10 / 7)";
+    "--pk-print-size": "10pt";
+    "--pk-print-small": "7pt";
+}>;
+/**
+ * The report's font: the system's, as the screen's report inherits from most hosts. Without quotes
+ * (names of several words are valid unquoted): ECharts 6.1 writes a font into an SVG's style attribute
+ * without escaping its quotes, which would end the attribute.
+ */
+export declare const REPORT_FONT = "system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif";
+/**
+ * The tokens as a style the chart's code reads (getPropertyValue), the host's over the light ones.
+ * @param {Record<string, string>} [tokens]
+ * @returns {{ getPropertyValue(name: string): string }}
+ */
+export declare function tokenStyle(tokens?: Record<string, string>): {
+    getPropertyValue(name: string): string;
+};
+/**
+ * The host's tokens that may go into CSS: --pk-* names (and font-family) with plain values that call
+ * no function but SAFE_FUNCTIONS; others are left out.
+ * @param {Record<string, string>} tokens
+ */
+export declare function cleanTokens(tokens: Record<string, string>): Record<string, string>;
+/**
+ * The colours of a colour scale and of data bars whose view names none, from the host's tokens over
+ * the light ones, as the report on screen resolves them: the scale --pk-scale-low, the host's
+ * --pk-scale-mid and --pk-scale-high (by default the heat tokens), the bars --pk-chart-1. A value
+ * that is no plain hex colour (another token is followed) keeps pivotkit-core's default.
+ * @param {Record<string, string>} [tokens]
+ * @returns {{ colorScale?: string[], dataBar?: string }}
+ */
+export declare function conditionalColors(tokens?: Record<string, string>): {
+    colorScale?: string[];
+    dataBar?: string;
+};
+/** Tokens as CSS declarations. */
+export declare const declarations: (tokens: any) => string;