wiki-formant 0.33.0 → 0.35.0

package/README.md

@@ -641,8 +641,10 @@ address and browser under a salt that is replaced every UTC day, and the old
 salt is deleted, so a visitor is told apart within a day and never followed
 into the next. Rows are kept 400 days. The package owns the SQL and the app
 owns the connection: `Sql` is one function that runs a statement with `$1, $2…`
-placeholders, and the three tables it needs are stated as Prisma models at the
-top of `src/analytics.ts`.
+placeholders, and the four tables it needs are stated as Prisma models at the
+top of `src/analytics.ts`. The fourth, `ViewDay`, holds days a site counted
+elsewhere before it counted its own; `digest` adds them to any window that
+reaches back that far, and a site with no such history leaves it empty.
 
 ```ts
 // src/lib/track.ts
@@ -722,19 +724,22 @@ 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 or 90, else 30
+const days = statsDays((await searchParams).days); // 1, 7, 30, 90 or 365, 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. 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.
 
 ## 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`, 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.
 
 ```css
 @import "wiki-formant/base.css" layer(components);

package/dist/analytics.d.ts

@@ -111,7 +111,8 @@ export interface Digest {
 /**
  * Everything a report needs about one site's last `days` days, in one query.
  * Visitor figures count distinct visitors, so a person who comes back on
- * another day counts once for each day.
+ * another day counts once for each day. Days in `ViewDay` add to the visitor,
+ * page, source, country, device and per-day figures; events have no history.
  */
 export declare function digest(sql: Sql, { site, days, handle, siblings, gaps, ownAgents }: DigestOptions): Promise<Digest>;
 /**

package/dist/analytics.js

@@ -14,7 +14,7 @@
 //
 // The package owns the SQL; the app owns the connection. `Sql` is one function
 // that runs a parameterised statement, which Prisma, `pg` and postgres.js can
-// all supply in a line. The app declares the three tables in its own schema,
+// all supply in a line. The app declares the four tables in its own schema,
 // so `prisma db push` keeps them:
 //
 //   model View {
@@ -45,6 +45,28 @@
 //     value String
 //   }
 //
+//   model ViewDay {
+//     siteId     String   @default("")
+//     day        DateTime @db.Date
+//     visitors   Int
+//     pageviews  Int
+//     visits     Int
+//     bounces    Int
+//     seconds    Int
+//     pages      Json     @default("{}")
+//     entryPages Json     @default("{}")
+//     sources    Json     @default("{}")
+//     countries  Json     @default("{}")
+//     devices    Json     @default("{}")
+//     @@id([siteId, day])
+//   }
+//
+// `ViewDay` holds days a site counted somewhere else before it counted its
+// own, one row a day with each breakdown as `{ value: visitors }`. Nothing
+// writes or deletes it: the app loads it once, and `digest` adds the days in a
+// window to the views. Summing days agrees with the views, whose visitor is
+// one browser on one day. A site with no history leaves it empty.
+//
 // `siteId` is "" in an app that serves one site. A multi-tenant app passes its
 // own site key to every call.
 //
@@ -169,13 +191,16 @@ export const SEARCH_GAPS = { event: 'Search Query', prop: 'q', where: { results:
 /**
  * Everything a report needs about one site's last `days` days, in one query.
  * Visitor figures count distinct visitors, so a person who comes back on
- * another day counts once for each day.
+ * another day counts once for each day. Days in `ViewDay` add to the visitor,
+ * page, source, country, device and per-day figures; events have no history.
  */
 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))];
     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`. */
+    const merged = (label, column, live) => `SELECT k AS ${label}, sum(n) AS visitors FROM (${live} UNION ALL SELECT key, value::int FROM a, jsonb_each_text(a."${column}")) t(k, n) GROUP BY 1`;
     const gapSelects = gaps.map(g => {
         const prop = $(g.prop);
         return `(SELECT props->>${prop} AS query, count(*) AS events FROM e
@@ -195,23 +220,41 @@ export async function digest(sql, { site = '', days, handle, siblings = [], gaps
       FROM numbered GROUP BY visitor, visit
     ), e AS (
       SELECT name, props, visitor FROM "Event" WHERE "siteId" = $1 AND "createdAt" >= now() - make_interval(days => $2::int)
+    ), a AS (
+      SELECT * FROM "ViewDay" WHERE "siteId" = $1 AND day >= (now() AT TIME ZONE 'UTC' - make_interval(days => $2::int))::date
+    ), sessions AS (
+      SELECT sum(bounces) AS bounces, sum(visits) AS visits, sum(seconds) AS seconds FROM (
+        SELECT count(*) FILTER (WHERE views = 1), count(*), coalesce(sum(seconds), 0) FROM visits
+        UNION ALL SELECT coalesce(sum(bounces), 0), coalesce(sum(visits), 0), coalesce(sum(seconds), 0) FROM a
+      ) s(bounces, visits, seconds)
+    ), src AS (
+      SELECT coalesce(source, '(none)') AS source, count(DISTINCT visitor) AS visitors FROM visits GROUP BY 1
+      UNION ALL SELECT key, value::int FROM a, jsonb_each_text(a.sources)
+    ), archived AS (
+      SELECT coalesce(sum(visitors), 0) AS visitors, coalesce(sum(pageviews), 0) AS pageviews FROM a
     )
     SELECT json_build_object(
-      'visitors', (SELECT count(DISTINCT visitor) FROM v),
-      'pageviews', (SELECT count(*) FROM v),
-      'bounce_rate', (SELECT round(100.0 * count(*) FILTER (WHERE views = 1) / nullif(count(*), 0)) FROM visits),
-      'visit_duration', (SELECT round(avg(seconds)) FROM visits),
-      'visitors_incl_agents', (SELECT count(DISTINCT visitor) FROM (SELECT visitor FROM v UNION SELECT visitor FROM e) a),
+      'visitors', (SELECT count(DISTINCT visitor) FROM v) + (SELECT visitors FROM archived),
+      'pageviews', (SELECT count(*) FROM v) + (SELECT pageviews FROM archived),
+      'bounce_rate', (SELECT round(100.0 * bounces / nullif(visits, 0)) FROM sessions),
+      'visit_duration', (SELECT round(seconds / nullif(visits, 0)) FROM sessions),
+      'visitors_incl_agents', (SELECT count(DISTINCT visitor) FROM (SELECT visitor FROM v UNION SELECT visitor FROM e) u) + (SELECT visitors FROM archived),
       'previous_visitors', (SELECT count(DISTINCT visitor) FROM "View"
-        WHERE "siteId" = $1 AND "createdAt" >= now() - make_interval(days => 2 * $2::int) AND "createdAt" < now() - make_interval(days => $2::int)),
-      'top_sources', ${list(`SELECT coalesce(source, '(none)') AS source, count(DISTINCT visitor) AS visitors FROM visits GROUP BY 1`, 6)},
-      'top_pages', ${list('SELECT path AS page, count(DISTINCT visitor) AS visitors FROM v GROUP BY 1', 6)},
-      'entry_pages', ${list('SELECT entry AS page, count(DISTINCT visitor) AS visitors FROM visits GROUP BY 1', 6)},
+        WHERE "siteId" = $1 AND "createdAt" >= now() - make_interval(days => 2 * $2::int) AND "createdAt" < now() - make_interval(days => $2::int))
+        + (SELECT coalesce(sum(visitors), 0) FROM "ViewDay" WHERE "siteId" = $1
+          AND day >= (now() AT TIME ZONE 'UTC' - make_interval(days => 2 * $2::int))::date
+          AND day < (now() AT TIME ZONE 'UTC' - make_interval(days => $2::int))::date),
+      'top_sources', ${list('SELECT source, sum(visitors) AS visitors FROM src GROUP BY 1', 6)},
+      'top_pages', ${list(merged('page', 'pages', 'SELECT path, count(DISTINCT visitor) FROM v GROUP BY 1'), 6)},
+      'entry_pages', ${list(merged('page', 'entryPages', 'SELECT entry, count(DISTINCT visitor) FROM visits GROUP BY 1'), 6)},
       'from_posts', ${list(`SELECT entry AS page, count(DISTINCT visitor) AS visitors FROM visits WHERE source = 'x' GROUP BY 1`, 15)},
-      'sibling_referrals', ${list(`SELECT source, count(DISTINCT visitor) AS visitors FROM visits WHERE source = ANY(${$(siblings)}::text[]) GROUP BY 1`, 6)},
-      'countries', ${list('SELECT country, count(DISTINCT visitor) AS visitors FROM v WHERE country IS NOT NULL GROUP BY 1', 10)},
-      'devices', ${list('SELECT device, count(DISTINCT visitor) AS visitors FROM v GROUP BY 1')},
-      'by_day', ${list(`SELECT to_char(at AT TIME ZONE 'UTC', 'YYYY-MM-DD') AS date, count(DISTINCT visitor) AS visitors FROM v GROUP BY 1`, undefined, '1')},
+      'sibling_referrals', ${list(`SELECT source, sum(visitors) AS visitors FROM src WHERE source = ANY(${$(siblings)}::text[]) GROUP BY 1`, 6)},
+      'countries', ${list(merged('country', 'countries', 'SELECT country, count(DISTINCT visitor) FROM v WHERE country IS NOT NULL GROUP BY 1'), 10)},
+      'devices', ${list(merged('device', 'devices', 'SELECT device, count(DISTINCT visitor) FROM v GROUP BY 1'))},
+      'by_day', ${list(`SELECT date, sum(n) AS visitors FROM (
+          SELECT to_char(at AT TIME ZONE 'UTC', 'YYYY-MM-DD'), count(DISTINCT visitor) FROM v GROUP BY 1
+          UNION ALL SELECT to_char(day, 'YYYY-MM-DD'), visitors FROM a
+        ) t(date, n) GROUP BY 1`, undefined, '1')},
       'follow_clicks', ${handle
         ? `(SELECT json_build_object('events', count(*), 'visitors', count(DISTINCT visitor)) FROM e
               WHERE name = 'Outbound Link: Click' AND props->>'url' ILIKE ANY(${$([`%x.com/${handle}%`, `%twitter.com/${handle}%`])}::text[]))`

package/dist/base.css

@@ -183,22 +183,9 @@ 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;
-  gap: 2px;
-  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-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/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];
-/** 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];
-/** 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", 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-chart.d.ts

@@ -0,0 +1,4 @@
+/** 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

@@ -0,0 +1,71 @@
+'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" });
+}

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. */
+    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. 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,56 @@
+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];
+/** 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. 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.
+    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 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(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') })] })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wiki-formant",
-  "version": "0.33.0",
+  "version": "0.35.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,11 @@
       "import": "./dist/react-server.js",
       "default": "./dist/react-server.js"
     },
+    "./stats": {
+      "types": "./dist/stats.d.ts",
+      "import": "./dist/stats.js",
+      "default": "./dist/stats.js"
+    },
     "./dom": {
       "types": "./dist/dom.d.ts",
       "import": "./dist/dom.js",
@@ -266,11 +271,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 +296,7 @@
     "pg": ">=8",
     "react": ">=18",
     "sanitize-html": ">=2",
-    "@simplewebauthn/server": ">=13",
-    "@simplewebauthn/browser": ">=13"
+    "lightweight-charts": ">=5"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -348,6 +355,9 @@
     },
     "@simplewebauthn/browser": {
       "optional": true
+    },
+    "lightweight-charts": {
+      "optional": true
     }
   }
 }