wiki-formant 0.34.0 → 0.36.0

package/README.md

@@ -724,19 +724,48 @@ 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} />;
 ```
 
 `PasskeyButton` (`wiki-formant/passkey-button`) is the browser half and has its
 own subpath, because it imports the optional peer `@simplewebauthn/browser`.
-`Stats` (`wiki-formant/react-server`) renders a `digest` as one page: the
+`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. It ships no JavaScript.
+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" />
+```
+
+`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 and bars. 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,23 +206,6 @@ pre:hover > .code-copy-btn,
   margin: 0;
 }
 .stats-figures dd { margin: 0; font-variant-numeric: tabular-nums; }
-.stats-chart {
-  display: flex;
-  align-items: flex-end;
-  /* A year's bars on a phone would be all gap at 2px each. */
-  gap: min(2px, 100% / var(--bars, 1) / 4);
-  height: 8rem;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.stats-chart li {
-  flex: 1;
-  height: calc(var(--share) * 100%);
-  min-height: 1px;
-  background: currentColor;
-  opacity: 0.4;
-}
 .stats-lists {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));

package/dist/chart.d.ts

@@ -0,0 +1,52 @@
+/** One value at a time in Unix seconds, UTC. */
+export type ChartPoint = {
+    time: number;
+    value: 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; a count takes the mean of its days, so the week in progress does not
+ * read as a collapse.
+ */
+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;
+    /** In pixels. Otherwise the stylesheet's `--chart-height`, else 15rem. */
+    height?: number;
+    className?: string;
+}
+/**
+ * A time series with its range and step 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, height, className, }: TimeChartProps): import("react").JSX.Element;

package/dist/chart.js

@@ -0,0 +1,194 @@
+'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.
+// `lightweight-charts` is loaded on mount, so the page paints without it. Every
+// colour is the canvas box's own `color`, and its axis `--chart-axis` 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; a count takes the mean of its days, so the week in progress does not
+ * read as a collapse.
+ */
+export function bucketChart(points, step, aggregate) {
+    const out = [];
+    for (const { time, value } of points) {
+        const start = bucketStart(time, step);
+        const last = out.at(-1);
+        if (last?.time !== start)
+            out.push({ time: start, value, n: 1 });
+        else if (aggregate === 'last')
+            last.value = value;
+        else
+            last.value += (value - last.value) / ++last.n;
+    }
+    return out.map(({ time, value }) => ({ time, value }));
+}
+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 and step 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, 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 [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, ColorType, CrosshairMode, LineStyle, LineType }) => {
+            if (disposed)
+                return;
+            const style = getComputedStyle(el);
+            const axis = style.getPropertyValue('--chart-axis').trim();
+            const ink = rgba(style.color);
+            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: { type: 'custom', formatter: (n) => formatRef.current(n), minMove: 1e-12 },
+                ...(fromZero && { autoscaleInfoProvider: fromZeroScale }),
+            });
+            // 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());
+            chart.current = { api, area };
+            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);
+        if (resolution !== 'day' || !windowed.length)
+            return { shown: windowed, steps: [], step: null };
+        const { steps, fallback } = chartSteps(end - windowed[0].time);
+        const chosen = step && steps.includes(step) ? step : fallback;
+        return { shown: chosen === 'day' ? windowed : bucketChart(windowed, chosen, aggregate), steps, step: 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(() => {
+        if (!ready || !chart.current || !source)
+            return;
+        chart.current.api.applyOptions({ timeScale: { timeVisible: source.resolution !== 'day' } });
+        chart.current.area.setData((view?.shown ?? []).map(p => ({ time: p.time, value: p.value })));
+        chart.current.api.timeScale().fitContent();
+    }, [ready, source, view]);
+    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)) && (_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))) }))] }))] }));
+}

package/dist/react-server.d.ts

@@ -1,7 +1,6 @@
 import type { ComponentType, ReactNode } from 'react';
 import type { Control, FacetControlGroup, MetadataRow } from './taxonomy.js';
 import type { HistoryChange } from './history.js';
-import type { Digest } from './analytics.js';
 /**
  * The shape a router's link component has to satisfy here.
  *
@@ -268,22 +267,3 @@ export interface RevisionChangesProps {
  * are the importing stylesheet's.
  */
 export declare function RevisionChanges({ changes, label }: RevisionChangesProps): import("react").JSX.Element | null;
-export interface StatsProps {
-    /** One window's figures, from `digest` in `wiki-formant/analytics`. */
-    digest: Digest;
-    /** The window the digest covers, in days. */
-    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];
-/** 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;
-/**
- * A site's own analytics on one page: the headline figures against the window
- * before, visitors per day, and every ranked list the digest carries. Lists
- * with nothing in them are left out. Bars are `currentColor` until the
- * importing stylesheet gives them a colour.
- */
-export declare function Stats({ digest: d, days, ranges }: StatsProps): import("react").JSX.Element;

package/dist/react-server.js

@@ -225,58 +225,3 @@ export function RevisionChanges({ changes, label = type => type }) {
         return null;
     return (_jsx("ul", { className: "revision-changes", children: changes.map((c, i) => (_jsxs("li", { className: "revision-change", "data-action": c.action, children: [_jsx("span", { className: "revision-change-action", children: ACTION_LABEL[c.action] }), ` – ${label(c.type)} at ${blockLocation(c.path)}`, c.leafDiff && (_jsx("p", { className: "revision-diff", children: c.leafDiff.map(([op, text], j) => op === -1 ? _jsx("del", { children: text }, j) : op === 1 ? _jsx("ins", { children: text }, j) : _jsx("span", { children: text }, j)) }))] }, i))) }));
 }
-/** The windows the stats page offers, in days. */
-export const STATS_RANGES = [1, 7, 30, 90, 365];
-/** 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;
-const count = (n) => n.toLocaleString('en');
-const regions = new Intl.DisplayNames(['en'], { type: 'region' });
-const country = (code) => {
-    try {
-        return regions.of(code) ?? code;
-    }
-    catch {
-        return code;
-    }
-};
-const duration = (s) => (s < 60 ? `${s}s` : `${Math.floor(s / 60)}m ${s % 60}s`);
-/** Unsigned at zero, so no change never reads as growth. */
-const change = (now, before) => {
-    if (!before)
-        return null;
-    const pct = Math.round((100 * (now - before)) / before);
-    return pct > 0 ? `+${pct}%` : `${pct}%`;
-};
-function StatsList({ title, rows, label = v => v }) {
-    if (!rows.length)
-        return null;
-    const max = Math.max(...rows.map(([, n]) => n));
-    return (_jsxs("section", { className: "stats-list", children: [_jsx("h2", { children: title }), _jsx("ol", { children: rows.map(([v, n]) => (_jsxs("li", { style: { '--share': n / max }, children: [_jsx("span", { children: label(v) }), _jsx("span", { className: "stats-count", children: count(n) })] }, v))) })] }));
-}
-/**
- * A site's own analytics on one page: the headline figures against the window
- * before, visitors per day, and every ranked list the digest carries. Lists
- * with nothing in them are left out. Bars are `currentColor` until the
- * importing stylesheet gives them a colour.
- */
-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];
-    });
-    const peak = Math.max(1, ...series.map(([, n]) => n));
-    const figures = [
-        ['Visitors', count(d.visitors), change(d.visitors, d.previous_visitors)],
-        ['Page views', count(d.pageviews), null],
-        ['Bounce rate', d.bounce_rate == null ? '–' : `${d.bounce_rate}%`, null],
-        ['Visit length', d.visit_duration == null ? '–' : duration(d.visit_duration), null],
-        ['With agents', count(d.visitors_incl_agents), null],
-    ];
-    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("ol", { className: "stats-chart", "aria-label": "Visitors per day", style: { '--bars': series.length }, children: series.map(([date, n]) => (_jsx("li", { title: `${date}: ${count(n)}`, style: { '--share': n / peak } }, date))) }), _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/dist/stats.d.ts

@@ -0,0 +1,20 @@
+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; `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; `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;
+/**
+ * A site's own analytics on one page: the headline figures against the window
+ * before, visitors per day, and every ranked list the digest carries. Lists
+ * with nothing in them are left out. The chart and the bars are
+ * `currentColor` until the importing stylesheet gives them a colour.
+ */
+export declare function Stats({ digest: d, days, ranges }: StatsProps): import("react").JSX.Element;

package/dist/stats.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 => daysParam(n) === param) ?? fallback;
+const count = (n) => n.toLocaleString('en');
+const regions = new Intl.DisplayNames(['en'], { type: 'region' });
+const country = (code) => {
+    try {
+        return regions.of(code) ?? code;
+    }
+    catch {
+        return code;
+    }
+};
+const duration = (s) => (s < 60 ? `${s}s` : `${Math.floor(s / 60)}m ${s % 60}s`);
+/** Unsigned at zero, so no change never reads as growth. */
+const change = (now, before) => {
+    if (!before)
+        return null;
+    const pct = Math.round((100 * (now - before)) / before);
+    return pct > 0 ? `+${pct}%` : `${pct}%`;
+};
+function StatsList({ title, rows, label = v => v }) {
+    if (!rows.length)
+        return null;
+    const max = Math.max(...rows.map(([, n]) => n));
+    return (_jsxs("section", { className: "stats-list", children: [_jsx("h2", { children: title }), _jsx("ol", { children: rows.map(([v, n]) => (_jsxs("li", { style: { '--share': n / max }, children: [_jsx("span", { children: label(v) }), _jsx("span", { className: "stats-count", children: count(n) })] }, v))) })] }));
+}
+/**
+ * A site's own analytics on one page: the headline figures against the window
+ * before, visitors per day, and every ranked list the digest carries. Lists
+ * with nothing in them are left out. The chart and the bars are
+ * `currentColor` until the importing stylesheet gives them a colour.
+ */
+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. 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)],
+        ['Page views', count(d.pageviews), null],
+        ['Bounce rate', d.bounce_rate == null ? '–' : `${d.bounce_rate}%`, null],
+        ['Visit length', d.visit_duration == null ? '–' : duration(d.visit_duration), null],
+        ['With agents', count(d.visitors_incl_agents), null],
+    ];
+    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=${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.34.0",
+  "version": "0.36.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",
@@ -172,6 +172,16 @@
       "import": "./dist/react-server.js",
       "default": "./dist/react-server.js"
     },
+    "./stats": {
+      "types": "./dist/stats.d.ts",
+      "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",
@@ -266,11 +276,14 @@
     "@types/sanitize-html": "^2.16.1",
     "fast-diff": "^1.3.0",
     "jsdom": "^30.1.0",
+    "lightweight-charts": "^5.2.1",
     "react": "^19.2.4",
     "sanitize-html": "^2.17.7",
     "typescript": "^5.9.0"
   },
   "peerDependencies": {
+    "@simplewebauthn/browser": ">=13",
+    "@simplewebauthn/server": ">=13",
     "@tiptap/core": ">=2.10",
     "@tiptap/extension-code-block": ">=2.10",
     "@tiptap/extension-image": ">=2.10",
@@ -288,8 +301,7 @@
     "pg": ">=8",
     "react": ">=18",
     "sanitize-html": ">=2",
-    "@simplewebauthn/server": ">=13",
-    "@simplewebauthn/browser": ">=13"
+    "lightweight-charts": ">=5"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -348,6 +360,9 @@
     },
     "@simplewebauthn/browser": {
       "optional": true
+    },
+    "lightweight-charts": {
+      "optional": true
     }
   }
 }