@mdbase-dev/ui 0.1.0-beta.126 → 0.1.0-beta.148

package/dist/Feedback.js

@@ -1,247 +1,781 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { i18n as _i18n } from "@lingui/core";
+import { useLocaleRevision } from "./i18n.js";
 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);
+const disabledFeedback = {
+  enabled: false,
+  open() {},
+  reportError() {},
+  wiggle: 0
+};
+export function useFeedback() {
+  return useContext(FeedbackContext) ?? disabledFeedback;
 }
-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" })] });
+export function FeedbackBug({
+  wiggle = 0
+}) {
+  useLocaleRevision();
+  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
+}) {
+  useLocaleRevision();
+  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" ? _i18n._(
+      /** i18n */
+      {
+        id: "hV3yAb",
+        message: "Report a problem"
+      }) : _i18n._(
+      /** i18n */
+      {
+        id: "RoafuO",
+        message: "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;
+export function FeedbackProvider({
+  endpoint: configuredEndpoint,
+  application,
+  turnstileSiteKey,
+  collectionName,
+  children
+}) {
+  useLocaleRevision();
+  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);
     }
-    function close() {
-        if (submitting)
-            return;
-        imageOperation.current?.abort();
-        imageOperation.current = null;
+  }, [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(_i18n._(
+        /** i18n */
+        {
+          id: "25QKdy",
+          message: "Screenshot captured. Sharing has stopped."
+        }));
+      }
+    } catch (reason) {
+      if (!controller.signal.aborted && live.current) {
+        if (reason instanceof DOMException && (reason.name === "NotAllowedError" || reason.name === "AbortError")) setCaptureStatus(_i18n._(
+        /** i18n */
+        {
+          id: "EfTCex",
+          message: "No screenshot taken. You can still send feedback."
+        }));else setScreenshotError(reason instanceof Error ? reason.message : _i18n._(
+        /** i18n */
+        {
+          id: "6vUPNB",
+          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);
-        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;
-            }
-        }
+        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 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 : _i18n._(
+      /** i18n */
+      {
+        id: "9mrfxN",
+        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);
-            }
+  }
+  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 ? _i18n._(
+      /** i18n */
+      {
+        id: "OQBR5K",
+        message: "Sending timed out. Please try again."
+      }) : reason instanceof Error ? reason.message : _i18n._(
+      /** i18n */
+      {
+        id: "mRd7qL",
+        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", { className: "mdbase-checkbox", 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", { className: "mdbase-checkbox", 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", { className: "mdbase-checkbox", 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."); } })] });
+  }
+  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 ? _i18n._(
+      /** i18n */
+      {
+        id: "7qrUoz",
+        message: "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: _i18n._(
+          /** i18n */
+          {
+            id: "RoafuO",
+            message: "Send feedback"
+          })
+        }), _jsx("button", {
+          type: "button",
+          disabled: submitting,
+          onClick: close,
+          "aria-label": _i18n._(
+          /** i18n */
+          {
+            id: "lnj9gP",
+            message: "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: _i18n._(
+          /** i18n */
+          {
+            id: "tHdrmM",
+            message: "Sent privately to the mdbase team."
+          })
+        }), _jsx("button", {
+          type: "button",
+          className: "mdbase-feedback-primary",
+          onClick: close,
+          children: _i18n._(
+          /** i18n */
+          {
+            id: "9yK4bJ",
+            message: "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: _i18n._(
+              /** i18n */
+              {
+                id: "88u4WE",
+                message: "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: [_i18n._(
+              /** i18n */
+              {
+                id: "zVYLbq",
+                message: "Reply email"
+              }), " ", _jsx("small", {
+                children: _i18n._(
+                /** i18n */
+                {
+                  id: "LLAa_9",
+                  message: "Optional"
+                })
+              })]
+            }), _jsx("input", {
+              type: "email",
+              maxLength: 320,
+              autoComplete: "email",
+              placeholder: _i18n._(
+              /** i18n */
+              {
+                id: "njBr8W",
+                message: "you@example.com"
+              }),
+              value: replyEmail,
+              disabled: submitting,
+              onChange: event => setReplyEmail(event.target.value)
+            })]
+          }), _jsxs("div", {
+            className: "mdbase-feedback-screenshot",
+            role: "group",
+            "aria-label": _i18n._(
+            /** i18n */
+            {
+              id: "IxyZXD",
+              message: "Screenshot"
+            }),
+            children: [screenshot && _jsxs(_Fragment, {
+              children: [_jsxs("button", {
+                className: "mdbase-feedback-preview",
+                type: "button",
+                disabled: imageBusy || submitting,
+                onClick: () => {
+                  setIncludeScreenshot(false);
+                  setMarkup(true);
+                },
+                "aria-label": _i18n._(
+                /** i18n */
+                {
+                  id: "wsx-_Y",
+                  message: "Mark up screenshot"
+                }),
+                children: [_jsx("img", {
+                  src: screenshotUrl(screenshot),
+                  alt: _i18n._(
+                  /** i18n */
+                  {
+                    id: "Nj4zfV",
+                    message: "Screenshot attached to your feedback"
+                  })
+                }), _jsx("span", {
+                  children: _i18n._(
+                  /** i18n */
+                  {
+                    id: "wsx-_Y",
+                    message: "Mark up screenshot"
+                  })
+                })]
+              }), _jsxs("div", {
+                className: "mdbase-feedback-screenshot-actions",
+                children: [_jsxs("label", {
+                  children: [_jsx("input", {
+                    className: "mdbase-checkbox",
+                    type: "checkbox",
+                    checked: includeScreenshot,
+                    disabled: submitting,
+                    onChange: event => setIncludeScreenshot(event.target.checked)
+                  }), _i18n._(
+                  /** i18n */
+                  {
+                    id: "GnOlBF",
+                    message: "Include screenshot"
+                  })]
+                }), _jsx("button", {
+                  type: "button",
+                  disabled: imageBusy || submitting,
+                  onClick: () => {
+                    setScreenshot(null);
+                    setScreenshotError("");
+                    setCaptureStatus("");
+                  },
+                  children: _i18n._(
+                  /** i18n */
+                  {
+                    id: "t_YqKh",
+                    message: "Remove"
+                  })
+                })]
+              })]
+            }), _jsxs("div", {
+              className: "mdbase-feedback-screenshot-actions",
+              children: [_jsx("button", {
+                type: "button",
+                disabled: imageBusy || submitting,
+                onClick: () => void capture(),
+                children: capturing ? _i18n._(
+                /** i18n */
+                {
+                  id: "DJxqCW",
+                  message: "Taking screenshot\u2026"
+                }) : screenshot ? _i18n._(
+                /** i18n */
+                {
+                  id: "CRx2Ry",
+                  message: "Retake screenshot"
+                }) : _i18n._(
+                /** i18n */
+                {
+                  id: "Arxv23",
+                  message: "Attach screenshot"
+                })
+              }), _jsxs("label", {
+                className: "mdbase-feedback-upload",
+                children: [_jsx("span", {
+                  children: _i18n._(
+                  /** i18n */
+                  {
+                    id: "BOOryO",
+                    message: "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: _i18n._(
+              /** i18n */
+              {
+                id: "VBhfTn",
+                message: "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: _i18n._(
+              /** i18n */
+              {
+                id: "B5v8nx",
+                message: "What gets sent"
+              })
+            }), _jsx("p", {
+              className: "mdbase-feedback-help",
+              children: _i18n._(
+              /** i18n */
+              {
+                id: "HVAS1o",
+                message: "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", {
+                className: "mdbase-checkbox",
+                type: "checkbox",
+                checked: includeCollection,
+                disabled: submitting,
+                onChange: event => setIncludeCollection(event.target.checked)
+              }), _i18n._(
+              /** i18n */
+              {
+                id: "A--pCj",
+                message: "Include collection name:"
+              }), " ", collectionName]
+            }), topic === "problem" && _jsxs(_Fragment, {
+              children: [_jsxs("label", {
+                className: "mdbase-feedback-check",
+                children: [_jsx("input", {
+                  className: "mdbase-checkbox",
+                  type: "checkbox",
+                  checked: includeDiagnostics,
+                  disabled: submitting,
+                  onChange: event => setIncludeDiagnostics(event.target.checked)
+                }), _i18n._(
+                /** i18n */
+                {
+                  id: "7-61s4",
+                  message: "Include technical diagnostics"
+                })]
+              }), _jsx("p", {
+                className: "mdbase-feedback-help",
+                children: _i18n._(
+                /** i18n */
+                {
+                  id: "-ujXuR",
+                  message: "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: _i18n._(
+              /** i18n */
+              {
+                id: "ZyjhMF",
+                message: "Images: PNG or JPEG, up to 3 MB. Blackout replaces pixels; only the final image is attached."
+              })
+            }), _jsx("p", {
+              className: "mdbase-feedback-help",
+              children: _i18n._(
+              /** i18n */
+              {
+                id: "i5ZjUk",
+                message: "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: _i18n._(
+            /** i18n */
+            {
+              id: "UfEFtR",
+              message: "Private feedback to the mdbase team."
+            })
+          })]
+        }), _jsxs("footer", {
+          className: "mdbase-feedback-actions",
+          children: [_jsx("button", {
+            type: "button",
+            disabled: submitting,
+            onClick: close,
+            children: _i18n._(
+            /** i18n */
+            {
+              id: "dEgA5A",
+              message: "Cancel"
+            })
+          }), _jsx("button", {
+            type: "submit",
+            className: "mdbase-feedback-primary",
+            disabled: submitting || imageBusy || !message.trim() || Boolean(turnstileSiteKey && !turnstileToken),
+            children: submitting ? _i18n._(
+            /** i18n */
+            {
+              id: "Sad2tK",
+              message: "Sending\u2026"
+            }) : _i18n._(
+            /** i18n */
+            {
+              id: "RoafuO",
+              message: "Send feedback"
+            })
+          })]
+        })]
+      })]
+    }), markup && screenshot && _jsx(FeedbackMarkup, {
+      screenshot: screenshot,
+      onClose: () => {
+        setMarkup(false);
+        setCaptureStatus(_i18n._(
+        /** i18n */
+        {
+          id: "15fVx1",
+          message: "Markup discarded. Screenshot excluded."
+        }));
+      },
+      onApply: (next, count) => {
+        setScreenshot(next);
+        setIncludeScreenshot(true);
+        setMarkup(false);
+        setCaptureStatus(_i18n._(
+        /** i18n */
+        {
+          id: "ITLqil",
+          message: "{count, plural, one {# mark applied.} other {# marks applied.}}",
+          values: {
+            count: count
+          }
+        }));
+      }
+    })]
+  });
 }