@universelle/sentinel-report 0.1.0 → 0.2.0

package/README.md

@@ -125,6 +125,37 @@ import { createReporter } from "@universelle/sentinel-report";
 await createReporter({ site: "your-site" }).send({ kind: "wish", text: "Export the table" });
 ```
 
+## 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/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 { MARK_SHAPES, markSvg } from "./logo.js";
 export type { Context, ConsoleEntry, FailedRequest, 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 { 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

@@ -20,6 +20,42 @@ 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. */
 export declare function useSentinelReport(options: {

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,6 +26,11 @@ 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));
 }
+/** 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. */
 export function useSentinelReport(options) {
     const reporter = useMemo(() => (typeof window === "undefined" ? undefined : createReporter(options)), [options.site, options.endpoint]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universelle/sentinel-report",
-  "version": "0.1.0",
+  "version": "0.2.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",