wiki-formant 0.35.0 → 0.37.0

package/README.md

@@ -724,7 +724,7 @@ export const POST = gate.route;
 // src/app/stats/page.tsx
 if (!(await gate.signedIn((await cookies()).get(gate.cookie)?.value)))
   return <PasskeyButton endpoint="/api/passkey" invite={invite} create={await gate.open()} />;
-const days = statsDays((await searchParams).days); // 1, 7, 30, 90 or 365, else 30
+const days = statsDays((await searchParams).days); // 1, 7, 30, 90, 365 or Infinity (?days=all), else 30
 return <Stats digest={await digest(sql, { days })} days={days} />;
 ```
 
@@ -732,14 +732,47 @@ return <Stats digest={await digest(sql, { days })} days={days} />;
 own subpath, because it imports the optional peer `@simplewebauthn/browser`.
 `Stats` (`wiki-formant/stats`) renders a `digest` as one page: the
 headline figures against the window before, visitors per day, every non-empty
-ranked list, and `?days=` links between windows. Everything but the daily chart
-is server-rendered. The chart is a `lightweight-charts` area series with a date
-axis and a count axis from zero, drawn in the box's own `color`, so
-`lightweight-charts` is an optional peer that a stats page needs installed.
+ranked list, and `?days=` links between windows, all time among them. Everything
+but the daily chart is server-rendered. The chart is `TimeChart` with a count
+axis from zero, so `lightweight-charts` is an optional peer that a stats page
+needs installed.
+
+## Charts
+
+`TimeChart` (`wiki-formant/chart`) is every time-series chart on the four sites:
+token prices, ledger activity, a caper's price, visitors per day. One area
+series in the box's own `color`, its axis in `--chart-axis` if set, with range
+buttons — 24H, 7D, 30D, 90D, 1Y, All — and, on a range long enough, a day, week
+or month step. A step is offered once it makes four points, and the default is
+the finest that makes 200 or fewer, so a year opens weekly and five years
+monthly.
+
+```tsx
+// Daily points: the chart slices and steps them itself; 30D up.
+<TimeChart series={days} label="Transactions" aggregate="mean" fromZero />
+
+// A loader: asked for 'hour' (24H), '4h' (7D) or 'day' from 0 (every longer
+// range), once each.
+<TimeChart series={load} label="Price" format={formatPrice} range="30d" candles />
+```
+
+A price point may carry `open`, `high` and `low` (its `value` is the close)
+and `volume`. Points that carry the candle get a Line/Candles toggle, opening on
+candles with `candles`; points that carry volume get a volume pane under the
+price, a fifth of the height. Candles take `--chart-up` and `--chart-down` from
+the canvas box, else its `color`. A week of candles opens on its first, closes
+on its last, spans the highest high and lowest low, and sums its volume.
+
+`aggregate` is how a week or month is made from its days: `last` for a price,
+`mean` for a count, so the week in progress keeps its level instead of reading
+as a collapse. A single range draws no range buttons and shows every point.
+`bucketChart` and `chartSteps` are exported for a chart drawn elsewhere.
+`base.css` pins the buttons (`.chart-controls button[aria-pressed]`) to the
+canvas's top-left corner; the site's stylesheet gives them and the box a look.
 
 ## Base stylesheet
 
-`wiki-formant/base.css` is the layout the package's markup does not work without, and nothing else: columns that stack until there is room, stored tab panels that show one at a time, a copy button pinned to its block's corner and visible on focus and on touch, a table's scroll box, the breadcrumb row, the `aria-sort` arrow as a mask over `currentColor`, and the stats page's grid, bars and chart height. It also carries the shape and motion of the primitives every site re-implemented and forked — `.spinner` (a `currentColor` ring sized by `--spinner-size`), `.skeleton`'s pulse, `.empty-state`, the wrap rule for long tokens in inline `code` — and the reduced-motion guard none of them had. No colour and no scale, so a design system's own rules override it at equal specificity.
+`wiki-formant/base.css` is the layout the package's markup does not work without, and nothing else: columns that stack until there is room, stored tab panels that show one at a time, a copy button pinned to its block's corner and visible on focus and on touch, a table's scroll box, the breadcrumb row, the `aria-sort` arrow as a mask over `currentColor`, the stats page's grid and bars, and the chart's height and pinned buttons. It also carries the shape and motion of the primitives every site re-implemented and forked — `.spinner` (a `currentColor` ring sized by `--spinner-size`), `.skeleton`'s pulse, `.empty-state`, the wrap rule for long tokens in inline `code` — and the reduced-motion guard none of them had. No colour and no scale, so a design system's own rules override it at equal specificity.
 
 ```css
 @import "wiki-formant/base.css" layer(components);

package/dist/analytics.d.ts

@@ -67,7 +67,7 @@ export interface Gap {
 export declare const SEARCH_GAPS: Gap;
 export interface DigestOptions {
     site?: string;
-    /** How far back, in whole days from now. */
+    /** How far back, in whole days from now; `Infinity` for all time. */
     days: number;
     /** The site's own X handle: `follow_clicks` counts clicks on links to it. */
     handle?: string;

package/dist/analytics.js

@@ -196,7 +196,8 @@ export const SEARCH_GAPS = { event: 'Search Query', prop: 'q', where: { results:
  */
 export async function digest(sql, { site = '', days, handle, siblings = [], gaps = [SEARCH_GAPS], ownAgents = ['-mcp-test', 'radix-studio'] }) {
     // The window is the database's clock, which stamped the rows; the app's can run behind it.
-    const values = [site, Math.max(1, Math.round(days))];
+    // All time is a century: further back than any row, and still an int to Postgres.
+    const values = [site, Number.isFinite(days) ? Math.max(1, Math.round(days)) : 36_500];
     const $ = (v) => `$${values.push(v)}`;
     const list = (select, limit, order = '2 DESC, 1') => `(SELECT coalesce(json_agg(t), '[]') FROM (${select} ORDER BY ${order}${limit ? ` LIMIT ${limit}` : ''}) t)`;
     /** A ranked list from the views, plus the same breakdown from `ViewDay`. */

package/dist/base.css

@@ -170,6 +170,29 @@ pre:hover > .code-copy-btn,
 }
 .revision-diff { margin: 0.25em 0 0; }
 
+/* ---- Chart ----------------------------------------------------------------
+   `TimeChart`: the canvas, a loading or empty state over it, and the range and
+   step buttons pinned to its top-left corner. A site gives the buttons and the
+   box their look; pressed is all this marks. */
+.chart { position: relative; margin: 0; }
+/* Its own stacking context: the library's canvases stack themselves, and the buttons go over them. */
+.chart-canvas { position: relative; z-index: 0; height: var(--chart-height, 15rem); }
+/* The chart lays itself out in a <table>; a site's table styles are not for it. */
+.chart-canvas :is(table, tr, td) { background: none; border: 0; border-radius: 0; }
+.chart-status { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; }
+.chart-controls {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+  z-index: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.chart-controls > div { display: flex; gap: 2px; }
+.chart-controls button { font: inherit; color: inherit; background: none; cursor: pointer; opacity: 0.6; }
+.chart-controls button[aria-pressed='true'] { opacity: 1; }
+
 /* ---- Stats ----------------------------------------------------------------
    `--share` is a row's value over the largest in its list, 0 to 1. Bars take
    `currentColor` so they show before a stylesheet colours them. */
@@ -183,9 +206,6 @@ pre:hover > .code-copy-btn,
   margin: 0;
 }
 .stats-figures dd { margin: 0; font-variant-numeric: tabular-nums; }
-.stats-chart { height: 15rem; }
-/* The chart lays itself out in a <table>; a site's table styles are not for it. */
-.stats-chart :is(table, tr, td) { background: none; border: 0; border-radius: 0; }
 .stats-lists {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));

package/dist/chart.d.ts

@@ -0,0 +1,62 @@
+/**
+ * One value at a time in Unix seconds, UTC. A price may carry the rest of its
+ * candle, `value` being the close, and the volume traded in it.
+ */
+export type ChartPoint = {
+    time: number;
+    value: number;
+    open?: number;
+    high?: number;
+    low?: number;
+    volume?: number;
+};
+export type ChartRange = '24h' | '7d' | '30d' | '90d' | '1y' | 'all';
+/** What a loader is asked for: hours for 24H, four hours for 7D, days for every longer range. */
+export type ChartResolution = 'hour' | '4h' | 'day';
+/** How a range of days is drawn: each day, or a point per week or month. */
+export type ChartStep = 'day' | 'week' | 'month';
+/** Points by resolution, from `from` (Unix seconds, 0 for all time), oldest first. */
+export type ChartLoader = (resolution: ChartResolution, from: number) => Promise<readonly ChartPoint[]>;
+/** Every range, shortest first. A chart fed daily points offers the ones from 30D up. */
+export declare const CHART_RANGES: readonly ChartRange[];
+/** A step is offered once it makes four points, and the default is the finest that makes 200 or fewer. */
+export declare function chartSteps(span: number): {
+    steps: ChartStep[];
+    fallback: ChartStep;
+};
+/**
+ * Points, oldest first, one per step. A price keeps the last value in each
+ * step, as a candle does its close: the first open, the highest high, the
+ * lowest low. A count takes the mean of its days, so the week in progress does
+ * not read as a collapse. Volume is summed.
+ */
+export declare function bucketChart(points: readonly ChartPoint[], step: ChartStep, aggregate: 'last' | 'mean'): ChartPoint[];
+/** Compact from a thousand up, four significant figures below. */
+export declare const formatChartValue: (n: number) => string;
+export interface TimeChartProps {
+    /** Daily points, oldest first, or a loader for every resolution the ranges need. */
+    series: readonly ChartPoint[] | ChartLoader;
+    /** Read by assistive technology, as the chart's name. */
+    label: string;
+    /** The ranges offered. A single one draws no buttons and shows every point. */
+    ranges?: readonly ChartRange[];
+    /** The range shown first. */
+    range?: ChartRange;
+    /** A week or month of prices keeps its last; of counts, the mean of its days. */
+    aggregate?: 'last' | 'mean';
+    /** The value axis starts at zero, so a quiet week does not read as a collapse. */
+    fromZero?: boolean;
+    /** The value axis and crosshair label. Read on every draw, so it need not be stable. */
+    format?: (n: number) => string;
+    /** Open on candles, where the points carry them. A Line/Candles toggle shows either way. */
+    candles?: boolean;
+    /** In pixels. Otherwise the stylesheet's `--chart-height`, else 15rem. */
+    height?: number;
+    className?: string;
+}
+/**
+ * A time series with its range, step and style buttons. The buttons are
+ * `.chart-controls button[aria-pressed]`, and a site's stylesheet gives them
+ * and the box their look; the line and fill are the canvas box's `color`.
+ */
+export declare function TimeChart({ series, label, ranges, range: initial, aggregate, fromZero, format, candles: initialCandles, height, className, }: TimeChartProps): import("react").JSX.Element;

package/dist/chart.js

@@ -0,0 +1,256 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// chart.tsx — one time series as an area chart: the token, activity and visitor
+// charts on every site. Ranges run from 24 hours to all time, and a long range
+// steps by day, week or month, so three years do not draw as a thousand points.
+// A price that carries its open, high and low can be drawn as candles, and one
+// that carries volume gets a volume pane under it. `lightweight-charts` is
+// loaded on mount, so the page paints without it. Every colour is the canvas
+// box's own `color`, its axis `--chart-axis`, and a candle `--chart-up` or
+// `--chart-down`, each if set.
+import { useEffect, useMemo, useRef, useState } from 'react';
+const DAY = 86_400;
+const RANGE = {
+    '24h': { label: '24H', span: DAY, resolution: 'hour' },
+    '7d': { label: '7D', span: 7 * DAY, resolution: '4h' },
+    '30d': { label: '30D', span: 30 * DAY, resolution: 'day' },
+    '90d': { label: '90D', span: 90 * DAY, resolution: 'day' },
+    '1y': { label: '1Y', span: 365 * DAY, resolution: 'day' },
+    all: { label: 'All', span: Infinity, resolution: 'day' },
+};
+const STEP = {
+    day: { label: 'D', span: DAY },
+    week: { label: 'W', span: 7 * DAY },
+    month: { label: 'M', span: 30.44 * DAY },
+};
+/** Every range, shortest first. A chart fed daily points offers the ones from 30D up. */
+export const CHART_RANGES = ['24h', '7d', '30d', '90d', '1y', 'all'];
+const DAILY_RANGES = ['30d', '90d', '1y', 'all'];
+/** A step is offered once it makes four points, and the default is the finest that makes 200 or fewer. */
+export function chartSteps(span) {
+    const steps = ['day', 'week', 'month'].filter(s => s === 'day' || span / STEP[s].span >= 4);
+    return { steps, fallback: steps.find(s => span / STEP[s].span <= 200) ?? steps.at(-1) };
+}
+/** The UTC day, Monday or first of the month a time falls in. */
+function bucketStart(time, step) {
+    const day = Math.floor(time / DAY);
+    if (step === 'day')
+        return day * DAY;
+    // 1 January 1970 was a Thursday, three days after a Monday.
+    if (step === 'week')
+        return (day - ((day + 3) % 7)) * DAY;
+    const d = new Date(time * 1000);
+    return Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), 1) / 1000;
+}
+/**
+ * Points, oldest first, one per step. A price keeps the last value in each
+ * step, as a candle does its close: the first open, the highest high, the
+ * lowest low. A count takes the mean of its days, so the week in progress does
+ * not read as a collapse. Volume is summed.
+ */
+export function bucketChart(points, step, aggregate) {
+    const out = [];
+    let n = 0;
+    for (const p of points) {
+        const start = bucketStart(p.time, step);
+        const last = out.at(-1);
+        if (last?.time !== start) {
+            out.push({ ...p, time: start });
+            n = 1;
+            continue;
+        }
+        if (aggregate === 'last')
+            last.value = p.value;
+        else
+            last.value += (p.value - last.value) / ++n;
+        if (last.high !== undefined && p.high !== undefined)
+            last.high = Math.max(last.high, p.high);
+        if (last.low !== undefined && p.low !== undefined)
+            last.low = Math.min(last.low, p.low);
+        if (p.volume !== undefined)
+            last.volume = (last.volume ?? 0) + p.volume;
+    }
+    return out;
+}
+const isCandle = (p) => p.open !== undefined && p.high !== undefined && p.low !== undefined;
+const compact = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 2 });
+const precise = new Intl.NumberFormat('en', { maximumSignificantDigits: 4 });
+/** Compact from a thousand up, four significant figures below. */
+export const formatChartValue = (n) => (Math.abs(n) >= 1e3 ? compact.format(n) : precise.format(n));
+/**
+ * A CSS colour at an opacity, as the rgba() the chart's parser reads. Drawn to
+ * a pixel and read back, because a site's colour may be oklch() or a named one.
+ */
+function rgba(colour, alpha = 1) {
+    const ctx = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+    if (!ctx)
+        return colour;
+    ctx.fillStyle = colour;
+    ctx.fillRect(0, 0, 1, 1);
+    return `rgba(${Array.from(ctx.getImageData(0, 0, 1, 1).data.slice(0, 3)).join(', ')}, ${alpha})`;
+}
+const fromZeroScale = (base) => {
+    const info = base();
+    if (info?.priceRange)
+        info.priceRange.minValue = 0;
+    return info;
+};
+/**
+ * A time series with its range, step and style buttons. The buttons are
+ * `.chart-controls button[aria-pressed]`, and a site's stylesheet gives them
+ * and the box their look; the line and fill are the canvas box's `color`.
+ */
+export function TimeChart({ series, label, ranges = typeof series === 'function' ? CHART_RANGES : DAILY_RANGES, range: initial = ranges.includes('30d') ? '30d' : ranges[0], aggregate = 'last', fromZero = false, format = formatChartValue, candles: initialCandles = false, height, className, }) {
+    const box = useRef(null);
+    const chart = useRef(null);
+    const formatRef = useRef(format);
+    formatRef.current = format;
+    const [ready, setReady] = useState(false);
+    const [range, setRange] = useState(initial);
+    const [step, setStep] = useState(null);
+    const [candles, setCandles] = useState(initialCandles);
+    const [loaded, setLoaded] = useState(null);
+    const resolution = RANGE[range].resolution;
+    useEffect(() => {
+        const el = box.current;
+        if (!el)
+            return;
+        let disposed = false;
+        import('lightweight-charts').then(({ createChart, AreaSeries, CandlestickSeries, HistogramSeries, ColorType, CrosshairMode, LineStyle, LineType }) => {
+            if (disposed)
+                return;
+            const style = getComputedStyle(el);
+            const axis = style.getPropertyValue('--chart-axis').trim();
+            const ink = rgba(style.color);
+            const up = rgba(style.getPropertyValue('--chart-up').trim() || style.color);
+            const down = rgba(style.getPropertyValue('--chart-down').trim() || style.color, style.getPropertyValue('--chart-down').trim() ? 1 : 0.45);
+            const priceFormat = { type: 'custom', formatter: (n) => formatRef.current(n), minMove: 1e-12 };
+            const guide = { color: rgba(style.color, 0.4), width: 1, style: LineStyle.Dotted, labelBackgroundColor: ink };
+            const api = createChart(el, {
+                autoSize: true,
+                layout: {
+                    background: { type: ColorType.Solid, color: 'transparent' },
+                    textColor: axis ? rgba(axis) : rgba(style.color, 0.7),
+                    fontFamily: style.fontFamily,
+                    fontSize: parseFloat(style.fontSize) || 11,
+                },
+                grid: { vertLines: { color: rgba(axis || style.color, 0.1) }, horzLines: { color: rgba(axis || style.color, 0.1) } },
+                crosshair: { mode: CrosshairMode.Magnet, vertLine: guide, horzLine: guide },
+                rightPriceScale: { borderVisible: false, scaleMargins: { top: 0.15, bottom: 0.1 } },
+                timeScale: { borderVisible: false, secondsVisible: false },
+                handleScroll: false,
+                handleScale: false,
+            });
+            const area = api.addSeries(AreaSeries, {
+                lineColor: ink,
+                topColor: rgba(style.color, 0.4),
+                bottomColor: rgba(style.color, 0.02),
+                lineWidth: 2,
+                lineType: LineType.Curved,
+                crosshairMarkerBackgroundColor: ink,
+                crosshairMarkerBorderColor: ink,
+                priceFormat,
+                ...(fromZero && { autoscaleInfoProvider: fromZeroScale }),
+            });
+            const candle = api.addSeries(CandlestickSeries, {
+                visible: false,
+                upColor: up,
+                downColor: down,
+                borderUpColor: up,
+                borderDownColor: down,
+                wickUpColor: up,
+                wickDownColor: down,
+                priceFormat,
+            });
+            // The chart cannot be scrolled or zoomed, so every size it takes shows every point,
+            // the first included: data drawn before autoSize has measured the box fits nothing.
+            api.timeScale().subscribeSizeChange(() => api.timeScale().fitContent());
+            // Volume takes a pane of its own under the price, a fifth of the height.
+            const addVolume = () => {
+                const volume = api.addSeries(HistogramSeries, { priceFormat: { type: 'volume' }, priceLineVisible: false, lastValueVisible: false }, 1);
+                api.panes()[0]?.setStretchFactor(4);
+                api.panes()[1]?.setStretchFactor(1);
+                return volume;
+            };
+            chart.current = { api, area, candle, volume: null, addVolume, up, down };
+            setReady(true);
+        });
+        return () => {
+            disposed = true;
+            chart.current?.api.remove();
+            chart.current = null;
+            setReady(false);
+        };
+    }, [fromZero]);
+    // One request per resolution for the life of the loader: every range from 30D up reads the same days.
+    const cache = useRef(new Map());
+    useEffect(() => {
+        cache.current.clear();
+    }, [series]);
+    useEffect(() => {
+        if (typeof series !== 'function')
+            return;
+        let current = true;
+        let request = cache.current.get(resolution);
+        if (!request) {
+            const now = Math.floor(Date.now() / 1000);
+            request = series(resolution, resolution === 'day' ? 0 : now - RANGE[range].span);
+            cache.current.set(resolution, request);
+            request.catch(() => cache.current.delete(resolution));
+        }
+        request.then(points => current && setLoaded({ resolution, points }), (e) => current && setLoaded({ resolution, error: e instanceof Error ? e.message : 'The chart could not load' }));
+        return () => {
+            current = false;
+        };
+    }, [series, resolution, range]);
+    const source = useMemo(() => (typeof series === 'function' ? (loaded?.resolution === resolution ? loaded : null) : { resolution: 'day', points: series }), [series, loaded, resolution]);
+    const points = source && 'points' in source ? source.points : null;
+    const view = useMemo(() => {
+        if (!points?.length)
+            return null;
+        const end = points.at(-1).time;
+        const span = RANGE[range].span;
+        const windowed = span === Infinity || ranges.length < 2 ? points : points.filter(p => p.time > Date.now() / 1000 - span);
+        const drawn = (shown, steps, step) => ({
+            shown,
+            steps,
+            step,
+            ohlc: aggregate === 'last' && shown.length > 0 && shown.every(isCandle),
+            volume: shown.some(p => p.volume !== undefined),
+        });
+        if (resolution !== 'day' || !windowed.length)
+            return drawn(windowed, [], null);
+        const { steps, fallback } = chartSteps(end - windowed[0].time);
+        const chosen = step && steps.includes(step) ? step : fallback;
+        return drawn(chosen === 'day' ? windowed : bucketChart(windowed, chosen, aggregate), steps, chosen);
+    }, [points, range, ranges.length, resolution, step, aggregate]);
+    // While a resolution loads, the last one stays under the skeleton; an empty or failed one clears it.
+    useEffect(() => {
+        const c = chart.current;
+        if (!ready || !c || !source)
+            return;
+        const shown = view?.shown ?? [];
+        const asCandles = candles && !!view?.ohlc;
+        const time = (p) => p.time;
+        c.api.applyOptions({ timeScale: { timeVisible: source.resolution !== 'day' } });
+        c.area.applyOptions({ visible: !asCandles });
+        c.candle.applyOptions({ visible: asCandles });
+        c.area.setData(asCandles ? [] : shown.map(p => ({ time: time(p), value: p.value })));
+        c.candle.setData(asCandles ? shown.map(p => ({ time: time(p), open: p.open, high: p.high, low: p.low, close: p.value })) : []);
+        if (view?.volume && !c.volume)
+            c.volume = c.addVolume();
+        else if (!view?.volume && c.volume) {
+            c.api.removeSeries(c.volume);
+            c.volume = null;
+            if (c.api.panes().length > 1)
+                c.api.removePane(1);
+        }
+        c.volume?.setData(shown.map((p, i) => {
+            const rising = p.value >= (p.open ?? shown[i - 1]?.value ?? p.value);
+            return { time: time(p), value: p.volume ?? 0, color: (rising ? c.up : c.down).replace(/[\d.]+\)$/, '0.5)') };
+        }));
+        c.api.timeScale().fitContent();
+    }, [ready, source, view, candles]);
+    const status = source && 'error' in source ? source.error : points && !view?.shown.length ? 'No data in this range' : null;
+    return (_jsxs("figure", { className: className ? `chart ${className}` : 'chart', children: [_jsx("div", { ref: box, className: "chart-canvas", role: "img", "aria-label": label, style: height ? { height } : undefined }), (!ready || (!points && !status)) && _jsx("div", { className: "chart-status skeleton", "aria-hidden": true }), status && _jsx("p", { className: "chart-status", children: status }), (ranges.length > 1 || (view && (view.steps.length > 1 || view.ohlc))) && (_jsxs("div", { className: "chart-controls", children: [ranges.length > 1 && (_jsx("div", { role: "group", "aria-label": "Range", children: ranges.map(r => (_jsx("button", { type: "button", "aria-pressed": r === range, onClick: () => { setRange(r); setStep(null); }, children: RANGE[r].label }, r))) })), view && view.steps.length > 1 && (_jsx("div", { role: "group", "aria-label": "Step", children: view.steps.map(s => (_jsx("button", { type: "button", "aria-pressed": s === view.step, onClick: () => setStep(s), title: `One point per ${s}`, children: STEP[s].label }, s))) })), view?.ohlc && (_jsxs("div", { role: "group", "aria-label": "Style", children: [_jsx("button", { type: "button", "aria-pressed": !candles, onClick: () => setCandles(false), children: "Line" }), _jsx("button", { type: "button", "aria-pressed": candles, onClick: () => setCandles(true), children: "Candles" })] }))] }))] }));
+}

package/dist/stats.d.ts

@@ -2,13 +2,13 @@ import type { Digest } from './analytics.js';
 export interface StatsProps {
     /** One window's figures, from `digest` in `wiki-formant/analytics`. */
     digest: Digest;
-    /** The window the digest covers, in days. */
+    /** The window the digest covers, in days; `Infinity` for all time. */
     days: number;
     /** The windows offered as `?days=` links on the same page. */
     ranges?: readonly number[];
 }
-/** The windows the stats page offers, in days. */
-export declare const STATS_RANGES: readonly [1, 7, 30, 90, 365];
+/** The windows the stats page offers, in days; `Infinity` is all time. */
+export declare const STATS_RANGES: readonly [1, 7, 30, 90, 365, number];
 /** A `?days=` value as one of `ranges`, else `fallback`: the page's only input. */
 export declare const statsDays: (param: unknown, ranges?: readonly number[], fallback?: number) => number;
 /**

package/dist/stats.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { StatsChart } from './stats-chart.js';
-/** The windows the stats page offers, in days. */
-export const STATS_RANGES = [1, 7, 30, 90, 365];
+import { TimeChart } from './chart.js';
+/** The windows the stats page offers, in days; `Infinity` is all time. */
+export const STATS_RANGES = [1, 7, 30, 90, 365, Infinity];
+/** A window as its `?days=` value. */
+const daysParam = (n) => (Number.isFinite(n) ? String(n) : 'all');
 /** A `?days=` value as one of `ranges`, else `fallback`: the page's only input. */
-export const statsDays = (param, ranges = STATS_RANGES, fallback = 30) => ranges.find(n => String(n) === param) ?? fallback;
+export const statsDays = (param, ranges = STATS_RANGES, fallback = 30) => ranges.find(n => daysParam(n) === param) ?? fallback;
 const count = (n) => n.toLocaleString('en');
 const regions = new Intl.DisplayNames(['en'], { type: 'region' });
 const country = (code) => {
@@ -36,11 +38,13 @@ function StatsList({ title, rows, label = v => v }) {
  */
 export function Stats({ digest: d, days, ranges = STATS_RANGES }) {
     const byDay = new Map(d.by_day.map(r => [r.date, r.visitors]));
-    // A rolling window of n days touches n + 1 UTC dates, the first of them in part.
-    const now = Date.now();
-    const series = Array.from({ length: days + 1 }, (_, i) => {
-        const date = new Date(now - (days - i) * 86_400_000).toISOString().slice(0, 10);
-        return [date, byDay.get(date) ?? 0];
+    // A rolling window of n days touches n + 1 UTC dates, the first of them in
+    // part. All time starts at the first day anything was counted.
+    const today = Math.floor(Date.now() / 86_400_000);
+    const first = Number.isFinite(days) ? today - days : Math.min(today, ...d.by_day.map(r => Date.parse(r.date) / 86_400_000));
+    const series = Array.from({ length: today - first + 1 }, (_, i) => {
+        const time = (first + i) * 86_400;
+        return { time, value: byDay.get(new Date(time * 1000).toISOString().slice(0, 10)) ?? 0 };
     });
     const figures = [
         ['Visitors', count(d.visitors), change(d.visitors, d.previous_visitors)],
@@ -52,5 +56,5 @@ export function Stats({ digest: d, days, ranges = STATS_RANGES }) {
     if (d.follow_clicks)
         figures.push(['Clicks to X', count(d.follow_clicks.events), null]);
     const rows = (list, k, m) => list.map(r => [r[k], r[m]]);
-    return (_jsxs("div", { className: "stats", children: [_jsx("nav", { className: "stats-ranges", "aria-label": "Window", children: ranges.map(n => (_jsx("a", { href: `?days=${n}`, "aria-current": n === days ? 'page' : undefined, children: n === 1 ? '24 hours' : `${n} days` }, n))) }), _jsx("dl", { className: "stats-figures", children: figures.map(([label, value, delta]) => (_jsxs("div", { children: [_jsx("dt", { children: label }), _jsxs("dd", { children: [value, delta && _jsx("small", { children: ` ${delta}` })] })] }, label))) }), _jsx(StatsChart, { series: series }), _jsxs("div", { className: "stats-lists", children: [_jsx(StatsList, { title: "Pages", rows: rows(d.top_pages, 'page', 'visitors') }), _jsx(StatsList, { title: "Entry pages", rows: rows(d.entry_pages, 'page', 'visitors') }), _jsx(StatsList, { title: "Sources", rows: rows(d.top_sources, 'source', 'visitors') }), _jsx(StatsList, { title: "From X posts", rows: rows(d.from_posts, 'page', 'visitors') }), _jsx(StatsList, { title: "Sibling sites", rows: rows(d.sibling_referrals, 'source', 'visitors') }), _jsx(StatsList, { title: "Countries", rows: rows(d.countries, 'country', 'visitors'), label: country }), _jsx(StatsList, { title: "Devices", rows: rows(d.devices, 'device', 'visitors') }), _jsx(StatsList, { title: "Agent tool calls", rows: rows(d.agent_tool_calls, 'tool', 'events') }), _jsx(StatsList, { title: "Searches that found nothing", rows: rows(d.gaps, 'query', 'events') })] })] }));
+    return (_jsxs("div", { className: "stats", children: [_jsx("nav", { className: "stats-ranges", "aria-label": "Window", children: ranges.map(n => (_jsx("a", { href: `?days=${daysParam(n)}`, "aria-current": n === days ? 'page' : undefined, children: n === 1 ? '24 hours' : Number.isFinite(n) ? `${n} days` : 'All time' }, n))) }), _jsx("dl", { className: "stats-figures", children: figures.map(([label, value, delta]) => (_jsxs("div", { children: [_jsx("dt", { children: label }), _jsxs("dd", { children: [value, delta && _jsx("small", { children: ` ${delta}` })] })] }, label))) }), _jsx(TimeChart, { series: series, label: "Visitors per day", ranges: ['all'], aggregate: "mean", fromZero: true, className: "stats-chart" }), _jsxs("div", { className: "stats-lists", children: [_jsx(StatsList, { title: "Pages", rows: rows(d.top_pages, 'page', 'visitors') }), _jsx(StatsList, { title: "Entry pages", rows: rows(d.entry_pages, 'page', 'visitors') }), _jsx(StatsList, { title: "Sources", rows: rows(d.top_sources, 'source', 'visitors') }), _jsx(StatsList, { title: "From X posts", rows: rows(d.from_posts, 'page', 'visitors') }), _jsx(StatsList, { title: "Sibling sites", rows: rows(d.sibling_referrals, 'source', 'visitors') }), _jsx(StatsList, { title: "Countries", rows: rows(d.countries, 'country', 'visitors'), label: country }), _jsx(StatsList, { title: "Devices", rows: rows(d.devices, 'device', 'visitors') }), _jsx(StatsList, { title: "Agent tool calls", rows: rows(d.agent_tool_calls, 'tool', 'events') }), _jsx(StatsList, { title: "Searches that found nothing", rows: rows(d.gaps, 'query', 'events') })] })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wiki-formant",
-  "version": "0.35.0",
+  "version": "0.37.0",
   "description": "The portable half of a wiki: derived taxonomy and facet controls, a version-negotiating MCP transport, markdown twins, block rendering, a rich-text editor engine, conditional-GET plumbing, and the headers and CSP every origin sends.",
   "type": "module",
   "license": "MIT",
@@ -177,6 +177,11 @@
       "import": "./dist/stats.js",
       "default": "./dist/stats.js"
     },
+    "./chart": {
+      "types": "./dist/chart.d.ts",
+      "import": "./dist/chart.js",
+      "default": "./dist/chart.js"
+    },
     "./dom": {
       "types": "./dist/dom.d.ts",
       "import": "./dist/dom.js",

package/dist/stats-chart.d.ts

@@ -1,4 +0,0 @@
-/** One `[YYYY-MM-DD, visitors]` per UTC day, oldest first. */
-export declare function StatsChart({ series }: {
-    series: readonly (readonly [string, number])[];
-}): import("react").JSX.Element;

package/dist/stats-chart.js

@@ -1,71 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-// stats-chart.tsx — visitors per day for `Stats`, with a date axis and a count
-// axis. `lightweight-charts` is loaded on mount, so the rest of the page paints
-// without it. Every colour is the box's own `color`, like the bars beside it.
-import { useEffect, useRef } from 'react';
-/**
- * A CSS colour at an opacity, as the rgba() the chart's parser reads. Drawn to
- * a pixel and read back, because a site's colour may be oklch() or a named one.
- */
-function rgba(colour, alpha = 1) {
-    const ctx = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
-    if (!ctx)
-        return colour;
-    ctx.fillStyle = colour;
-    ctx.fillRect(0, 0, 1, 1);
-    return `rgba(${Array.from(ctx.getImageData(0, 0, 1, 1).data.slice(0, 3)).join(', ')}, ${alpha})`;
-}
-/** Counts start at zero, so a quiet week does not read as a collapse. */
-const fromZero = (base) => {
-    const info = base();
-    if (info?.priceRange)
-        info.priceRange.minValue = 0;
-    return info;
-};
-/** One `[YYYY-MM-DD, visitors]` per UTC day, oldest first. */
-export function StatsChart({ series }) {
-    const ref = useRef(null);
-    useEffect(() => {
-        const box = ref.current;
-        if (!box)
-            return;
-        let chart;
-        let disposed = false;
-        import('lightweight-charts').then(({ createChart, AreaSeries, ColorType, CrosshairMode, LineStyle }) => {
-            if (disposed)
-                return;
-            const { color, fontFamily } = getComputedStyle(box);
-            const ink = rgba(color);
-            const guide = { color: rgba(color, 0.4), width: 1, style: LineStyle.Dotted };
-            chart = createChart(box, {
-                autoSize: true,
-                layout: { background: { type: ColorType.Solid, color: 'transparent' }, textColor: rgba(color, 0.7), fontFamily },
-                grid: { vertLines: { visible: false }, horzLines: { color: rgba(color, 0.1) } },
-                crosshair: { mode: CrosshairMode.Magnet, vertLine: guide, horzLine: guide },
-                rightPriceScale: { borderVisible: false },
-                timeScale: { borderVisible: false, fixLeftEdge: true, fixRightEdge: true },
-                handleScroll: false,
-                handleScale: false,
-            });
-            chart
-                .addSeries(AreaSeries, {
-                lineColor: ink,
-                topColor: rgba(color, 0.4),
-                bottomColor: rgba(color, 0.02),
-                lineWidth: 2,
-                crosshairMarkerBackgroundColor: ink,
-                priceLineVisible: false,
-                priceFormat: { type: 'price', precision: 0, minMove: 1 },
-                autoscaleInfoProvider: fromZero,
-            })
-                .setData(series.map(([time, value]) => ({ time, value })));
-            chart.timeScale().fitContent();
-        });
-        return () => {
-            disposed = true;
-            chart?.remove();
-        };
-    }, [series]);
-    return _jsx("div", { ref: ref, className: "stats-chart", role: "img", "aria-label": "Visitors per day" });
-}