wiki-formant 0.65.0 → 0.67.0

package/README.md

@@ -542,6 +542,18 @@ export const SITE = siteRefs(SITE_URL);
 <JsonLd data={siteGraphLd({ name, url: SITE_URL, logo, sameAs, searchUrl, api })} />
 ```
 
+## Social cards
+
+`wiki-formant/og` is the card at `/og`, as the element `next/og`'s `ImageResponse` takes. `SocialCard` is the frame: an eyebrow, a title fitted with `describe`, anything under it, then the description and the site's mark along the foot, bottom-aligned on a 1200×630 field. The field and the art are arguments, because they were all that differed: two wikis had each written the same seeded gradient with translucent circles, which is `bubbles(rand, { field, colors })`, and a third draws its own art and passes it as `art`. `cardRandom(...text)` seeds either from the page, so one page always draws the same card. `OG_SIZE` and `OG_HEADERS` (a day at the CDN, a week stale) go on the response.
+
+```tsx
+const rand = cardRandom(title, eyebrow);
+const { background, art } = bubbles(rand, { field: [BG, NAVY], colors: [GREEN, ORANGE] });
+return new ImageResponse(<SocialCard {...{ title, eyebrow, description, background, art }} mark="example.org" colors={{ text, muted, accent }} fontFamily="Inter" />, { ...OG_SIZE, headers: OG_HEADERS, fonts: await fonts });
+```
+
+Fonts stay with the site: Next traces a font file into the function only from a literal path in the app's own code, and satori reads TTF or OTF, never the woff2 `next/font` serves. The frame never sets a style key to `undefined`, which satori throws on rather than skipping; `scrim` darkens the foot for art that is a photograph.
+
 ## Revisions
 
 What changed between two versions of a page, and therefore which semver bump to
@@ -884,7 +896,8 @@ referring host), top and entry pages, countries, devices, visitors and agents by
 day, the agents by name, MCP tool calls, and the searches that found nothing.
 An agent is counted as a visitor is, one address and user agent a day, from its
 `AI Bot Visit` and `MCP Call` events; it runs no page script, so it is never
-among the visitors. `ownAgents` leaves the site's own out. A visit is a run of one
+among the visitors, and `visitors_incl_agents` counts the two at once.
+`ownAgents` leaves the site's own out of both. A visit is a run of one
 visitor's views with no gap over 30 minutes. A multi-tenant app passes a `site`
 key to every call and a `site` resolver to `collect`.
 
@@ -918,7 +931,7 @@ export const POST = gate.route;
 export const DELETE = gate.signOut;
 
 // src/app/stats/page.tsx
-const q = statsQuery(params); // ?days= (1, 7, 30, 90, 365 or all, else 30) and the filters
+const q = statsQuery(params); // ?days= (1, 7, 30, 90, 365 or all, else 30), ?agents=apart and the filters
 return (
   <StatsGate gate={gate} session={(await cookies()).get(gate.cookie)?.value} invite={params.invite} host="caper.network">
     {async () => <Stats digest={await digest(sql, q)} {...q} />}
@@ -935,8 +948,10 @@ site's stylesheet to colour), one of them by day, week or month (a count's
 total, a rate's mean), every non-empty
 ranked list, and `?days=` links between windows, all time among them, pinned in
 the chart's frame as its own buttons are (`TimeChart`'s `controls`). Each
-figure is a button that charts it: visitors, agents, page views, bounce rate,
-visit length and clicks to X. `digest`'s `by_day` carries every
+figure is a button that charts it: visitors, page views, bounce rate,
+visit length and clicks to X. Visitors count agents; `?agents=apart`, a pair
+of links beside the windows, splits them into people and agents, and every
+other link on the page keeps the choice. `digest`'s `by_day` carries every
 one of those per UTC day, a visit on the day it began, so the days add up to the
 totals. A day with no visits has no bounce rate or visit length and is left out
 of those charts rather than drawn as zero. Everything but the figures and the

package/dist/analytics.d.ts

@@ -57,6 +57,9 @@ export declare const SEARCH_GAPS: Gap;
 /** What a stats page can be narrowed to: one value each, every one applied. */
 export declare const STATS_FILTERS: readonly ["page", "entry", "source", "country", "device"];
 export type StatsFilter = Partial<Record<(typeof STATS_FILTERS)[number], string>>;
+/** A count as a stats page prints it. Here, not in the `'use client'` figures, because
+ * `Stats` calls it on the server, where a client module's export is only a reference. */
+export declare const count: (n: number) => string;
 export interface DigestOptions {
     site?: string;
     /** How far back, in whole days from now; `Infinity` for all time. */
@@ -109,7 +112,7 @@ export interface Digest {
      * never among `visitors`.
      */
     agents: number;
-    /** Visitors plus every agent that sent an event, such as an MCP call. */
+    /** Visitors and `agents` as one count, which a stats page shows unless asked to keep them apart. */
     visitors_incl_agents: number;
     /**
      * The headline figures over the same number of days before, narrowed alike.

package/dist/analytics.js

@@ -149,6 +149,9 @@ export async function collect(request, { sql, defer, site, rateLimit: limit = BE
 export const SEARCH_GAPS = { event: 'Search Query', prop: 'q', where: { results: '0', surface: 'wiki' } };
 /** What a stats page can be narrowed to: one value each, every one applied. */
 export const STATS_FILTERS = ['page', 'entry', 'source', 'country', 'device'];
+/** A count as a stats page prints it. Here, not in the `'use client'` figures, because
+ * `Stats` calls it on the server, where a client module's export is only a reference. */
+export const count = (n) => n.toLocaleString('en');
 /**
  * Each filter as a test on one visit. A page, country or device is any of the
  * visit's views; an entry page or a source is its first. `(none)` is no source.
@@ -237,7 +240,7 @@ export async function digest(sql, { site = '', days, handle, siblings = [], gaps
       'bounce_rate', (SELECT round(100.0 * bounces / nullif(visits, 0)) FROM sessions${s}),
       'visit_duration', (SELECT round(seconds / nullif(visits, 0)) FROM sessions${s}),
       'agents', (SELECT count(DISTINCT visitor) FROM ag${s}),
-      'visitors_incl_agents', (SELECT count(DISTINCT visitor) FROM (SELECT visitor FROM v${s} UNION SELECT visitor FROM e${s}) u) + (SELECT visitors FROM archived${s})`;
+      'visitors_incl_agents', (SELECT count(DISTINCT visitor) FROM (SELECT visitor FROM v${s} UNION SELECT visitor FROM ag${s}) u) + (SELECT visitors FROM archived${s})`;
     const [row] = (await sql(`WITH ${chain('', 0)}, ${chain('_p', 1)}, 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)
@@ -258,7 +261,7 @@ export async function digest(sql, { site = '', days, handle, siblings = [], gaps
           SELECT ${day('at')}, count(DISTINCT visitor), count(*), 0, 0, 0, 0, 0, 0 FROM v GROUP BY 1
           UNION ALL SELECT ${day('at')}, 0, 0, count(*), count(*) FILTER (WHERE views = 1), coalesce(sum(seconds), 0), 0, 0, 0 FROM visits GROUP BY 1
           UNION ALL SELECT ${day('at')}, 0, 0, 0, 0, 0, count(DISTINCT visitor), 0, 0 FROM ag GROUP BY 1
-          UNION ALL SELECT ${day('at')}, 0, 0, 0, 0, 0, 0, count(DISTINCT visitor), 0 FROM (SELECT at, visitor FROM v UNION ALL SELECT at, visitor FROM e) u GROUP BY 1
+          UNION ALL SELECT ${day('at')}, 0, 0, 0, 0, 0, 0, count(DISTINCT visitor), 0 FROM (SELECT at, visitor FROM v UNION ALL SELECT at, visitor FROM ag) u GROUP BY 1
           ${follows ? `UNION ALL SELECT ${day('at')}, 0, 0, 0, 0, 0, 0, 0, count(*) FROM e WHERE ${follows} GROUP BY 1` : ''}
           UNION ALL SELECT to_char(day, 'YYYY-MM-DD'), visitors, pageviews, visits, bounces, seconds, 0, visitors, 0 FROM a
         ) t(date, visitors, pageviews, visits, bounces, seconds, agents, everyone, follows) GROUP BY 1`, undefined, '1')},

package/dist/og.d.ts

@@ -0,0 +1,54 @@
+import type { ReactElement, ReactNode } from 'react';
+export declare const OG_SIZE: {
+    readonly width: 1200;
+    readonly height: 630;
+};
+/** A day at the CDN, a week stale: a card changes when its page's title does, and crawlers cache it for longer anyway. */
+export declare const OG_HEADERS: {
+    readonly 'Cache-Control': "public, max-age=86400, s-maxage=86400, stale-while-revalidate=604800";
+};
+/** The card's generator, seeded from its text, so one page always draws the same card. */
+export declare function cardRandom(...parts: string[]): () => number;
+export interface BubbleOptions {
+    /** The two ends of the field's gradient; its angle is seeded. */
+    field: readonly [string, string];
+    /** Circle colours, picked at random per circle. */
+    colors: readonly string[];
+    count?: number;
+    /** Smallest radius and the spread above it, in px. */
+    radius?: readonly [number, number];
+    /** Lowest opacity and the spread above it. */
+    opacity?: readonly [number, number];
+}
+/** The seeded gradient and translucent circles: a field and its art, for `SocialCard`. */
+export declare function bubbles(rand: () => number, o: BubbleOptions): {
+    background: string;
+    art: ReactNode;
+};
+export interface SocialCardProps {
+    title: string;
+    /** The line above the title: a section, a code, a handle. */
+    eyebrow?: string;
+    /** The line along the foot. */
+    description?: string;
+    /** The site's name, at the foot's right. */
+    mark?: string;
+    colors: {
+        text: string;
+        /** The description. */
+        muted: string;
+        /** The eyebrow and the mark. */
+        accent: string;
+    };
+    /** The field: any CSS background satori draws, a gradient from `bubbles` or a flat colour. */
+    background: string;
+    /** Absolutely positioned layers between the field and the text. */
+    art?: ReactNode;
+    /** A dark gradient up from the foot, for art that is a photograph. */
+    scrim?: boolean;
+    fontFamily?: string;
+    /** Anything that belongs under the title: chips, a figure. */
+    children?: ReactNode;
+}
+/** One card, 1200×630: the eyebrow, title and anything under it, then the description and the mark along the foot. */
+export declare function SocialCard(p: SocialCardProps): ReactElement;

package/dist/og.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe } from './metadata.js';
+import { hashStr, seededRandom } from './seeded.js';
+export const OG_SIZE = { width: 1200, height: 630 };
+/** A day at the CDN, a week stale: a card changes when its page's title does, and crawlers cache it for longer anyway. */
+export const OG_HEADERS = { 'Cache-Control': 'public, max-age=86400, s-maxage=86400, stale-while-revalidate=604800' };
+/** The card's generator, seeded from its text, so one page always draws the same card. */
+export function cardRandom(...parts) {
+    return seededRandom(hashStr(parts.join('')));
+}
+/** The seeded gradient and translucent circles: a field and its art, for `SocialCard`. */
+export function bubbles(rand, o) {
+    const [r0, rSpan] = o.radius ?? [60, 180];
+    const [a0, aSpan] = o.opacity ?? [0.12, 0.2];
+    const background = `linear-gradient(${Math.floor(rand() * 360)}deg, ${o.field[0]}, ${o.field[1]})`;
+    const art = Array.from({ length: o.count ?? 7 }, (_, i) => {
+        const cx = rand() * OG_SIZE.width;
+        const cy = rand() * OG_SIZE.height;
+        const r = r0 + rand() * rSpan;
+        const color = o.colors[Math.floor(rand() * o.colors.length)] ?? o.field[1];
+        return (_jsx("div", { style: { position: 'absolute', left: cx - r, top: cy - r, width: r * 2, height: r * 2, borderRadius: '50%', background: color, opacity: a0 + rand() * aSpan } }, i));
+    });
+    return { background, art };
+}
+const SCRIM = 'linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 50%, transparent 100%)';
+/** One card, 1200×630: the eyebrow, title and anything under it, then the description and the mark along the foot. */
+export function SocialCard(p) {
+    const title = describe(p.title, 90);
+    // Three lines at most at either size; the step is where 68px would wrap a fourth.
+    const titleSize = title.length > 48 ? 56 : 72;
+    return (_jsxs("div", { style: { display: 'flex', width: '100%', height: '100%', position: 'relative', background: p.background, ...(p.fontFamily ? { fontFamily: p.fontFamily } : {}) }, children: [p.art, _jsxs("div", { style: {
+                    display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
+                    width: '100%', height: '100%', padding: '56px 64px', position: 'relative',
+                    ...(p.scrim ? { background: SCRIM } : {}),
+                }, children: [p.eyebrow ? _jsx("div", { style: { display: 'flex', fontSize: 30, fontWeight: 700, color: p.colors.accent, marginBottom: 14 }, children: describe(p.eyebrow, 48) }) : null, _jsx("div", { style: { display: 'flex', fontSize: titleSize, fontWeight: 700, color: p.colors.text, lineHeight: 1.08, letterSpacing: '-0.02em' }, children: title }), p.children ? _jsx("div", { style: { display: 'flex', marginTop: 28 }, children: p.children }) : null, p.description || p.mark ? (_jsxs("div", { style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 40, marginTop: 28 }, children: [_jsx("div", { style: { display: 'flex', flex: 1, fontSize: 26, lineHeight: 1.35, color: p.colors.muted }, children: p.description ? describe(p.description, 110) : '' }), p.mark ? _jsx("div", { style: { display: 'flex', fontSize: 28, fontWeight: 700, color: p.colors.accent }, children: p.mark }) : null] })) : null] })] }));
+}

package/dist/stats-figures.d.ts

@@ -1,16 +1,16 @@
 import { type ReactNode } from 'react';
-import type { Digest } from './analytics.js';
-export declare const count: (n: number) => string;
+import { type Digest } from './analytics.js';
 /**
  * The figures as `.stats-figures button[aria-pressed]`, each with its change
  * as `.stats-delta[data-better]` for a stylesheet to colour, and the pressed one per
  * day from `first` (a UTC day number) to today. A count's empty day is a zero;
  * a rate's is left out, since no visits is not a bounce rate of nothing.
  */
-export declare function StatsFigures({ digest, first, windows }: {
+export declare function StatsFigures({ digest, first, apart, controls }: {
     digest: Digest;
     first: number;
-    windows: ReactNode;
+    apart: boolean;
+    controls: ReactNode;
 }): import("react").JSX.Element;
 export interface PasskeyButtonProps {
     /** The route that serves `gate.route`. */

package/dist/stats-figures.js

@@ -7,8 +7,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // component and hands it the digest, which is plain JSON.
 import { startAuthentication, startRegistration } from '@simplewebauthn/browser';
 import { useMemo, useState } from 'react';
+import { count } from './analytics.js';
 import { TimeChart, stepDecimals } from './chart.js';
-export const count = (n) => n.toLocaleString('en');
 // Whole seconds and percentages, unless an axis tick's step needs more to tell it from the next.
 const places = (step) => (step ? stepDecimals(step) : 0);
 const duration = (s, step) => (s < 60 ? `${s.toFixed(places(step))}s` : `${Math.floor(s / 60)}m ${Math.round(s % 60)}s`);
@@ -26,9 +26,21 @@ function change(now, before, { points = false, lowerIsBetter = false } = {}) {
     const text = `${n > 0 ? '+' : ''}${n}${points ? ' pp' : '%'}`;
     return n ? { text, better: n > 0 !== lowerIsBetter } : { text };
 }
-const figuresOf = ({ previous: p, ...d }) => [
-    { label: 'Visitors', value: count(d.visitors), delta: change(d.visitors, p.visitors), day: r => r.visitors },
-    { label: 'Agents', value: count(d.agents), delta: change(d.agents, p.agents), day: r => r.agents },
+/** Visitors are one figure counting agents too, or `apart` two: people, and agents. */
+const figuresOf = ({ previous: p, ...d }, apart) => [
+    ...(apart
+        ? [
+            { label: 'People', value: count(d.visitors), delta: change(d.visitors, p.visitors), day: (r) => r.visitors },
+            { label: 'Agents', value: count(d.agents), delta: change(d.agents, p.agents), day: (r) => r.agents },
+        ]
+        : [
+            {
+                label: 'Visitors',
+                value: count(d.visitors_incl_agents),
+                delta: change(d.visitors_incl_agents, p.visitors_incl_agents),
+                day: (r) => r.visitors_incl_agents,
+            },
+        ]),
     { label: 'Page views', value: count(d.pageviews), delta: change(d.pageviews, p.pageviews), day: r => r.pageviews },
     {
         label: 'Bounce rate',
@@ -65,8 +77,8 @@ const EMPTY = { date: '', visitors: 0, pageviews: 0, visits: 0, bounces: 0, seco
  * day from `first` (a UTC day number) to today. A count's empty day is a zero;
  * a rate's is left out, since no visits is not a bounce rate of nothing.
  */
-export function StatsFigures({ digest, first, windows }) {
-    const figures = useMemo(() => figuresOf(digest), [digest]);
+export function StatsFigures({ digest, first, apart, controls }) {
+    const figures = useMemo(() => figuresOf(digest, apart), [digest, apart]);
     const [chosen, choose] = useState(0);
     const figure = figures[chosen] ?? figures[0];
     const byDay = useMemo(() => new Map(digest.by_day.map(r => [r.date, r])), [digest.by_day]);
@@ -78,7 +90,7 @@ export function StatsFigures({ digest, first, windows }) {
             return value == null ? null : { time, value };
         }).filter(p => p !== null);
     }, [byDay, first, figure]);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "stats-figures", role: "group", "aria-label": "Chart", children: figures.map((f, i) => (_jsxs("button", { type: "button", "aria-pressed": i === chosen, onClick: () => choose(i), children: [_jsx("span", { children: f.label }), _jsxs("strong", { children: [f.value, f.delta && (_jsx("small", { className: "stats-delta", "data-better": f.delta.better, children: f.delta.text }))] })] }, f.label))) }), _jsx(TimeChart, { series: series, label: figure.label, ranges: ['all'], aggregate: figure.aggregate ?? 'sum', fromZero: true, format: figure.format, controls: windows, className: "stats-chart" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "stats-figures", role: "group", "aria-label": "Chart", children: figures.map((f, i) => (_jsxs("button", { type: "button", "aria-pressed": i === chosen, onClick: () => choose(i), children: [_jsx("span", { children: f.label }), _jsxs("strong", { children: [f.value, f.delta && (_jsx("small", { className: "stats-delta", "data-better": f.delta.better, children: f.delta.text }))] })] }, f.label))) }), _jsx(TimeChart, { series: series, label: figure.label, ranges: ['all'], aggregate: figure.aggregate ?? 'sum', fromZero: true, format: figure.format, controls: controls, className: "stats-chart" })] }));
 }
 async function post(endpoint, body) {
     const res = await fetch(endpoint, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body) });

package/dist/stats.d.ts

@@ -8,6 +8,8 @@ export interface StatsProps {
     days: number;
     /** What the digest was narrowed to, as `digest` was given it. */
     filter?: StatsFilter;
+    /** Visitors as people and agents, two figures, rather than one that counts both. */
+    apart?: boolean;
     /** The windows offered as `?days=` links on the same page. */
     ranges?: readonly number[];
 }
@@ -19,15 +21,16 @@ export interface StatsProps {
 export declare function statsQuery(params: Record<string, string | string[] | undefined>, ranges?: readonly number[]): {
     days: number;
     filter: Partial<Record<"page" | "entry" | "source" | "country" | "device", string>>;
+    apart: boolean;
 };
 /**
  * A site's own analytics on one page: the headline figures against the window
- * before, whichever of them is chosen per day, and every ranked list the
+ * before, visitors counting agents unless `apart`, whichever of them is chosen per day, and every ranked list the
  * digest carries, each row a link that narrows the page to it. 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, filter, ranges }: StatsProps): import("react").JSX.Element;
+export declare function Stats({ digest: d, days, filter, apart, ranges }: StatsProps): import("react").JSX.Element;
 export interface StatsGateProps {
     gate: PasskeyGate;
     /** The gate's cookie from the request: `(await cookies()).get(gate.cookie)?.value`. */

package/dist/stats.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { STATS_FILTERS } from './analytics.js';
-import { PasskeyButton, PasskeySignOut, StatsFigures, count } from './stats-figures.js';
+import { STATS_FILTERS, count } from './analytics.js';
+import { PasskeyButton, PasskeySignOut, StatsFigures } from './stats-figures.js';
 /** The windows the stats page offers, in days; `Infinity` is all time. */
 const STATS_RANGES = [1, 7, 30, 90, 365, Infinity];
 /** A window as its `?days=` value. */
@@ -21,11 +21,13 @@ export function statsQuery(params, ranges = STATS_RANGES) {
         if (typeof v === 'string' && v)
             filter[k] = v.slice(0, 500);
     }
-    return { days: statsDays(params.days, ranges), filter };
+    return { days: statsDays(params.days, ranges), filter, apart: params.agents === 'apart' };
 }
-/** The page at a window and a filter, as a query string. */
-const href = (days, filter) => {
+/** The page at a window, a filter and a count of agents, as a query string. */
+const href = (days, filter, apart) => {
     const q = new URLSearchParams({ days: daysParam(days) });
+    if (apart)
+        q.set('agents', 'apart');
     for (const k of STATS_FILTERS)
         if (filter[k])
             q.set(k, filter[k]);
@@ -50,12 +52,12 @@ function StatsList({ title, rows, label = v => v, to, }) {
 }
 /**
  * A site's own analytics on one page: the headline figures against the window
- * before, whichever of them is chosen per day, and every ranked list the
+ * before, visitors counting agents unless `apart`, whichever of them is chosen per day, and every ranked list the
  * digest carries, each row a link that narrows the page to it. 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, filter = {}, ranges = STATS_RANGES }) {
+export function Stats({ digest: d, days, filter = {}, apart = false, ranges = STATS_RANGES }) {
     const today = Math.floor(Date.now() / DAY_MS);
     const counted = d.counted_from ? Date.parse(d.counted_from) / DAY_MS : today;
     const narrowed = STATS_FILTERS.filter(k => filter[k]);
@@ -67,11 +69,12 @@ export function Stats({ digest: d, days, filter = {}, ranges = STATS_RANGES }) {
         ? Math.max(start, counted)
         : Number.isFinite(start) ? start : Math.min(today, ...d.by_day.map(r => Date.parse(r.date) / DAY_MS));
     const rows = (list, k, m) => list.map(r => [r[k], r[m]]);
-    const to = (k) => (v) => href(days, { ...filter, [k]: v });
+    const at = (f, n = days, a = apart) => href(n, f, a);
+    const to = (k) => (v) => at({ ...filter, [k]: v });
     // Each window is another digest, so a link rather than a button, pinned
-    // with the chart's own controls.
-    const windows = (_jsx("div", { role: "group", "aria-label": "Window", children: ranges.map(n => (_jsx("a", { href: href(n, filter), "aria-current": n === days ? 'page' : undefined, children: windowLabel(n) }, n))) }));
-    return (_jsxs("div", { className: "stats", children: [narrowed.length > 0 && (_jsxs("div", { className: "stats-filters", children: [_jsx("ul", { "aria-label": "Narrowed to", children: narrowed.map(k => (_jsx("li", { children: _jsxs("a", { href: href(days, { ...filter, [k]: undefined }), title: "Remove", children: [NAMES[k], ": ", k === 'country' ? country(filter[k]) : filter[k], " \u00D7"] }) }, k))) }), start < counted && d.counted_from && (_jsxs("p", { children: ["Narrowed figures start on ", d.counted_from, ", the first day this site counted its own visits."] }))] })), _jsx(StatsFigures, { digest: d, first: first, windows: windows }), _jsxs("div", { className: "stats-lists", children: [_jsx(StatsList, { title: "Pages", rows: rows(d.top_pages, 'page', 'visitors'), to: to('page') }), _jsx(StatsList, { title: "Entry pages", rows: rows(d.entry_pages, 'page', 'visitors'), to: to('entry') }), _jsx(StatsList, { title: "Sources", rows: rows(d.top_sources, 'source', 'visitors'), to: to('source') }), _jsx(StatsList, { title: "From X posts", rows: rows(d.from_posts, 'page', 'visitors'), to: v => href(days, { ...filter, source: 'x', entry: v }) }), _jsx(StatsList, { title: "Sibling sites", rows: rows(d.sibling_referrals, 'source', 'visitors'), to: to('source') }), _jsx(StatsList, { title: "Countries", rows: rows(d.countries, 'country', 'visitors'), label: country, to: to('country') }), _jsx(StatsList, { title: "Devices", rows: rows(d.devices, 'device', 'visitors'), to: to('device') }), _jsx(StatsList, { title: "Agents", rows: rows(d.top_agents, 'agent', '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') })] })] }));
+    // with the chart's own controls, and so is whether agents count apart.
+    const controls = (_jsxs(_Fragment, { children: [_jsx("div", { role: "group", "aria-label": "Window", children: ranges.map(n => (_jsx("a", { href: at(filter, n), "aria-current": n === days ? 'page' : undefined, children: windowLabel(n) }, n))) }), _jsxs("div", { role: "group", "aria-label": "Agents", children: [_jsx("a", { href: at(filter, days, false), "aria-current": apart ? undefined : 'page', title: "Visitors count agents", children: "With agents" }), _jsx("a", { href: at(filter, days, true), "aria-current": apart ? 'page' : undefined, title: "People and agents counted apart", children: "Apart" })] })] }));
+    return (_jsxs("div", { className: "stats", children: [narrowed.length > 0 && (_jsxs("div", { className: "stats-filters", children: [_jsx("ul", { "aria-label": "Narrowed to", children: narrowed.map(k => (_jsx("li", { children: _jsxs("a", { href: at({ ...filter, [k]: undefined }), title: "Remove", children: [NAMES[k], ": ", k === 'country' ? country(filter[k]) : filter[k], " \u00D7"] }) }, k))) }), start < counted && d.counted_from && (_jsxs("p", { children: ["Narrowed figures start on ", d.counted_from, ", the first day this site counted its own visits."] }))] })), _jsx(StatsFigures, { digest: d, first: first, apart: apart, controls: controls }), _jsxs("div", { className: "stats-lists", children: [_jsx(StatsList, { title: "Pages", rows: rows(d.top_pages, 'page', 'visitors'), to: to('page') }), _jsx(StatsList, { title: "Entry pages", rows: rows(d.entry_pages, 'page', 'visitors'), to: to('entry') }), _jsx(StatsList, { title: "Sources", rows: rows(d.top_sources, 'source', 'visitors'), to: to('source') }), _jsx(StatsList, { title: "From X posts", rows: rows(d.from_posts, 'page', 'visitors'), to: v => at({ ...filter, source: 'x', entry: v }) }), _jsx(StatsList, { title: "Sibling sites", rows: rows(d.sibling_referrals, 'source', 'visitors'), to: to('source') }), _jsx(StatsList, { title: "Countries", rows: rows(d.countries, 'country', 'visitors'), label: country, to: to('country') }), _jsx(StatsList, { title: "Devices", rows: rows(d.devices, 'device', 'visitors'), to: to('device') }), _jsx(StatsList, { title: "Agents", rows: rows(d.top_agents, 'agent', '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') })] })] }));
 }
 /**
  * A stats page's door: `children` and a sign-out button for a signed-in

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wiki-formant",
-  "version": "0.65.0",
+  "version": "0.67.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",
@@ -243,6 +243,11 @@
       "import": "./dist/seeded.js",
       "default": "./dist/seeded.js"
     },
+    "./og": {
+      "types": "./dist/og.d.ts",
+      "import": "./dist/og.js",
+      "default": "./dist/og.js"
+    },
     "./sanitize": {
       "types": "./dist/sanitize.d.ts",
       "import": "./dist/sanitize.js",