wiki-formant 0.34.0 → 0.35.0

package/README.md

@@ -730,13 +730,16 @@ 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/base.css

@@ -183,23 +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;
-  /* 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-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, 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-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.34.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
     }
   }
 }