@mdbase-dev/ui 0.1.0-beta.121 → 0.1.0-beta.124

package/dist/AppSwitcher.d.ts

@@ -4,6 +4,9 @@ import { type MdbaseMarkMotion } from "./brand.js";
 /**
  * The product wordmark as a menu for opening the current collection in the other mdbase apps.
  * Each opens in a new tab so the current app stays where it is.
+ *
+ * Its mark shows the page's activity (see `mark-activity`): progress, then a held loop,
+ * then `motion`. Without a `motion` it plays `keys-first` the first time it appears.
  */
 export declare function AppSwitcher({ current, urls, motion }: {
     readonly current: MdbaseAppId;

package/dist/AppSwitcher.js

@@ -2,15 +2,28 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useId, useRef, useState } from "react";
 import { mdbaseAppHref, withAppUrls } from "./apps.js";
 import { MdbaseAppMark, Wordmark } from "./brand.js";
+import { useMdbaseMarkActivity } from "./mark-activity.js";
 import { moveMenuFocus, useMenuPopover } from "./popover.js";
+/** The switcher plays its entrance once per page, not every time it remounts. */
+let entrancePlayed = false;
 /**
  * The product wordmark as a menu for opening the current collection in the other mdbase apps.
  * Each opens in a new tab so the current app stays where it is.
+ *
+ * Its mark shows the page's activity (see `mark-activity`): progress, then a held loop,
+ * then `motion`. Without a `motion` it plays `keys-first` the first time it appears.
  */
 export function AppSwitcher({ current, urls = {}, motion }) {
     const menuId = useId();
     const triggerRef = useRef(null);
     const [open, setOpen] = useState(false);
+    const [entrance] = useState(() => {
+        if (motion || entrancePlayed || typeof window === "undefined")
+            return undefined;
+        entrancePlayed = true;
+        return "keys-first";
+    });
+    const activity = useMdbaseMarkActivity();
     const close = (refocus) => {
         setOpen(false);
         if (refocus)
@@ -21,7 +34,7 @@ export function AppSwitcher({ current, urls = {}, motion }) {
                         event.preventDefault();
                         setOpen(true);
                     }
-                }, children: [_jsx(Wordmark, { app: current, motion: motion }), _jsx("svg", { className: "mdbase-app-switcher-chevron", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "m7 10 5 5 5-5" }) })] }), open ? _jsx(AppMenu, { id: menuId, apps: withAppUrls(urls), current: current, triggerRef: triggerRef, onClose: close }) : null] });
+                }, children: [_jsx(Wordmark, { app: current, motion: activity.busy ?? motion ?? entrance, signal: activity.signal, progress: activity.progress }), _jsx("svg", { className: "mdbase-app-switcher-chevron", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "m7 10 5 5 5-5" }) })] }), open ? _jsx(AppMenu, { id: menuId, apps: withAppUrls(urls), current: current, triggerRef: triggerRef, onClose: close }) : null] });
 }
 function AppMenu({ id, apps, current, triggerRef, onClose }) {
     const menuRef = useRef(null);

package/dist/Dialog.js

@@ -20,7 +20,7 @@ export function Dialog({ open, onClose, title, className, closeDisabled = false,
         else if (!open && dialog.open)
             dialog.close();
     }, [open]);
-    return _jsx("dialog", { ref: ref, className: ["mdbase-dialog", className].filter(Boolean).join(" "), "aria-label": title, onCancel: (event) => {
+    return _jsx("dialog", { ref: ref, className: ["mdbase-dialog", className].filter(Boolean).join(" "), "aria-label": title, onKeyDown: (event) => event.stopPropagation(), onCancel: (event) => {
             event.preventDefault();
             if (!closeDisabled)
                 onClose();

package/dist/Feedback.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from "react";
+import { type FeedbackApplication, type FeedbackFailure, type FeedbackTopic } from "./feedback-data.js";
+export { feedbackApplication, resolveFeedbackEndpoint } from "./feedback-data.js";
+export type { FeedbackApplication, FeedbackFailure, FeedbackErrorCode, FeedbackTopic } from "./feedback-data.js";
+interface FeedbackControls {
+    enabled: boolean;
+    open: (topic?: FeedbackTopic) => void;
+    /** Call only for a user-visible failure, never background retries. Pass codes, not raw exceptions. */
+    reportError: (failure: FeedbackFailure) => void;
+    wiggle: number;
+}
+export declare function useFeedback(): FeedbackControls;
+export declare function FeedbackBug({ wiggle }: {
+    wiggle?: number;
+}): import("react").JSX.Element;
+export declare function FeedbackButton({ className, topic }: {
+    className?: string;
+    topic?: FeedbackTopic;
+}): import("react").JSX.Element | null;
+/** One per application shell. No Connect/auth dependency; drafts live only in this mounted provider. */
+export declare function FeedbackProvider({ endpoint: configuredEndpoint, application, turnstileSiteKey, collectionName, children }: {
+    endpoint: string | null;
+    application: FeedbackApplication;
+    turnstileSiteKey?: string | null;
+    collectionName?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/Feedback.js

@@ -0,0 +1,247 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { FeedbackMarkup } from "./FeedbackMarkup.js";
+import { FeedbackVerification } from "./FeedbackVerification.js";
+import { FEEDBACK_ERROR_CODES, FEEDBACK_MAX_MESSAGE_LENGTH, captureFeedbackScreenshot, feedbackDiagnostics, feedbackEvents, feedbackTopics, readFeedbackScreenshot, resolveFeedbackEndpoint, screenshotUrl, sendFeedback } from "./feedback-data.js";
+export { feedbackApplication, resolveFeedbackEndpoint } from "./feedback-data.js";
+const FeedbackContext = createContext(null);
+const disabledFeedback = { enabled: false, open() { }, reportError() { }, wiggle: 0 };
+export function useFeedback() { return useContext(FeedbackContext) ?? disabledFeedback; }
+export function FeedbackBug({ wiggle = 0 }) {
+    return _jsxs("svg", { className: `mdbase-feedback-bug${wiggle ? " is-wiggling" : ""}`, viewBox: "0 0 48 48", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M16 23 8 19l-3 2m10 8H6l-2 3m12 3-7 4v3m23-19 8-4 3 2m-10 8h9l2 3m-12 3 7 4v3M20 13l-4-6-4 1m16 5 4-6 4 1" }), _jsx("ellipse", { cx: "24", cy: "29", rx: "10", ry: "12" }), _jsx("ellipse", { cx: "24", cy: "16", rx: "7", ry: "6" }), _jsx("path", { d: "M24 22v17" }), _jsx("circle", { cx: "21", cy: "15", r: "1.5", fill: "currentColor", stroke: "none" }), _jsx("circle", { cx: "27", cy: "15", r: "1.5", fill: "currentColor", stroke: "none" })] }, wiggle);
+}
+export function FeedbackButton({ className, topic }) {
+    const feedback = useFeedback();
+    if (!feedback.enabled)
+        return null;
+    return _jsxs("button", { type: "button", className: ["mdbase-feedback-trigger", className].filter(Boolean).join(" "), onClick: () => feedback.open(topic), children: [_jsx(FeedbackBug, { wiggle: feedback.wiggle }), _jsx("span", { children: topic === "problem" ? "Report a problem" : "Send feedback" })] });
+}
+/** One per application shell. No Connect/auth dependency; drafts live only in this mounted provider. */
+export function FeedbackProvider({ endpoint: configuredEndpoint, application, turnstileSiteKey, collectionName, children }) {
+    const endpoint = resolveFeedbackEndpoint(configuredEndpoint ?? undefined);
+    const dialog = useRef(null);
+    const content = useRef(null);
+    const messageField = useRef(null);
+    const successHeading = useRef(null);
+    const body = useRef(null);
+    const trigger = useRef(null);
+    const events = useRef([]);
+    const lastWiggle = useRef(-Infinity);
+    const imageOperation = useRef(null);
+    const submissionOperation = useRef(null);
+    const attempt = useRef(null);
+    const live = useRef(true);
+    const [open, setOpen] = useState(false);
+    const [topic, setTopic] = useState("problem");
+    const [message, setMessage] = useState("");
+    const [replyEmail, setReplyEmail] = useState("");
+    const [includeCollection, setIncludeCollection] = useState(false);
+    const [includeDiagnostics, setIncludeDiagnostics] = useState(false);
+    const [diagnostics, setDiagnostics] = useState(null);
+    const [screenshot, setScreenshot] = useState(null);
+    const [includeScreenshot, setIncludeScreenshot] = useState(true);
+    const [markup, setMarkup] = useState(false);
+    const [imageBusy, setImageBusy] = useState(false);
+    const [capturing, setCapturing] = useState(false);
+    const [captureStatus, setCaptureStatus] = useState("");
+    const [screenshotError, setScreenshotError] = useState("");
+    const [submitError, setSubmitError] = useState("");
+    const [submitting, setSubmitting] = useState(false);
+    const [submitted, setSubmitted] = useState(null);
+    const [turnstileToken, setTurnstileToken] = useState("");
+    const [verificationAttempt, setVerificationAttempt] = useState(0);
+    const [wiggle, setWiggle] = useState(0);
+    const id = useId();
+    useEffect(() => {
+        live.current = true;
+        return () => { live.current = false; imageOperation.current?.abort(); submissionOperation.current?.abort(); if (content.current)
+            content.current.inert = false; };
+    }, []);
+    useLayoutEffect(() => { setIncludeCollection(false); }, [collectionName]);
+    useEffect(() => {
+        if (!wiggle)
+            return;
+        const timer = setTimeout(() => setWiggle(0), 600);
+        return () => clearTimeout(timer);
+    }, [wiggle]);
+    const openFeedback = useCallback((next) => {
+        if (!endpoint)
+            return;
+        trigger.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        if (next)
+            setTopic(next);
+        setDiagnostics(feedbackDiagnostics(events.current));
+        setOpen(true);
+    }, [endpoint]);
+    const reportError = useCallback((failure) => {
+        if (!endpoint || failure.code === "cancelled")
+            return;
+        if (!FEEDBACK_ERROR_CODES.includes(failure.code) || (failure.status !== undefined && (!Number.isInteger(failure.status) || failure.status < 100 || failure.status > 599)))
+            throw new TypeError("Feedback failures must contain a bounded error code and HTTP status only.");
+        const event = { at: new Date().toISOString(), code: failure.code, ...(failure.status === undefined ? {} : { status: failure.status }) };
+        events.current = feedbackEvents([...events.current, event]);
+        if (document.visibilityState === "visible" && performance.now() - lastWiggle.current >= 30_000) {
+            lastWiggle.current = performance.now();
+            setWiggle((value) => value + 1);
+        }
+    }, [endpoint]);
+    const controls = useMemo(() => ({ enabled: Boolean(endpoint), open: openFeedback, reportError, wiggle }), [endpoint, openFeedback, reportError, wiggle]);
+    useLayoutEffect(() => {
+        if (!dialog.current)
+            return;
+        if (open && !capturing) {
+            if (!dialog.current.open)
+                dialog.current.showModal();
+            if (submitted)
+                successHeading.current?.focus({ preventScroll: true });
+            else
+                messageField.current?.focus({ preventScroll: true });
+        }
+        else if (dialog.current.open)
+            dialog.current.close();
+    }, [open, capturing, submitted]);
+    function resetDraft() {
+        setTopic("problem");
+        setMessage("");
+        setReplyEmail("");
+        setIncludeCollection(false);
+        setIncludeDiagnostics(false);
+        setScreenshot(null);
+        setIncludeScreenshot(true);
+        setSubmitted(null);
+        setSubmitError("");
+        setScreenshotError("");
+        setCaptureStatus("");
+        attempt.current = null;
+    }
+    function close() {
+        if (submitting)
+            return;
+        imageOperation.current?.abort();
+        imageOperation.current = null;
+        setCapturing(false);
+        setImageBusy(false);
+        setMarkup(false);
+        setOpen(false);
+        setTurnstileToken("");
+        setVerificationAttempt((value) => value + 1);
+        if (submitted)
+            resetDraft();
+        dialog.current?.close();
+        trigger.current?.focus({ preventScroll: true });
+    }
+    async function capture() {
+        if (imageOperation.current || submitting)
+            return;
+        const controller = new AbortController();
+        imageOperation.current = controller;
+        const scroll = body.current?.scrollTop ?? 0;
+        setImageBusy(true);
+        setCapturing(true);
+        setScreenshotError("");
+        setCaptureStatus("");
+        // Close synchronously, before either the picker or capture stream sees this native modal.
+        dialog.current?.close();
+        if (content.current)
+            content.current.inert = true;
+        try {
+            const next = await captureFeedbackScreenshot(controller.signal);
+            if (!controller.signal.aborted && live.current) {
+                setScreenshot(next);
+                setIncludeScreenshot(true);
+                setCaptureStatus("Screenshot captured. Sharing has stopped.");
+            }
+        }
+        catch (reason) {
+            if (!controller.signal.aborted && live.current) {
+                if (reason instanceof DOMException && (reason.name === "NotAllowedError" || reason.name === "AbortError"))
+                    setCaptureStatus("No screenshot taken. You can still send feedback.");
+                else
+                    setScreenshotError(reason instanceof Error ? reason.message : "The screenshot could not be captured.");
+            }
+        }
+        finally {
+            if (imageOperation.current === controller)
+                imageOperation.current = null;
+            if (content.current)
+                content.current.inert = false;
+            if (!controller.signal.aborted && live.current) {
+                setCapturing(false);
+                setImageBusy(false);
+                if (dialog.current && !dialog.current.open)
+                    dialog.current.showModal();
+                if (body.current)
+                    body.current.scrollTop = scroll;
+            }
+        }
+    }
+    async function upload(file) {
+        if (imageOperation.current || submitting)
+            return;
+        const controller = new AbortController();
+        imageOperation.current = controller;
+        setImageBusy(true);
+        setScreenshotError("");
+        setCaptureStatus("");
+        try {
+            const next = await readFeedbackScreenshot(file);
+            if (!controller.signal.aborted && live.current) {
+                setScreenshot(next);
+                setIncludeScreenshot(true);
+            }
+        }
+        catch (reason) {
+            if (!controller.signal.aborted && live.current)
+                setScreenshotError(reason instanceof Error ? reason.message : "The screenshot could not be read.");
+        }
+        finally {
+            if (imageOperation.current === controller)
+                imageOperation.current = null;
+            if (!controller.signal.aborted && live.current)
+                setImageBusy(false);
+        }
+    }
+    async function submit() {
+        if (!endpoint || !message.trim() || imageOperation.current || submissionOperation.current || (turnstileSiteKey && !turnstileToken))
+            return;
+        const payload = {
+            schema_version: 2, application, topic, message: message.trim(),
+            ...(replyEmail.trim() ? { reply_email: replyEmail.trim() } : {}),
+            ...(includeCollection && collectionName ? { context: { collection_name: collectionName } } : {}),
+            ...(topic === "problem" && includeDiagnostics && diagnostics ? { diagnostics } : {}),
+            ...(screenshot && includeScreenshot ? { screenshot } : {})
+        };
+        const fingerprint = JSON.stringify(payload);
+        if (attempt.current?.fingerprint !== fingerprint)
+            attempt.current = { fingerprint, requestId: crypto.randomUUID() };
+        const submission = { ...payload, request_id: attempt.current.requestId, ...(turnstileToken ? { turnstile_token: turnstileToken } : {}) };
+        const controller = new AbortController();
+        submissionOperation.current = controller;
+        const timer = setTimeout(() => controller.abort(), 20_000);
+        setSubmitting(true);
+        setSubmitError("");
+        try {
+            await sendFeedback(endpoint, submission, controller.signal);
+            if (live.current) {
+                setSubmitted(topic);
+                setScreenshot(null);
+            }
+        }
+        catch (reason) {
+            if (live.current)
+                setSubmitError(controller.signal.aborted ? "Sending timed out. Please try again." : reason instanceof Error ? reason.message : "Feedback could not be sent. Please try again.");
+        }
+        finally {
+            clearTimeout(timer);
+            submissionOperation.current = null;
+            if (live.current) {
+                setSubmitting(false);
+                setTurnstileToken("");
+                setVerificationAttempt((value) => value + 1);
+            }
+        }
+    }
+    const config = feedbackTopics[topic];
+    return _jsxs(FeedbackContext.Provider, { value: controls, children: [_jsx("div", { className: "mdbase-feedback-app", ref: content, children: children }), _jsx("span", { className: "mdbase-feedback-sr-only", role: "status", children: wiggle ? "A problem occurred. You can use Send feedback to report it." : "" }), endpoint && _jsxs("dialog", { ref: dialog, className: "mdbase-feedback-dialog", "aria-labelledby": `${id}-title`, onKeyDown: (event) => event.stopPropagation(), onCancel: (event) => { event.preventDefault(); close(); }, children: [_jsxs("header", { className: "mdbase-feedback-header", children: [_jsx("h2", { id: `${id}-title`, children: "Send feedback" }), _jsx("button", { type: "button", disabled: submitting, onClick: close, "aria-label": "Close feedback", children: "\u00D7" })] }), submitted ? _jsxs("section", { className: "mdbase-feedback-success", children: [_jsx("h3", { ref: successHeading, tabIndex: -1, children: feedbackTopics[submitted].thanks }), _jsx("p", { children: "Sent privately to the mdbase team." }), _jsx("button", { type: "button", className: "mdbase-feedback-primary", onClick: close, children: "Back to your work" })] }) : _jsxs("form", { onSubmit: (event) => { event.preventDefault(); void submit(); }, children: [_jsxs("div", { className: "mdbase-feedback-body", ref: body, children: [_jsxs("fieldset", { className: "mdbase-feedback-topics", disabled: submitting, children: [_jsx("legend", { className: "mdbase-feedback-sr-only", children: "Feedback type" }), Object.keys(feedbackTopics).map((value) => _jsxs("label", { children: [_jsx("input", { type: "radio", name: `${id}-topic`, checked: topic === value, onChange: () => setTopic(value) }), feedbackTopics[value].label] }, value))] }), _jsxs("label", { className: "mdbase-feedback-field", children: [_jsx("span", { children: config.prompt }), _jsx("textarea", { ref: messageField, required: true, maxLength: FEEDBACK_MAX_MESSAGE_LENGTH, rows: 5, placeholder: config.placeholder, value: message, disabled: submitting, onChange: (event) => setMessage(event.target.value) })] }), _jsxs("label", { className: "mdbase-feedback-field", children: [_jsxs("span", { children: ["Reply email ", _jsx("small", { children: "Optional" })] }), _jsx("input", { type: "email", maxLength: 320, autoComplete: "email", placeholder: "you@example.com", value: replyEmail, disabled: submitting, onChange: (event) => setReplyEmail(event.target.value) })] }), _jsxs("div", { className: "mdbase-feedback-screenshot", role: "group", "aria-label": "Screenshot", children: [screenshot && _jsxs(_Fragment, { children: [_jsxs("button", { className: "mdbase-feedback-preview", type: "button", disabled: imageBusy || submitting, onClick: () => { setIncludeScreenshot(false); setMarkup(true); }, "aria-label": "Mark up screenshot", children: [_jsx("img", { src: screenshotUrl(screenshot), alt: "Screenshot attached to your feedback" }), _jsx("span", { children: "Mark up screenshot" })] }), _jsxs("div", { className: "mdbase-feedback-screenshot-actions", children: [_jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: includeScreenshot, disabled: submitting, onChange: (event) => setIncludeScreenshot(event.target.checked) }), "Include screenshot"] }), _jsx("button", { type: "button", disabled: imageBusy || submitting, onClick: () => { setScreenshot(null); setScreenshotError(""); setCaptureStatus(""); }, children: "Remove" })] })] }), _jsxs("div", { className: "mdbase-feedback-screenshot-actions", children: [_jsx("button", { type: "button", disabled: imageBusy || submitting, onClick: () => void capture(), children: capturing ? "Taking screenshot…" : screenshot ? "Retake screenshot" : "Attach screenshot" }), _jsxs("label", { className: "mdbase-feedback-upload", children: [_jsx("span", { children: "Choose an image" }), _jsx("input", { type: "file", accept: "image/png,image/jpeg", disabled: imageBusy || submitting, onChange: (event) => { const file = event.target.files?.[0]; event.target.value = ""; if (file)
+                                                                    void upload(file); } })] })] }), screenshot && _jsx("p", { className: "mdbase-feedback-help", children: "Review for private information before sending." }), captureStatus && _jsx("p", { className: "mdbase-feedback-help", role: "status", children: captureStatus }), screenshotError && _jsx("p", { className: "mdbase-feedback-error", role: "alert", children: screenshotError })] }), _jsxs("details", { className: "mdbase-feedback-details", children: [_jsx("summary", { children: "What gets sent" }), _jsx("p", { className: "mdbase-feedback-help", children: "Your message, any reply email and included screenshot, plus these app and build details." }), _jsx("pre", { children: JSON.stringify(application, null, 2) }), collectionName && _jsxs("label", { className: "mdbase-feedback-check", children: [_jsx("input", { type: "checkbox", checked: includeCollection, disabled: submitting, onChange: (event) => setIncludeCollection(event.target.checked) }), "Include collection name: ", collectionName] }), topic === "problem" && _jsxs(_Fragment, { children: [_jsxs("label", { className: "mdbase-feedback-check", children: [_jsx("input", { type: "checkbox", checked: includeDiagnostics, disabled: submitting, onChange: (event) => setIncludeDiagnostics(event.target.checked) }), "Include technical diagnostics"] }), _jsx("p", { className: "mdbase-feedback-help", children: "Browser, OS, viewport and recent error codes. No note contents, paths or credentials." }), includeDiagnostics && _jsx("pre", { children: JSON.stringify(diagnostics, null, 2) })] }), _jsx("p", { className: "mdbase-feedback-help", children: "Images: PNG or JPEG, up to 3 MB. Blackout replaces pixels; only the final image is attached." }), _jsx("p", { className: "mdbase-feedback-help", children: "Replies aren\u2019t guaranteed. Not for security reports or urgent support." })] }), turnstileSiteKey && open && !capturing && _jsx(FeedbackVerification, { siteKey: turnstileSiteKey, onToken: setTurnstileToken }, verificationAttempt), submitError && _jsx("p", { className: "mdbase-feedback-error", role: "alert", children: submitError }), _jsx("p", { className: "mdbase-feedback-help", children: "Private feedback to the mdbase team." })] }), _jsxs("footer", { className: "mdbase-feedback-actions", children: [_jsx("button", { type: "button", disabled: submitting, onClick: close, children: "Cancel" }), _jsx("button", { type: "submit", className: "mdbase-feedback-primary", disabled: submitting || imageBusy || !message.trim() || Boolean(turnstileSiteKey && !turnstileToken), children: submitting ? "Sending…" : "Send feedback" })] })] })] }), markup && screenshot && _jsx(FeedbackMarkup, { screenshot: screenshot, onClose: () => { setMarkup(false); setCaptureStatus("Markup discarded. Screenshot excluded."); }, onApply: (next) => { setScreenshot(next); setIncludeScreenshot(true); setMarkup(false); setCaptureStatus("Markup applied."); } })] });
+}

package/dist/FeedbackMarkup.d.ts

@@ -0,0 +1,18 @@
+import { type FeedbackScreenshot } from "./feedback-data.js";
+type Point = {
+    x: number;
+    y: number;
+};
+type Tool = "draw" | "highlight" | "blackout";
+export interface FeedbackMark {
+    tool: Tool;
+    points: Point[];
+}
+/** Redactions render last and replace whole pixels. Export is a flattened raster, never layers. */
+export declare function paintFeedbackMarks(context: CanvasRenderingContext2D, image: CanvasImageSource, marks: readonly FeedbackMark[]): void;
+export declare function FeedbackMarkup({ screenshot, onApply, onClose }: {
+    screenshot: FeedbackScreenshot;
+    onApply(screenshot: FeedbackScreenshot): void;
+    onClose(): void;
+}): import("react").JSX.Element;
+export {};

package/dist/FeedbackMarkup.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { Dialog } from "./Dialog.js";
+import { screenshotFromCanvas, screenshotUrl } from "./feedback-data.js";
+/** Redactions render last and replace whole pixels. Export is a flattened raster, never layers. */
+export function paintFeedbackMarks(context, image, marks) {
+    const { width, height } = context.canvas;
+    context.clearRect(0, 0, width, height);
+    context.drawImage(image, 0, 0);
+    for (const mark of [...marks.filter((m) => m.tool !== "blackout"), ...marks.filter((m) => m.tool === "blackout")]) {
+        const first = mark.points[0], last = mark.points.at(-1);
+        if (!first || !last)
+            continue;
+        context.save();
+        if (mark.tool === "draw") {
+            context.strokeStyle = "#df3c32";
+            context.lineWidth = Math.max(3, width / 360);
+            context.lineCap = "round";
+            context.lineJoin = "round";
+            context.beginPath();
+            context.moveTo(first.x, first.y);
+            for (const point of mark.points.slice(1))
+                context.lineTo(point.x, point.y);
+            context.stroke();
+        }
+        else {
+            const x = Math.floor(Math.min(first.x, last.x)), y = Math.floor(Math.min(first.y, last.y));
+            context.fillStyle = mark.tool === "blackout" ? "#000" : "rgba(255, 214, 48, .42)";
+            context.fillRect(x, y, Math.ceil(Math.max(first.x, last.x)) - x, Math.ceil(Math.max(first.y, last.y)) - y);
+        }
+        context.restore();
+    }
+}
+export function FeedbackMarkup({ screenshot, onApply, onClose }) {
+    const canvas = useRef(null);
+    const image = useRef(null);
+    const marks = useRef([]);
+    const current = useRef(null);
+    const cursor = useRef(null);
+    const [tool, setTool] = useState("draw");
+    const [count, setCount] = useState(0);
+    const [ready, setReady] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState("");
+    const instructions = useId();
+    function paint(showCursor = true) {
+        const context = canvas.current?.getContext("2d");
+        if (!context || !image.current)
+            return;
+        paintFeedbackMarks(context, image.current, current.current ? [...marks.current, current.current] : marks.current);
+        if (showCursor && cursor.current) {
+            context.strokeStyle = "#1267ad";
+            context.lineWidth = 2;
+            context.beginPath();
+            context.arc(cursor.current.x, cursor.current.y, 7, 0, Math.PI * 2);
+            context.stroke();
+        }
+    }
+    useEffect(() => {
+        let live = true;
+        const decoded = new Image();
+        decoded.src = screenshotUrl(screenshot);
+        void decoded.decode().then(() => {
+            if (!live || !canvas.current)
+                return;
+            image.current = decoded;
+            canvas.current.width = decoded.naturalWidth;
+            canvas.current.height = decoded.naturalHeight;
+            paint();
+            setReady(true);
+        }).catch(() => { if (live)
+            setError("The screenshot could not be opened for markup."); });
+        return () => { live = false; image.current = null; marks.current = []; current.current = null; };
+    }, [screenshot]);
+    function finish() {
+        if (current.current && current.current.points.length > 1 && marks.current.length < 100)
+            marks.current.push(current.current);
+        current.current = null;
+        setCount(marks.current.length);
+        paint();
+    }
+    function coordinate(clientX, clientY) {
+        const element = canvas.current;
+        const rect = element.getBoundingClientRect();
+        return { x: Math.max(0, Math.min(element.width, (clientX - rect.left) * element.width / rect.width)), y: Math.max(0, Math.min(element.height, (clientY - rect.top) * element.height / rect.height)) };
+    }
+    return _jsxs(Dialog, { open: true, onClose: onClose, closeDisabled: busy, title: "Mark up screenshot", className: "mdbase-feedback-markup", children: [_jsxs("div", { className: "mdbase-feedback-tools", role: "group", "aria-label": "Screenshot tools", children: [["draw", "highlight", "blackout"].map((value) => _jsx("button", { type: "button", "aria-pressed": tool === value, disabled: !ready || busy, onClick: () => { current.current = null; setTool(value); paint(); }, children: value === "draw" ? "Draw" : value === "highlight" ? "Highlight" : "Blackout" }, value)), _jsx("button", { type: "button", disabled: !count || busy, onClick: () => { current.current = null; marks.current.pop(); setCount(marks.current.length); paint(); }, children: "Undo" }), _jsx("button", { type: "button", disabled: !count || busy, onClick: () => { current.current = null; marks.current = []; setCount(0); paint(); }, children: "Reset" })] }), _jsx("div", { className: "mdbase-feedback-canvas", children: _jsx("canvas", { ref: canvas, tabIndex: 0, "aria-label": "Screenshot annotation canvas", "aria-describedby": instructions, onPointerDown: (event) => {
+                        if (!ready || busy || event.button !== 0)
+                            return;
+                        if (marks.current.length >= 100) {
+                            setError("Up to 100 marks can be applied. Undo or reset to make another mark.");
+                            return;
+                        }
+                        cursor.current = null;
+                        event.currentTarget.setPointerCapture(event.pointerId);
+                        current.current = { tool, points: [coordinate(event.clientX, event.clientY)] };
+                    }, onPointerMove: (event) => { if (current.current && event.currentTarget.hasPointerCapture(event.pointerId) && current.current.points.length < 2000) {
+                        current.current.points.push(coordinate(event.clientX, event.clientY));
+                        paint();
+                    } }, onPointerUp: (event) => { if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+                        current.current?.points.push(coordinate(event.clientX, event.clientY));
+                        finish();
+                        event.currentTarget.releasePointerCapture(event.pointerId);
+                    } }, onPointerCancel: () => { current.current = null; paint(); }, onKeyDown: (event) => {
+                        if (!ready || busy || !["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", " ", "Enter"].includes(event.key))
+                            return;
+                        event.preventDefault();
+                        cursor.current ??= { x: event.currentTarget.width / 2, y: event.currentTarget.height / 2 };
+                        if (event.key === " " || event.key === "Enter") {
+                            if (current.current) {
+                                current.current.points.push({ ...cursor.current });
+                                finish();
+                            }
+                            else if (marks.current.length < 100)
+                                current.current = { tool, points: [{ ...cursor.current }] };
+                            else
+                                setError("Up to 100 marks can be applied. Undo or reset to make another mark.");
+                        }
+                        else {
+                            const step = event.shiftKey ? 50 : 10;
+                            cursor.current.x = Math.max(0, Math.min(event.currentTarget.width, cursor.current.x + (event.key === "ArrowRight" ? step : event.key === "ArrowLeft" ? -step : 0)));
+                            cursor.current.y = Math.max(0, Math.min(event.currentTarget.height, cursor.current.y + (event.key === "ArrowDown" ? step : event.key === "ArrowUp" ? -step : 0)));
+                            if (current.current && current.current.points.length < 2000)
+                                current.current.points.push({ ...cursor.current });
+                        }
+                        paint();
+                    } }) }), _jsx("p", { id: instructions, className: "mdbase-feedback-help", children: "Drag to mark. Keyboard: arrows move; Space starts or finishes. Blackout removes pixels." }), _jsxs("span", { className: "mdbase-feedback-sr-only", role: "status", children: [count, " marks applied."] }), error && _jsx("p", { role: "alert", children: error }), _jsxs("div", { className: "mdbase-feedback-actions", children: [_jsx("button", { type: "button", disabled: busy, onClick: onClose, children: "Cancel" }), _jsx("button", { type: "button", className: "mdbase-feedback-primary", disabled: !ready || busy, onClick: () => {
+                            if (!canvas.current)
+                                return;
+                            finish();
+                            paint(false);
+                            setBusy(true);
+                            setError("");
+                            void screenshotFromCanvas(canvas.current).then(onApply).catch((reason) => { setBusy(false); setError(reason instanceof Error ? reason.message : "The screenshot could not be saved."); });
+                        }, children: busy ? "Applying…" : "Apply changes" })] })] });
+}

package/dist/FeedbackVerification.d.ts

@@ -0,0 +1,21 @@
+interface TurnstileApi {
+    render(container: HTMLElement, options: {
+        sitekey: string;
+        callback(token: string): void;
+        "expired-callback"(): void;
+        "error-callback"(): void;
+        action: "feedback";
+        theme: "auto";
+    }): string;
+    remove(widgetId: string): void;
+}
+declare global {
+    interface Window {
+        turnstile?: TurnstileApi;
+    }
+}
+export declare function FeedbackVerification({ siteKey, onToken }: {
+    siteKey: string;
+    onToken(token: string): void;
+}): import("react").JSX.Element;
+export {};

package/dist/FeedbackVerification.js

@@ -0,0 +1,76 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+let turnstileScript;
+export function FeedbackVerification({ siteKey, onToken }) {
+    const container = useRef(null);
+    const callback = useRef(onToken);
+    const [error, setError] = useState("");
+    const [attempt, setAttempt] = useState(0);
+    callback.current = onToken;
+    useEffect(() => {
+        callback.current("");
+        setError("");
+        let active = true;
+        let widgetId;
+        void loadTurnstile().then(() => {
+            if (!active || !container.current || !window.turnstile)
+                return;
+            widgetId = window.turnstile.render(container.current, {
+                sitekey: siteKey,
+                callback: (token) => { if (active) {
+                    setError("");
+                    callback.current(token);
+                } },
+                "expired-callback": () => { if (active)
+                    callback.current(""); },
+                "error-callback": () => { if (active) {
+                    callback.current("");
+                    setError("Verification could not be completed. Try again.");
+                } },
+                action: "feedback",
+                theme: "auto"
+            });
+        }).catch(() => {
+            if (active)
+                setError("Verification could not be loaded. Check your connection and try again.");
+        });
+        return () => {
+            active = false;
+            if (widgetId && window.turnstile)
+                window.turnstile.remove(widgetId);
+        };
+    }, [siteKey, attempt]);
+    return _jsxs("div", { className: "mdbase-feedback-verification", children: [_jsx("div", { ref: container }), error && _jsxs(_Fragment, { children: [_jsx("p", { className: "mdbase-feedback-error", role: "alert", children: error }), _jsx("button", { type: "button", onClick: () => setAttempt((value) => value + 1), children: "Retry verification" })] })] });
+}
+function loadTurnstile() {
+    if (window.turnstile)
+        return Promise.resolve();
+    if (turnstileScript)
+        return turnstileScript;
+    turnstileScript = new Promise((resolve, reject) => {
+        const existing = document.querySelector('script[data-mdbase-turnstile="true"]');
+        const script = existing ?? document.createElement("script");
+        const cleanup = () => { clearTimeout(timer); script.removeEventListener("load", loaded); script.removeEventListener("error", failed); };
+        const loaded = () => { cleanup(); if (window.turnstile)
+            resolve();
+        else
+            reject(new Error("Turnstile API unavailable")); };
+        const failed = () => { cleanup(); reject(new Error("Turnstile failed to load")); };
+        const timer = setTimeout(failed, 15_000);
+        script.addEventListener("load", loaded, { once: true });
+        script.addEventListener("error", failed, { once: true });
+        if (!existing) {
+            script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+            script.async = true;
+            script.defer = true;
+            script.dataset.mdbaseTurnstile = "true";
+            document.head.append(script);
+        }
+    });
+    turnstileScript = turnstileScript.catch((error) => {
+        document.querySelector('script[data-mdbase-turnstile="true"]')?.remove();
+        turnstileScript = undefined;
+        throw error;
+    });
+    return turnstileScript;
+}

package/dist/SaveNotice.d.ts

@@ -1,14 +1,20 @@
-import type { JSX } from "react";
+import { type JSX } from "react";
+import type { MdbaseMarkSignalKind } from "./brand.js";
 /**
  * saved: confirmed, so it settles away (see .mdbase-settle in controls.css).
  * saving: work in progress. pending: changed but not yet saved.
  * attention: a conflict or failure, which never fades.
  */
 export type SaveTone = "saved" | "saving" | "pending" | "attention";
+/** The mark's reaction when a notice changes from `before` to `tone`; none when it first appears. */
+export declare function saveToneSignal(before: SaveTone | null, tone: SaveTone): MdbaseMarkSignalKind | null;
 /**
  * The minimal save notice every mdbase app shows beside what it edits. Put it inside an
  * element with `mdbase-settle-host` so hovering or focusing that element brings a settled
  * notice back.
+ *
+ * The notice also drives the app's mark: a save that completes plays `saved`, a newly
+ * raised problem plays `error`, and a slow save bounces the mark until it ends.
  */
 export declare function SaveNotice({ tone, label, className }: {
     readonly tone: SaveTone;