@universelle/sentinel-report 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,28 @@
+# Changelog — @universelle/sentinel-report
+
+## 0.3.0 — 2026-10-24
+
+### Privacy
+For sites whose paths carry secrets (an invitation token in `/u/<token>`, a personal link, internal ids), three
+options in `createReporter`, `useSentinelReport` and `capture()` clean everything that leaves the page. Recording
+stays raw in memory; the cleaning happens when the context is built (`context()`, `send()`):
+
+- **`route(pathname) => template`**. Applies to `page.path`, to every entry of `trail` and to every `network[].path`.
+  It always receives the path without its query string or fragment. If it throws or returns something that isn't a
+  string, that path goes as `"/(otra)"`, never raw. Consecutive pages with the same template become one entry.
+- **The title.** With `route`, `page.title` goes as `""`, because the title can carry the page's data. `title: true`
+  sends it anyway.
+- **Console messages.** With `route`, every absolute URL becomes its origin (`https://host/`). Every path at the start
+  of the message, or after a space, a bracket or a quote, goes through `route`. Then **`redact(message)`**, if given,
+  for anything else (UUIDs, tokens…). If `redact` throws, the message goes empty.
+- **Without these options nothing changes**: the body is the same as in 0.2.0.
+
+Unchanged: the body's format, the endpoint, `credentials: "omit"`, the limit of 20 entries, no dependencies and no
+install scripts.
+
+## 0.2.0 — 2026-10-24
+- SENTINEL's mark for your own branding: `<SentinelMark>`, `<sentinel-mark>`, `markSvg()` and `MARK_SHAPES`.
+
+## 0.1.0 — 2026-10-24
+- First release: the core (`capture`, `createReporter`), the `<sentinel-report>` web component and React
+  (`<ReportButton>`, `useSentinelReport`).

package/README.md

@@ -125,6 +125,55 @@ import { createReporter } from "@universelle/sentinel-report";
 await createReporter({ site: "your-site" }).send({ kind: "wish", text: "Export the table" });
 ```
 
+## Privacy: paths with secrets
+
+If your paths carry secrets (an invitation token in `/u/<token>`, a personal link, internal ids), pass `route`. It
+turns each real path into its template, so SENTINEL only receives templates. It applies to the page, every page of
+the trail, every failed request and the paths and URLs inside console messages, and the page's title is dropped.
+`redact` cleans console messages further.
+
+```tsx
+const route = (pathname: string) => toTemplate(pathname) ?? "/(otra)"; // e.g. "/u/[invitation]"
+const redact = (message: string) => message.replace(UUID, "[id]");
+
+const { send } = useSentinelReport({ site: "your-site", route, redact });
+// or: createReporter({ site: "your-site", route, redact }); or once for the page: capture({ route, redact })
+```
+
+A `route` that throws, or doesn't return a string, sends `"/(otra)"`, never the raw path. Without these options,
+everything is sent as in 0.2.0. See [CHANGELOG.md](CHANGELOG.md).
+
+## Branding: SENTINEL's mark
+
+For your own button, a footer or a "Protected by SENTINEL" line. The eye and the star take the text colour
+(`currentColor`), so the mark works on light and dark backgrounds; the moon is always the brand's green.
+
+```tsx
+import { SentinelMark, useSentinelReport } from "@universelle/sentinel-report/react";
+
+<button onClick={…}>
+  <SentinelMark size={20} /> Report a problem
+</button>
+
+// title makes it an image with a name, for screen readers:
+<SentinelMark size={32} title="SENTINEL" />
+```
+
+Without React:
+
+```html
+<script type="module">import "@universelle/sentinel-report/element";</script>
+<span style="color: #6b3fc4">Made with <sentinel-mark size="20" label="SENTINEL"></sentinel-mark></span>
+```
+
+```js
+import { markSvg, MARK_SHAPES } from "@universelle/sentinel-report";
+
+button.innerHTML = `${markSvg({ size: 20 })} Report`;
+```
+
+`markSvg` gives you the `<svg>` as a string. `MARK_SHAPES` gives you its inside, for your own `<svg viewBox="0 0 100 100">`.
+
 ## Notes
 
 - **Content Security Policy:** allow `connect-src https://sentinel.cervilla.es`, plus `script-src` if you use the

package/dist/core.d.ts

@@ -30,6 +30,17 @@ export type Report = {
     text: string;
     email?: string;
 };
+/** How a site cleans what is sent (0.3.0). Without `route`, everything goes as in 0.2.0. */
+export type Privacy = {
+    /** A real path (`/u/AbC…`) to its template (`/u/[invitation]`). If it throws or returns no string: `"/(otra)"`. */
+    route?: (pathname: string) => string;
+    /** Every console message, after the default cleaning (with `route`: URLs to their origin, paths to templates). */
+    redact?: (message: string) => string;
+    /** Send `document.title` (default: yes without `route`, no with it: the title can carry the page's data). */
+    title?: boolean;
+};
+/** What goes in place of a path the site's `route` can't turn into a template. */
+export declare const UNKNOWN_ROUTE = "/(otra)";
 export type Reporter = {
     /** Sends a report; rejects with an `Error` whose message is the HTTP status (or the network error). */
     send(report: Report): Promise<void>;
@@ -41,16 +52,25 @@ type Capture = {
     network: FailedRequest[];
     trail: string[];
     fetch: typeof fetch;
+    privacy: Privacy;
 };
 declare global {
     interface Window {
         __sentinelCapture?: Capture;
     }
 }
-/** Starts recording the visit's context (once per page; later calls return the same recording). */
-export declare function capture(): Capture;
+/**
+ * Starts recording the visit's context (once per page; later calls return the same recording). The privacy options
+ * given here are the page's default for every reporter that doesn't bring its own; a later call can still set them.
+ */
+export declare function capture(privacy?: Privacy): Capture;
+/**
+ * A console message as it may leave: with `route`, each absolute URL becomes its origin and each path (at the start,
+ * or after a space, a bracket or a quote) its template; then the site's own `redact`, if any.
+ */
+export declare function cleanMessage(message: string, privacy: Privacy): string;
 export declare function createReporter(options: {
     site: string;
     endpoint?: string;
-}): Reporter;
+} & Privacy): Reporter;
 export {};

package/dist/core.js

@@ -1,7 +1,14 @@
 // The core, with no framework: it records the technical context of the visit (console errors, failed requests,
 // pages visited) and sends a report to SENTINEL. What it never sends: the query string or fragment of any URL (they
 // can carry tokens) or anything typed into the site. Installed once per page, whoever asks first.
+//
+// Privacy (0.3.0): sites whose paths carry secrets (`/u/<invitation token>`) pass `route`, which turns a real path
+// into its template (`/u/[invitation]`). What is recorded stays raw in memory; everything that leaves (`context()`,
+// `send()`) goes through it: the page, every page of the trail, every failed request, and the paths and URLs inside
+// console messages; and the page's title is dropped. `redact` cleans console messages further.
 export const DEFAULT_ENDPOINT = "https://sentinel.cervilla.es";
+/** What goes in place of a path the site's `route` can't turn into a template. */
+export const UNKNOWN_ROUTE = "/(otra)";
 const MAX = 20;
 function clip(text) {
     return String(text).replace(/\s+/g, " ").slice(0, 300);
@@ -74,27 +81,83 @@ function watchNavigation(capture) {
     }
     window.addEventListener("popstate", visit);
 }
-/** Starts recording the visit's context (once per page; later calls return the same recording). */
-export function capture() {
-    if (window.__sentinelCapture !== undefined)
+/**
+ * Starts recording the visit's context (once per page; later calls return the same recording). The privacy options
+ * given here are the page's default for every reporter that doesn't bring its own; a later call can still set them.
+ */
+export function capture(privacy = {}) {
+    if (window.__sentinelCapture !== undefined) {
+        if (privacy.route !== undefined || privacy.redact !== undefined || privacy.title !== undefined)
+            window.__sentinelCapture.privacy = privacy;
         return window.__sentinelCapture;
-    const recording = { logs: [], network: [], trail: [location.pathname], fetch: window.fetch.bind(window) };
+    }
+    const recording = { logs: [], network: [], trail: [location.pathname], fetch: window.fetch.bind(window), privacy };
     window.__sentinelCapture = recording;
     watchConsole(recording);
     watchFetch(recording);
     watchNavigation(recording);
     return recording;
 }
+/** A path through the site's `route`, never raw once a route is given: what fails goes as `"/(otra)"`. */
+function template(route, pathname) {
+    if (route === undefined)
+        return pathname;
+    try {
+        const mapped = route(pathname.split(/[?#]/)[0]);
+        return typeof mapped === "string" ? mapped : UNKNOWN_ROUTE;
+    }
+    catch {
+        return UNKNOWN_ROUTE;
+    }
+}
+/**
+ * A console message as it may leave: with `route`, each absolute URL becomes its origin and each path (at the start,
+ * or after a space, a bracket or a quote) its template; then the site's own `redact`, if any.
+ */
+export function cleanMessage(message, privacy) {
+    let clean = message;
+    if (privacy.route !== undefined) {
+        clean = clean.replace(/https?:\/\/[^\s"'()<>]+/g, (url) => {
+            try {
+                return `${new URL(url).origin}/`;
+            }
+            catch {
+                return "[url]";
+            }
+        });
+        clean = clean.replace(/(^|[\s("'])(\/[^\s"'()<>]*)/g, (_match, before, pathname) => `${before}${template(privacy.route, pathname)}`);
+    }
+    if (privacy.redact !== undefined) {
+        try {
+            const redacted = privacy.redact(clean);
+            clean = typeof redacted === "string" ? redacted : "";
+        }
+        catch {
+            clean = "";
+        }
+    }
+    return clean;
+}
+/** The trail through `route`; consecutive pages with the same template become one. */
+function trailOf(trail, route) {
+    return trail.map((pathname) => template(route, pathname)).filter((pathname, index, all) => index === 0 || all[index - 1] !== pathname);
+}
 export function createReporter(options) {
     const recording = capture();
     const url = `${(options.endpoint ?? DEFAULT_ENDPOINT).replace(/\/+$/, "")}/reports/${encodeURIComponent(options.site)}`;
-    const context = () => ({
-        page: { path: location.pathname, title: document.title.slice(0, 200) },
-        device: { userAgent: navigator.userAgent.slice(0, 300), language: navigator.language, viewport: `${innerWidth}x${innerHeight}`, screen: `${screen.width}x${screen.height}` },
-        console: recording.logs.slice(),
-        network: recording.network.slice(),
-        trail: recording.trail.slice(),
-    });
+    const own = options.route !== undefined || options.redact !== undefined || options.title !== undefined;
+    const context = () => {
+        // The reporter's own options, else the page's default (from `capture()`), read when sending.
+        const privacy = own ? { route: options.route, redact: options.redact, title: options.title } : recording.privacy;
+        const withTitle = privacy.title ?? privacy.route === undefined;
+        return {
+            page: { path: template(privacy.route, location.pathname), title: withTitle ? document.title.slice(0, 200) : "" },
+            device: { userAgent: navigator.userAgent.slice(0, 300), language: navigator.language, viewport: `${innerWidth}x${innerHeight}`, screen: `${screen.width}x${screen.height}` },
+            console: recording.logs.map((entry) => ({ ...entry, message: cleanMessage(entry.message, privacy) })),
+            network: recording.network.map((entry) => ({ ...entry, path: template(privacy.route, entry.path) })),
+            trail: privacy.route === undefined ? recording.trail.slice() : trailOf(recording.trail, privacy.route),
+        };
+    };
     return {
         context,
         async send(report) {

package/dist/element.d.ts

@@ -34,8 +34,19 @@ export declare class SentinelReport extends HTMLElement {
     private say;
     private submit;
 }
+/**
+ * `<sentinel-mark size="24" label="…">`: SENTINEL's mark on its own, for your branding without React. It takes the
+ * text colour (`color` on the element); `label` makes it an image with that name, otherwise it is decorative.
+ */
+export declare class SentinelMark extends HTMLElement {
+    static observedAttributes: string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private render;
+}
 declare global {
     interface HTMLElementTagNameMap {
         "sentinel-report": SentinelReport;
+        "sentinel-mark": SentinelMark;
     }
 }

package/dist/element.js

@@ -8,6 +8,7 @@
 //     (auto | light | dark), hide-mark; and the `texts` property for every other word.
 // Events: `sentinel-sent` (detail: { kind }) and `sentinel-error` (detail: { error }). Methods: open(), close().
 import { capture, createReporter } from "./core.js";
+import { markSvg } from "./logo.js";
 import { MARK } from "./mark.js";
 export const DEFAULT_TEXTS = {
     label: "¿Algo falla?",
@@ -159,5 +160,25 @@ export class SentinelReport extends HTMLElement {
         }
     }
 }
+/**
+ * `<sentinel-mark size="24" label="…">`: SENTINEL's mark on its own, for your branding without React. It takes the
+ * text colour (`color` on the element); `label` makes it an image with that name, otherwise it is decorative.
+ */
+export class SentinelMark extends HTMLElement {
+    static observedAttributes = ["size", "label"];
+    connectedCallback() {
+        this.render();
+    }
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.render();
+    }
+    render() {
+        this.style.display ||= "inline-flex";
+        this.innerHTML = markSvg({ size: this.getAttribute("size") ?? "1em", title: this.getAttribute("label") ?? undefined });
+    }
+}
 if (typeof customElements !== "undefined" && customElements.get("sentinel-report") === undefined)
     customElements.define("sentinel-report", SentinelReport);
+if (typeof customElements !== "undefined" && customElements.get("sentinel-mark") === undefined)
+    customElements.define("sentinel-mark", SentinelMark);

package/dist/index.d.ts

@@ -1,2 +1,3 @@
-export { capture, createReporter, DEFAULT_ENDPOINT } from "./core.js";
-export type { Context, ConsoleEntry, FailedRequest, Report, ReportKind, Reporter } from "./core.js";
+export { capture, cleanMessage, createReporter, DEFAULT_ENDPOINT, UNKNOWN_ROUTE } from "./core.js";
+export { MARK_SHAPES, markSvg } from "./logo.js";
+export type { Context, ConsoleEntry, FailedRequest, Privacy, Report, ReportKind, Reporter } from "./core.js";

package/dist/index.js

@@ -1,3 +1,4 @@
 // @universelle/sentinel-report: the core, with no framework. For the ready-made button, `…/element` (any site) or
 // `…/react`; to build your own form, `createReporter` here or `useSentinelReport` in React.
-export { capture, createReporter, DEFAULT_ENDPOINT } from "./core.js";
+export { capture, cleanMessage, createReporter, DEFAULT_ENDPOINT, UNKNOWN_ROUTE } from "./core.js";
+export { MARK_SHAPES, markSvg } from "./logo.js";

package/dist/logo.d.ts

@@ -0,0 +1,8 @@
+import { MARK_SHAPES } from "./mark.js";
+export { MARK_SHAPES };
+/** The mark as an `<svg>`: decorative by default; with `title`, an image with that name for screen readers. */
+export declare function markSvg(options?: {
+    size?: number | string;
+    title?: string;
+    className?: string;
+}): string;

package/dist/logo.js

@@ -0,0 +1,14 @@
+// SENTINEL's mark for your own branding (a button of your own, a footer…): as an SVG string. The eye and the star take
+// the text colour (currentColor), so it works on light and dark backgrounds; the moon is always the brand's green.
+import { MARK_SHAPES } from "./mark.js";
+export { MARK_SHAPES };
+function escape(text) {
+    return text.replace(/[&<>"']/g, (char) => `&#${char.charCodeAt(0)};`);
+}
+/** The mark as an `<svg>`: decorative by default; with `title`, an image with that name for screen readers. */
+export function markSvg(options = {}) {
+    const size = options.size ?? 24;
+    const label = options.title ? ` role="img" aria-label="${escape(options.title)}"` : ' aria-hidden="true" focusable="false"';
+    const cls = options.className ? ` class="${escape(options.className)}"` : "";
+    return `<svg${cls} viewBox="0 0 100 100" width="${escape(String(size))}" height="${escape(String(size))}"${label}>${options.title ? `<title>${escape(options.title)}</title>` : ""}${MARK_SHAPES}</svg>`;
+}

package/dist/mark.d.ts

@@ -1 +1,2 @@
+export declare const MARK_SHAPES = "<path d=\"M14 50 Q50 14 86 50 Q50 86 14 50Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"7\" stroke-linejoin=\"round\"/><path d=\"M51.1 40.2 A11 11 0 1 0 59.77 53.22 A7.86 7.86 0 0 1 51.1 40.2Z\" fill=\"#3fbf6f\"/><path d=\"M20.9258 28C20.6615 27.82 20.4223 27.6072 20.2143 27.3671C19.9961 26.9641 19.8024 26.549 19.6343 26.1238C17.3476 21.0763 13.2746 16.9981 8.15841 14.6333C7.94143 14.5501 7.7297 14.4545 7.5243 14.347C6.80512 13.9024 6.82832 13.2921 7.57843 12.84C7.74361 12.7589 7.91411 12.6884 8.08881 12.6291C13.3854 10.5226 17.6112 6.45934 19.8431 1.32691C20.0751 0.814541 20.0906 0.0309247 20.8562 0.000785591C21.6217 -0.0293535 21.7377 0.814541 21.9852 1.35704C23.0822 3.90828 24.6892 6.22141 26.7125 8.16176C28.7358 10.1021 31.135 11.6309 33.7704 12.6592C33.9933 12.7315 34.2104 12.8196 34.42 12.9229C35.1933 13.3524 35.1933 13.925 34.42 14.3621C33.9406 14.6333 33.3992 14.8066 32.8734 15.0628C28.0444 17.4681 24.2329 21.4457 22.1012 26.3047C21.9511 26.6872 21.7755 27.0597 21.5753 27.4198C21.3859 27.6401 21.1675 27.8352 20.9258 28Z\" fill=\"currentColor\" transform=\"translate(57.64 44.71) scale(0.3367) translate(-21 -14)\"/>";
 export declare const MARK = "<svg class=\"mark\" part=\"mark\" viewBox=\"0 0 100 100\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M14 50 Q50 14 86 50 Q50 86 14 50Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"7\" stroke-linejoin=\"round\"/><path d=\"M51.1 40.2 A11 11 0 1 0 59.77 53.22 A7.86 7.86 0 0 1 51.1 40.2Z\" fill=\"#3fbf6f\"/><path d=\"M20.9258 28C20.6615 27.82 20.4223 27.6072 20.2143 27.3671C19.9961 26.9641 19.8024 26.549 19.6343 26.1238C17.3476 21.0763 13.2746 16.9981 8.15841 14.6333C7.94143 14.5501 7.7297 14.4545 7.5243 14.347C6.80512 13.9024 6.82832 13.2921 7.57843 12.84C7.74361 12.7589 7.91411 12.6884 8.08881 12.6291C13.3854 10.5226 17.6112 6.45934 19.8431 1.32691C20.0751 0.814541 20.0906 0.0309247 20.8562 0.000785591C21.6217 -0.0293535 21.7377 0.814541 21.9852 1.35704C23.0822 3.90828 24.6892 6.22141 26.7125 8.16176C28.7358 10.1021 31.135 11.6309 33.7704 12.6592C33.9933 12.7315 34.2104 12.8196 34.42 12.9229C35.1933 13.3524 35.1933 13.925 34.42 14.3621C33.9406 14.6333 33.3992 14.8066 32.8734 15.0628C28.0444 17.4681 24.2329 21.4457 22.1012 26.3047C21.9511 26.6872 21.7755 27.0597 21.5753 27.4198C21.3859 27.6401 21.1675 27.8352 20.9258 28Z\" fill=\"currentColor\" transform=\"translate(57.64 44.71) scale(0.3367) translate(-21 -14)\"/></svg>";

package/dist/mark.js

@@ -1,2 +1,4 @@
-// SENTINEL's mark (generated from the main repo's src/brand.ts by `pnpm brand`; do not edit by hand).
+// SENTINEL's mark (generated from the main repo's src/brand.ts by `pnpm brand`; do not edit by hand). The eye and
+// the star take the text colour (currentColor); the moon is always the brand's green.
+export const MARK_SHAPES = "<path d=\"M14 50 Q50 14 86 50 Q50 86 14 50Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"7\" stroke-linejoin=\"round\"/><path d=\"M51.1 40.2 A11 11 0 1 0 59.77 53.22 A7.86 7.86 0 0 1 51.1 40.2Z\" fill=\"#3fbf6f\"/><path d=\"M20.9258 28C20.6615 27.82 20.4223 27.6072 20.2143 27.3671C19.9961 26.9641 19.8024 26.549 19.6343 26.1238C17.3476 21.0763 13.2746 16.9981 8.15841 14.6333C7.94143 14.5501 7.7297 14.4545 7.5243 14.347C6.80512 13.9024 6.82832 13.2921 7.57843 12.84C7.74361 12.7589 7.91411 12.6884 8.08881 12.6291C13.3854 10.5226 17.6112 6.45934 19.8431 1.32691C20.0751 0.814541 20.0906 0.0309247 20.8562 0.000785591C21.6217 -0.0293535 21.7377 0.814541 21.9852 1.35704C23.0822 3.90828 24.6892 6.22141 26.7125 8.16176C28.7358 10.1021 31.135 11.6309 33.7704 12.6592C33.9933 12.7315 34.2104 12.8196 34.42 12.9229C35.1933 13.3524 35.1933 13.925 34.42 14.3621C33.9406 14.6333 33.3992 14.8066 32.8734 15.0628C28.0444 17.4681 24.2329 21.4457 22.1012 26.3047C21.9511 26.6872 21.7755 27.0597 21.5753 27.4198C21.3859 27.6401 21.1675 27.8352 20.9258 28Z\" fill=\"currentColor\" transform=\"translate(57.64 44.71) scale(0.3367) translate(-21 -14)\"/>";
 export const MARK = "<svg class=\"mark\" part=\"mark\" viewBox=\"0 0 100 100\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M14 50 Q50 14 86 50 Q50 86 14 50Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"7\" stroke-linejoin=\"round\"/><path d=\"M51.1 40.2 A11 11 0 1 0 59.77 53.22 A7.86 7.86 0 0 1 51.1 40.2Z\" fill=\"#3fbf6f\"/><path d=\"M20.9258 28C20.6615 27.82 20.4223 27.6072 20.2143 27.3671C19.9961 26.9641 19.8024 26.549 19.6343 26.1238C17.3476 21.0763 13.2746 16.9981 8.15841 14.6333C7.94143 14.5501 7.7297 14.4545 7.5243 14.347C6.80512 13.9024 6.82832 13.2921 7.57843 12.84C7.74361 12.7589 7.91411 12.6884 8.08881 12.6291C13.3854 10.5226 17.6112 6.45934 19.8431 1.32691C20.0751 0.814541 20.0906 0.0309247 20.8562 0.000785591C21.6217 -0.0293535 21.7377 0.814541 21.9852 1.35704C23.0822 3.90828 24.6892 6.22141 26.7125 8.16176C28.7358 10.1021 31.135 11.6309 33.7704 12.6592C33.9933 12.7315 34.2104 12.8196 34.42 12.9229C35.1933 13.3524 35.1933 13.925 34.42 14.3621C33.9406 14.6333 33.3992 14.8066 32.8734 15.0628C28.0444 17.4681 24.2329 21.4457 22.1012 26.3047C21.9511 26.6872 21.7755 27.0597 21.5753 27.4198C21.3859 27.6401 21.1675 27.8352 20.9258 28Z\" fill=\"currentColor\" transform=\"translate(57.64 44.71) scale(0.3367) translate(-21 -14)\"/></svg>";

package/dist/react.d.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties, type ReactNode } from "react";
-import { type Report } from "./core.js";
+import { type Privacy, type Report } from "./core.js";
 import type { Texts } from "./element.js";
 import "./element.js";
 export type ReportButtonProps = {
@@ -20,12 +20,51 @@ export type ReportButtonProps = {
     children?: ReactNode;
 };
 export declare function ReportButton({ site, endpoint, label, heading, position, theme, hideMark, texts, className, style, onSent, onError, children }: ReportButtonProps): import("react").DOMElement<Record<string, unknown>, Element>;
+export type SentinelMarkProps = {
+    /** Width and height (a number is px; default `1em`, the size of the text around it). */
+    size?: number | string;
+    /** A name for screen readers; without it, the mark is decorative. */
+    title?: string;
+    className?: string;
+    style?: CSSProperties;
+};
+/** SENTINEL's mark, for your own button or footer. It takes the text colour (`color`); the moon stays green. */
+export declare function SentinelMark({ size, title, className, style }: SentinelMarkProps): import("react").DOMElement<{
+    dangerouslySetInnerHTML: {
+        __html: string;
+    };
+    role: string;
+    "aria-label": string;
+    "aria-hidden"?: undefined;
+    focusable?: undefined;
+    viewBox: string;
+    width: string | number;
+    height: string | number;
+    className: string | undefined;
+    style: CSSProperties | undefined;
+} | {
+    dangerouslySetInnerHTML: {
+        __html: string;
+    };
+    "aria-hidden": boolean;
+    focusable: string;
+    role?: undefined;
+    "aria-label"?: undefined;
+    viewBox: string;
+    width: string | number;
+    height: string | number;
+    className: string | undefined;
+    style: CSSProperties | undefined;
+}, Element>;
 export type ReportStatus = "idle" | "sending" | "sent" | "error";
-/** For your own form: records the visit from the first render and sends with its context. */
+/**
+ * For your own form: records the visit from the first render and sends with its context. `route`, `redact` and
+ * `title` clean what is sent (see `Privacy`); pass stable functions (defined outside the component).
+ */
 export declare function useSentinelReport(options: {
     site: string;
     endpoint?: string;
-}): {
+} & Privacy): {
     send: (report: Report) => Promise<boolean>;
     status: ReportStatus;
     error: unknown;

package/dist/react.js

@@ -2,6 +2,7 @@
 // own form (`useSentinelReport`, which records the context and sends; the look is all yours).
 import { createElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { capture, createReporter } from "./core.js";
+import { MARK_SHAPES } from "./mark.js";
 import "./element.js";
 export function ReportButton({ site, endpoint, label, heading, position, theme, hideMark, texts, className, style, onSent, onError, children }) {
     const ref = useRef(null);
@@ -25,9 +26,17 @@ export function ReportButton({ site, endpoint, label, heading, position, theme,
         attributes["hide-mark"] = "";
     return createElement("sentinel-report", attributes, children === undefined ? undefined : createElement("span", { slot: "trigger", style: { display: "contents" } }, children));
 }
-/** For your own form: records the visit from the first render and sends with its context. */
+/** SENTINEL's mark, for your own button or footer. It takes the text colour (`color`); the moon stays green. */
+export function SentinelMark({ size = "1em", title, className, style }) {
+    const label = title ? { role: "img", "aria-label": title } : { "aria-hidden": true, focusable: "false" };
+    return createElement("svg", { viewBox: "0 0 100 100", width: size, height: size, className, style, ...label, dangerouslySetInnerHTML: { __html: `${title ? `<title>${title.replace(/[&<>"']/g, (char) => `&#${char.charCodeAt(0)};`)}</title>` : ""}${MARK_SHAPES}` } });
+}
+/**
+ * For your own form: records the visit from the first render and sends with its context. `route`, `redact` and
+ * `title` clean what is sent (see `Privacy`); pass stable functions (defined outside the component).
+ */
 export function useSentinelReport(options) {
-    const reporter = useMemo(() => (typeof window === "undefined" ? undefined : createReporter(options)), [options.site, options.endpoint]);
+    const reporter = useMemo(() => (typeof window === "undefined" ? undefined : createReporter(options)), [options.site, options.endpoint, options.route, options.redact, options.title]);
     const [status, setStatus] = useState("idle");
     const [error, setError] = useState(undefined);
     useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universelle/sentinel-report",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "SENTINEL's report button: let real users tell you what fails or what they miss, with the technical context of their visit.",
   "license": "MIT",
   "type": "module",
@@ -26,6 +26,7 @@
   "files": [
     "dist",
     "README.md",
+    "CHANGELOG.md",
     "LICENSE"
   ],
   "scripts": {