@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/widgets/data/gantt-scale.js

@@ -0,0 +1,344 @@
+// widgets/data/gantt-scale.ts: the pure half of the gantt widget. It turns a
+// model's task list into rows the Svelte side can draw, and a date range plus
+// tick labels that fit a given track width. No DOM, never throws.
+//
+// Rules a reader must not break:
+// - Every task stays a row. A row with an unparseable start or end keeps its
+//   name and has no dates (the widget shows a "No dates" chip); it is left out
+//   of the range. Reversed dates are swapped. Empty names read "Untitled task".
+// - Dates are ISO days or datetimes only (format.ts dateKey), computed and
+//   labelled in UTC so no timezone moves a day.
+// - Progress: a number or numeric string with an optional %, clamped 0-100;
+//   anything else is "no progress" (absent is not 0%).
+// - Dependencies: comma list or array of ids. A repeated id resolves to its
+//   first row; unknown ids, self references and edges that close a cycle drop.
+// - The tick unit starts from viewMode and steps up (day, week, month,
+//   quarter, year) until labels sit at least minGap px apart, so the range
+//   always fits the width and nothing scrolls sideways. A last label that
+//   would cross the track end is right-aligned on its tick instead.
+// - Today has its own lane under the tick labels, so every tick label stays.
+import { dateKey, percent, plain } from '../data-kit/format.js';
+const DAY = 86_400_000;
+const HOUR = 3_600_000;
+export const parseProgress = percent;
+function depIds(v) {
+    const list = Array.isArray(v) ? v : typeof v === 'string' ? v.split(',') : typeof v === 'number' ? [v] : [];
+    return list.map((d) => String(d).trim()).filter(Boolean);
+}
+export function parseTasks(tasks) {
+    const rows = tasks.map((task) => {
+        const t = (task && typeof task === 'object' ? task : {});
+        const name = plain(t.name);
+        let start = dateKey(t.start);
+        let end = dateKey(t.end);
+        if (start === undefined || end === undefined)
+            start = end = undefined;
+        else if (end < start)
+            [start, end] = [end, start];
+        return {
+            task,
+            id: typeof t.id === 'string' || typeof t.id === 'number' ? String(t.id).trim() : '',
+            name: name || 'Untitled task',
+            untitled: !name,
+            start,
+            end,
+            milestone: start !== undefined && start === end,
+            progress: parseProgress(t.progress),
+            deps: []
+        };
+    });
+    const first = new Map();
+    rows.forEach((r, i) => {
+        if (r.id && !first.has(r.id))
+            first.set(r.id, i);
+    });
+    // Does row `from` reach row `to` by following predecessors?
+    const reaches = (from, to, seen = new Set()) => {
+        if (from === to)
+            return true;
+        if (seen.has(from))
+            return false;
+        seen.add(from);
+        return rows[from].deps.some((d) => reaches(d, to, seen));
+    };
+    rows.forEach((r, i) => {
+        const t = (r.task && typeof r.task === 'object' ? r.task : {});
+        for (const id of depIds(t.dependencies)) {
+            const d = first.get(id);
+            if (d === undefined || d === i || r.deps.includes(d) || reaches(d, i))
+                continue;
+            r.deps.push(d);
+        }
+    });
+    return rows;
+}
+/** Earliest start to latest end over rows with dates, padded 4% a side. */
+export function rangeOf(rows) {
+    let start = Infinity;
+    let end = -Infinity;
+    for (const r of rows) {
+        if (r.start === undefined || r.end === undefined)
+            continue;
+        start = Math.min(start, r.start);
+        end = Math.max(end, r.end);
+    }
+    if (start === Infinity)
+        return undefined;
+    // A lone milestone still needs a span to draw on: one day around it.
+    const span = Math.max(end - start, DAY);
+    const pad = span * 0.04 + (end === start ? DAY / 2 : 0);
+    return { start, end, min: start - pad, max: end + pad };
+}
+export function frac(t, r) {
+    return (t - r.min) / (r.max - r.min);
+}
+/** Duration-weighted percent over rows that carry progress, else undefined. */
+export function overallPercent(rows) {
+    let w = 0;
+    let done = 0;
+    let n = 0;
+    let plainSum = 0;
+    for (const r of rows) {
+        if (r.progress === undefined)
+            continue;
+        n++;
+        plainSum += r.progress;
+        if (r.start !== undefined && r.end !== undefined) {
+            w += r.end - r.start;
+            done += (r.end - r.start) * r.progress;
+        }
+    }
+    if (!n)
+        return undefined;
+    return Math.round(w > 0 ? done / w : plainSum / n);
+}
+const LADDER = ['h6', 'h12', 'day', 'week', 'month', 'quarter', 'year'];
+const APPROX = {
+    h6: 6 * HOUR,
+    h12: 12 * HOUR,
+    day: DAY,
+    week: 7 * DAY,
+    month: 30.44 * DAY,
+    quarter: 91.31 * DAY,
+    year: 365.25 * DAY
+};
+function baseUnit(mode, span) {
+    switch (mode) {
+        case 'Quarter Day':
+            return span < 4 * DAY ? 'h6' : 'day';
+        case 'Half Day':
+            return span < 4 * DAY ? 'h12' : 'day';
+        case 'Week':
+            return 'week';
+        case 'Month':
+            return 'month';
+        case 'Year':
+            return 'year';
+        default:
+            return 'day';
+    }
+}
+function floorTo(t, u) {
+    const d = new Date(t);
+    const y = d.getUTCFullYear();
+    const m = d.getUTCMonth();
+    if (u === 'h6' || u === 'h12') {
+        const step = u === 'h6' ? 6 : 12;
+        return Date.UTC(y, m, d.getUTCDate(), Math.floor(d.getUTCHours() / step) * step);
+    }
+    if (u === 'day')
+        return Date.UTC(y, m, d.getUTCDate());
+    if (u === 'week')
+        return Date.UTC(y, m, d.getUTCDate() - ((d.getUTCDay() + 6) % 7));
+    if (u === 'month')
+        return Date.UTC(y, m, 1);
+    if (u === 'quarter')
+        return Date.UTC(y, m - (m % 3), 1);
+    return Date.UTC(y, 0, 1);
+}
+function stepFrom(t, u, k) {
+    const d = new Date(t);
+    if (u === 'h6')
+        return t + 6 * HOUR * k;
+    if (u === 'h12')
+        return t + 12 * HOUR * k;
+    if (u === 'day')
+        return t + DAY * k;
+    if (u === 'week')
+        return t + 7 * DAY * k;
+    if (u === 'month')
+        return Date.UTC(d.getUTCFullYear(), d.getUTCMonth() + k, 1);
+    if (u === 'quarter')
+        return Date.UTC(d.getUTCFullYear(), d.getUTCMonth() + 3 * k, 1);
+    return Date.UTC(d.getUTCFullYear() + k, 0, 1);
+}
+/** Every boundary of `u` (every k-th) inside the range, capped so a bad input cannot loop. */
+function boundaries(r, u, k = 1) {
+    const out = [];
+    let t = floorTo(r.min, u);
+    if (t < r.min)
+        t = stepFrom(t, u, 1);
+    for (; t <= r.max && out.length < 500; t = stepFrom(t, u, k))
+        out.push(t);
+    return out;
+}
+const fmt = (t, o) => new Intl.DateTimeFormat('en-US', { ...o, timeZone: 'UTC' }).format(t);
+/** "May 3", or "May 3, 2026" with the year. */
+export function day(t, year = false) {
+    return fmt(t, year ? { month: 'short', day: 'numeric', year: 'numeric' } : { month: 'short', day: 'numeric' });
+}
+function tickText(t, u, crossesYear, isFirstOfYear) {
+    const withYear = crossesYear && isFirstOfYear;
+    if (u === 'h6' || u === 'h12') {
+        const d = new Date(t);
+        return d.getUTCHours() === 0 ? day(t) : `${String(d.getUTCHours()).padStart(2, '0')}:00`;
+    }
+    if (u === 'day') {
+        const label = `${fmt(t, { weekday: 'short' })} ${new Date(t).getUTCDate()}`;
+        return withYear ? `${label}, ${new Date(t).getUTCFullYear()}` : label;
+    }
+    if (u === 'week')
+        return day(t, withYear);
+    if (u === 'month')
+        return withYear ? fmt(t, { month: 'short', year: 'numeric' }) : fmt(t, { month: 'short' });
+    if (u === 'quarter')
+        return `Q${Math.floor(new Date(t).getUTCMonth() / 3) + 1} ${new Date(t).getUTCFullYear()}`;
+    return String(new Date(t).getUTCFullYear());
+}
+/** Rough label width in px at the 11px scale size, for the fit checks. */
+export const labelPx = (text) => text.length * 5.8 + 4;
+/**
+ * Tick labels and grid lines for a track `width` px wide. The label unit is
+ * the first of (unit, 1) and (unit, 2) steps, from viewMode's unit upward,
+ * whose labels sit at least `minGap` px apart (44 wide, 64 narrow) with no
+ * label dropped for crowding, so spacing stays even. Labels sit left aligned
+ * on their tick; one that would cross the track end is right-aligned on it
+ * if that clears the previous label, else dropped. At most `maxLabels`.
+ * Lines: every base unit while `minLine` px apart (minor, default 6), plus
+ * the label unit's (major).
+ */
+export function scaleOf(r, viewMode, width, opts = {}) {
+    const minGap = opts.minGap ?? 44;
+    const max = opts.maxLabels ?? Infinity;
+    const w = Math.max(width, 1);
+    const span = r.max - r.min;
+    const pxPerMs = w / span;
+    const base = baseUnit(viewMode, span);
+    const crossesYear = new Date(r.min).getUTCFullYear() !== new Date(r.max).getUTCFullYear();
+    const steps = [];
+    for (let i = LADDER.indexOf(base); i < LADDER.length; i++)
+        steps.push([LADDER[i], 1], [LADDER[i], 2]);
+    const yearPx = APPROX.year * pxPerMs;
+    for (let k = 3; k <= 1000 && yearPx * (k - 1) < minGap * 2; k++)
+        steps.push(['year', k]);
+    let pick;
+    for (const [unit, k] of steps) {
+        if (APPROX[unit] * k * pxPerMs < minGap)
+            continue;
+        const out = labelsFor(r, unit, k, w, minGap, crossesYear);
+        pick = { labels: out.labels, unit, k };
+        if (!out.crowded && out.labels.length <= max)
+            break;
+    }
+    pick ??= { labels: [], unit: 'year', k: 1 };
+    const labels = pick.labels.length > max ? pick.labels.filter((_, i) => i % Math.ceil(pick.labels.length / max) === 0) : pick.labels;
+    const major = boundaries(r, pick.unit, pick.k).map((t) => frac(t, r));
+    const minor = APPROX[base] * pxPerMs >= (opts.minLine ?? 6) ? boundaries(r, base).map((t) => frac(t, r)) : [];
+    const seen = new Set(major.map((x) => x.toFixed(6)));
+    const lines = [
+        ...major.map((x) => ({ x, major: true })),
+        ...minor.filter((x) => !seen.has(x.toFixed(6))).map((x) => ({ x, major: false }))
+    ];
+    return { labels, lines, unit: pick.unit, minorPx: APPROX[base] * pxPerMs };
+}
+function labelsFor(r, unit, k, w, minGap, crossesYear) {
+    const labels = [];
+    let crowded = false;
+    let lastEnd = -Infinity;
+    let lastYear = NaN;
+    for (const t of boundaries(r, unit, k)) {
+        const year = new Date(t).getUTCFullYear();
+        const text = tickText(t, unit, crossesYear, year !== lastYear && labels.length > 0);
+        const x = frac(t, r);
+        const px = x * w;
+        const lw = labelPx(text);
+        // Past the track end a label flips to end on its tick, or is dropped.
+        const end = px + lw > w;
+        const prev = labels.length ? labels[labels.length - 1].x * w : -Infinity;
+        if (end) {
+            if (px - lw >= Math.max(lastEnd + 8, 0) && px - prev >= minGap)
+                labels.push({ x, text, end });
+            continue;
+        }
+        if (px < lastEnd || px - prev < minGap) {
+            crowded = true;
+            continue;
+        }
+        labels.push({ x, text });
+        lastEnd = px + lw + 8;
+        lastYear = year;
+    }
+    return { labels, crowded };
+}
+/**
+ * How the Today label sits on its own lane under the ticks: centred on its
+ * line, or `start`/`end` when centring would cross a track edge. It never
+ * shares a baseline with tick labels, so no tick ever gives way to it.
+ */
+export function todayAlign(today, w) {
+    const tw = labelPx('Today');
+    const px = today * w;
+    return px - tw / 2 < 0 ? 'start' : px + tw / 2 > w ? 'end' : 'center';
+}
+/**
+ * "May 10 – 24", "May 10 – Jun 2", "Dec 7, 2026 – Jan 4, 2027"; one day reads
+ * "May 24"; a span of 90+ days across years drops the days, "Mar 2025 – Feb 2028".
+ */
+export function rowDates(a, b) {
+    const da = new Date(a);
+    const db = new Date(b);
+    if (Math.floor(a / DAY) === Math.floor(b / DAY))
+        return day(a);
+    if (da.getUTCFullYear() !== db.getUTCFullYear()) {
+        if (b - a < 90 * DAY)
+            return `${day(a, true)} – ${day(b, true)}`;
+        const my = (t) => fmt(t, { month: 'short', year: 'numeric' });
+        return `${my(a)} – ${my(b)}`;
+    }
+    if (da.getUTCMonth() === db.getUTCMonth())
+        return `${day(a)} – ${db.getUTCDate()}`;
+    return `${day(a)} – ${day(b)}`;
+}
+/** "May 3 – May 31, 2026" or "Mar 1, 2025 – Feb 29, 2028". */
+export function spanText(a, b) {
+    if (Math.floor(a / DAY) === Math.floor(b / DAY))
+        return day(a, true);
+    const sameYear = new Date(a).getUTCFullYear() === new Date(b).getUTCFullYear();
+    return `${day(a, !sameYear)} – ${day(b, true)}`;
+}
+export function percentText(p) {
+    return p === undefined ? '' : p >= 100 ? 'Done' : `${Math.round(p)}%`;
+}
+/** "Development, May 10 to May 24, 60 percent done, after Design". */
+export function rowLabel(r, rows) {
+    const parts = [r.name];
+    if (r.start === undefined || r.end === undefined)
+        parts.push('no dates');
+    else if (r.milestone)
+        parts.push(`${day(r.start, true)}, milestone`);
+    else
+        parts.push(`${day(r.start, true)} to ${day(r.end, true)}`);
+    if (r.progress !== undefined)
+        parts.push(r.progress >= 100 ? 'done' : `${Math.round(r.progress)} percent done`);
+    if (r.deps.length)
+        parts.push(`after ${r.deps.map((d) => rows[d].name).join(' and ')}`);
+    return parts.join(', ');
+}
+/** Narrow meta part: "After Design" or "After Design +1", the name capped at 20 characters. */
+export function afterText(r, rows) {
+    if (!r.deps.length)
+        return '';
+    const name = rows[r.deps[0]].name;
+    const short = name.length > 20 ? `${name.slice(0, 19).trimEnd()}…` : name;
+    return `After ${short}${r.deps.length > 1 ? ` +${r.deps.length - 1}` : ''}`;
+}

package/dist/widgets/data/gauge-value.d.ts

@@ -0,0 +1,43 @@
+/** Drawn dial height over its diameter for the 240 degree arc (viewBox 100 x 78). */
+export declare const DIAL_RATIO = 0.78;
+export interface GaugeInput {
+    value?: unknown;
+    max?: unknown;
+    label?: unknown;
+    title?: unknown;
+    color?: unknown;
+    height?: unknown;
+    currency?: unknown;
+    unit?: unknown;
+}
+export interface GaugeView {
+    hasValue: boolean;
+    /** Parsed numbers; `value` is 0 when there is none (for aria-valuenow). */
+    value: number;
+    max: number;
+    mode: 'percent' | 'value';
+    /** Arc fill 0..1. */
+    fraction: number;
+    number: string;
+    /** Narrow-dial form, '' when it equals `number`. */
+    numberCompact: string;
+    /** "of 10,000", '' in percent mode or with no value. */
+    target: string;
+    targetCompact: string;
+    /** "· 30 over", dropped on narrow dials. */
+    over: string;
+    /** Wide-layout line: the share and what is left ("42.3% · 5,772 to go"), or "150% of 120" when over. */
+    meta: string;
+    title: string;
+    label: string;
+    name: string;
+    ariaText: string;
+    color: string | undefined;
+    /** Largest dial diameter in px the `height` cap allows. */
+    diameter: number;
+}
+/** A finite number from a number or a string with spaces, thousands commas and a trailing % or px. */
+export declare function parseNum(v: unknown): number | undefined;
+/** The one share rule: up to one decimal, 100 only at or over max, never 0 for a positive value. */
+export declare function percentText(value: number, max: number): string;
+export declare function gaugeView(p: GaugeInput): GaugeView;

package/dist/widgets/data/gauge-value.js

@@ -0,0 +1,118 @@
+// widgets/data/gauge-value.ts: every decision the gauge makes about its data,
+// pure and never throwing, so Gauge.svelte is template and CSS only.
+//
+// Props are model output: `value` may be "60%", "1,200", "lots" or missing,
+// `max` may be 0 or "250", `height` may be "200px", `color` may be hostile.
+// Every share the gauge prints goes through percentText: up to one decimal
+// ("72.8%", "75%"), 100% only when value >= max, never 0% for a positive value.
+// A percent scale (max 100 or 1, no currency or unit) prints that share; any
+// other gauge prints the real value and a target line ("of 10,000"), plus the
+// overshoot when over, and a wide-layout meta line with the share and what is
+// left to go. `currency` (ISO 4217, through money) or `unit` (a plain suffix)
+// is applied to every amount: value, target, over, to go and the spoken text.
+// Negatives print a true minus sign. A value that does not parse reads
+// "No value", never NaN.
+// Full and compact strings are both returned; the component's container
+// query picks one, so nothing clips.
+import { finite, money, num, plain } from '../data-kit/format.js';
+import { safeThemeColor } from '../../utils/safe-color.js';
+/** Drawn dial height over its diameter for the 240 degree arc (viewBox 100 x 78). */
+export const DIAL_RATIO = 0.78;
+const DIAL_MIN = 88;
+const DIAL_MAX = 220;
+/** Longest full number before the compact form is used at every size. */
+const FULL_MAX_CHARS = 11;
+/** A true minus sign (U+2212): a hyphen with tabular figures reads as "- 12". */
+const minus = (s) => s.replace(/^-/, '\u2212');
+/** A finite number from a number or a string with spaces, thousands commas and a trailing % or px. */
+export function parseNum(v) {
+    if (typeof v === 'string')
+        return finite(v.replace(/[\s,]/g, '').replace(/(%|px)$/i, ''));
+    return finite(v);
+}
+/** The one share rule: up to one decimal, 100 only at or over max, never 0 for a positive value. */
+export function percentText(value, max) {
+    let r = Math.round((value / max) * 1000) / 10 || 0;
+    if (value < max && r >= 100)
+        r = 99.9;
+    if (value > 0 && r <= 0)
+        return '<0.1%';
+    return `${minus(num(r, { digits: 1 }))}%`;
+}
+/** Full and compact amount formatters for a currency code or a unit suffix. */
+function amounts(currency, unit) {
+    const code = plain(currency);
+    const u = plain(unit);
+    const suffix = u && u !== '%' ? ` ${u}` : '';
+    if (code) {
+        return {
+            full: (n) => minus(money(n, code, { whole: true })),
+            compact: (n) => minus(money(n, code, { compact: true }))
+        };
+    }
+    return {
+        full: (n) => minus(num(n)) + suffix,
+        compact: (n) => minus(num(n, { compact: true })) + suffix
+    };
+}
+export function gaugeView(p) {
+    const v = parseNum(p.value);
+    const m = parseNum(p.max);
+    const max = m !== undefined && m > 0 ? m : 100;
+    const hasValue = v !== undefined;
+    const value = v ?? 0;
+    const fmt = amounts(p.currency, p.unit);
+    const scaled = plain(p.currency) !== '' || (plain(p.unit) !== '' && plain(p.unit) !== '%');
+    const mode = !scaled && (max === 100 || max === 1) ? 'percent' : 'value';
+    const fraction = hasValue ? Math.min(1, Math.max(0, value / max)) : 0;
+    const title = plain(p.title);
+    const label = plain(p.label);
+    const name = label || title || 'Gauge';
+    let number = 'No value';
+    let numberCompact = '';
+    let target = '';
+    let targetCompact = '';
+    let over = '';
+    let meta = '';
+    let spoken = 'No value';
+    if (hasValue && mode === 'percent') {
+        number = percentText(value, max);
+        spoken = number.replace('<', 'less than ').replace('%', ' percent');
+    }
+    else if (hasValue) {
+        const full = fmt.full(value);
+        const compact = fmt.compact(value);
+        number = full.length > FULL_MAX_CHARS ? compact : full;
+        numberCompact = compact !== number ? compact : '';
+        target = `of ${fmt.full(max)}`;
+        const tc = `of ${fmt.compact(max)}`;
+        targetCompact = tc !== target ? tc : '';
+        const extra = value > max ? fmt.full(value - max) : '';
+        over = extra ? `· ${extra} over` : '';
+        const pct = percentText(value, max);
+        meta = value < max ? `${pct} · ${fmt.full(max - value)} to go` : `${pct} ${target}`;
+        spoken = `${full} ${target}${extra ? `, ${extra} over` : ''}`;
+    }
+    const h = parseNum(p.height);
+    const cap = h !== undefined && h > 0 ? h : 200;
+    const diameter = Math.round(Math.min(DIAL_MAX, Math.max(DIAL_MIN, cap / DIAL_RATIO)));
+    return {
+        hasValue,
+        value,
+        max,
+        mode,
+        fraction,
+        number,
+        numberCompact,
+        target,
+        targetCompact,
+        over,
+        meta,
+        title,
+        label,
+        name,
+        ariaText: name === 'Gauge' ? spoken : `${spoken}, ${name}`,
+        color: safeThemeColor(p.color),
+        diameter
+    };
+}

package/dist/widgets/data/heatmap-scale.d.ts

@@ -0,0 +1,97 @@
+export declare const HEAT: readonly [32, 48, 64, 79, 94];
+export declare const HEAT_DARK: readonly [28, 46, 62, 78, 94];
+/** HEAT indexes used by the three diverging classes on each arm. */
+export declare const DIV_STEPS: readonly [0, 2, 4];
+/** Minimum x label pitch in px. */
+export declare const PITCH = 28;
+/** Widest x label box before a label ellipsizes instead of thinning further. */
+export declare const WIDE = 120;
+/** Footnote line height in px (theme.css --lh-footnote). */
+export declare const LINE = 13;
+/** Least row height that holds an in-cell value: one footnote line, 4px above and below. */
+export declare const VALUE_H: number;
+export declare const DEFAULT_HEIGHT = 280;
+export type Measure = (text: string) => number;
+export type Grid = {
+    xs: string[];
+    ys: string[];
+    values: (number | undefined)[][];
+    skipped: number;
+};
+export type Tone = {
+    arm: 'zero' | 'accent' | 'warm';
+    step: number;
+};
+export type Scale = {
+    mode: 'seq' | 'div';
+    tone: (v: number) => Tone;
+    /** Legend swatches left to right, `mark` labels one under its swatch. */
+    swatches: (Tone & {
+        mark?: string;
+    })[];
+    low: string;
+    high: string;
+};
+export type Spot = {
+    r: number;
+    c: number;
+    v: number;
+};
+export declare function sanitize(cells: unknown, xLabels?: unknown, yLabels?: unknown): Grid;
+/** Every finite value with its position, in reading order. */
+export declare function spots(g: Grid): Spot[];
+/** Lowest and highest value; ties go to the first in reading order. */
+export declare function extremes(g: Grid): {
+    lo: Spot;
+    hi: Spot;
+} | undefined;
+/** A display figure with a true minus sign (U+2212) in place of the hyphen. */
+export declare const minus: (s: string) => string;
+/** Whether figures under 10 print a fixed 2 decimals: some value there is a fraction. */
+export declare function fixed2(g: Grid): boolean;
+/**
+ * Display figures: 2 decimals under 10 (in cells fixed with `fixed`, so a
+ * column of 0.30 and 1.00 lines up), 1 above, compact past 9,999, true minus.
+ * Legend ends and the readout pass no `fixed`, so an integer reads 1.
+ */
+export declare function fmt(v: number, fixed?: boolean): string;
+/** Full precision with a hyphen, for the hidden table; the readout wraps it in `minus`. */
+export declare function full(v: number): string;
+export declare function scale(g: Grid): Scale | undefined;
+/** `height` as a max body height: a number or "<n>px", clamped to [120, 640]. */
+export declare function maxHeight(v: unknown): number;
+/** Preferred cell height: square under 12px (4px floor), else [12, 44]; 28px with values (fitHeight may shrink it to VALUE_H). */
+export declare function cellHeight(colW: number, withValues?: boolean): number;
+/** 2px gaps, 1px once columns are under 10px wide. */
+export declare const gapFor: (colW: number) => 1 | 2;
+export type XLabel = {
+    i: number;
+    w: number;
+    dx: number;
+};
+/**
+ * Which x labels show and where. Every Nth from the first, N the smallest that
+ * gives a PITCH px pitch, then grown (while two labels remain) until every shown
+ * label fits its N columns whole or the box reaches WIDE px. Each label box is
+ * `w` px wide, centred on its column (`dx` from that column's left edge), held
+ * inside the grid (`lead` px of y label column to the left) and 6px clear of
+ * the label before it. N also grows while that squeezes a label; past the
+ * limits a squeezed box ellipsizes. Unmeasured (colW 0): every label, laid out
+ * by CSS.
+ */
+export declare function thin(labels: string[], colW: number, measure?: Measure, lead?: number): XLabel[];
+/**
+ * Rows shrink toward a floor (VALUE_H with values, else 12px or the cell width)
+ * so the grid fits `room` px under the label row before the body scrolls.
+ */
+export declare function fitHeight(h: number, withValues: boolean, rows: number, gap: number, room: number): number;
+/** Whether `rows` fit `room` px at the VALUE_H in-cell value floor; if not, values drop so rows can shrink. */
+export declare function valueRowsFit(rows: number, gap: number, room: number): boolean;
+/** Y labels show every Nth row once the row pitch is under a label line, so N rows hold one line. */
+export declare function rowStep(cellH: number, gap: number): number;
+/**
+ * Whether in-cell values draw: `show` false never, true or auto when every
+ * value fits its cell with 4px padding (auto also needs 40px by 28px cells).
+ * All or nothing: one value that does not fit means none draw.
+ */
+export declare function valuesFit(g: Grid, colW: number, show: unknown, measure?: Measure): boolean;