@lightworkai.official/debug-capture 0.6.0

package/src/ui/toast.ts

@@ -0,0 +1,138 @@
+/**
+ * A toast the library owns.
+ *
+ * The reporter closes on success, so anything it says in its own footer goes
+ * with it — a ticket was filed and the screen showed nothing. The original
+ * hands this to `sonner`; we cannot, because a host app may use sonner, or
+ * react-toastify, or nothing at all, and a package that picks one imposes it on
+ * everybody.
+ *
+ * So: our own, in its own shadow root, with its own styles. Same reasoning as
+ * the dialog — it drops into pages we do not control, and neither side's CSS
+ * should reach the other.
+ *
+ * A host that already has a toast system suppresses this by calling
+ * `preventDefault()` on the `lw-report-submitted` event and showing its own.
+ */
+const HOST_TAG = "lw-debug-toasts";
+const VISIBLE_MS = 6000;
+
+const CSS = `
+:host { all: initial; }
+.stack {
+  position: fixed; top: 16px; right: 16px; z-index: 2147483001;
+  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", sans-serif;
+}
+.toast {
+  pointer-events: auto; display: flex; align-items: center; gap: 8px;
+  max-width: 380px; padding: 12px 14px; border-radius: 10px;
+  font-size: 14px; line-height: 1.5; color: #0f172a;
+  background: #fff; border: 1px solid #e2e8f0;
+  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
+  animation: in 160ms ease-out;
+}
+.toast[data-tone="success"] { border-left: 3px solid #10b981; }
+.toast[data-tone="error"] { border-left: 3px solid #e11d48; }
+.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
+.toast[data-tone="success"] .dot { background: #10b981; }
+.toast[data-tone="error"] .dot { background: #e11d48; }
+.action {
+  flex: none; cursor: pointer; padding: 5px 10px; margin-left: auto;
+  font: inherit; font-size: 13px; font-weight: 600;
+  color: #fff; background: #0f172a; border: none; border-radius: 7px;
+}
+.action + .close { margin-left: 4px; }
+.close {
+  margin-left: auto; flex: none; cursor: pointer; border: none; background: none;
+  padding: 0 2px; font: inherit; font-size: 16px; line-height: 1; color: #94a3b8;
+}
+@keyframes in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
+`;
+
+let stack: HTMLElement | null = null;
+
+function ensureStack(): HTMLElement | null {
+  if (typeof document === "undefined") return null;
+  if (stack?.isConnected) return stack;
+
+  const host = document.createElement(HOST_TAG);
+  // Excluded from the DOM screenshot fallback, like the dialog — a report
+  // should not photograph the confirmation of the previous report.
+  host.dataset.debugReporter = "true";
+  const root = host.attachShadow({ mode: "open" });
+  const style = document.createElement("style");
+  style.textContent = CSS;
+  const el = document.createElement("div");
+  el.className = "stack";
+  el.setAttribute("role", "status");
+  // Polite, not assertive: this announces a success, and interrupting a screen
+  // reader mid-sentence to do that is rude.
+  el.setAttribute("aria-live", "polite");
+  root.append(style, el);
+  document.body.append(host);
+  stack = el;
+  return el;
+}
+
+export interface ToastAction {
+  label: string;
+  /**
+   * Runs inside the click, so it can open screen capture. That is the whole
+   * point of offering a crash as a toast with a button rather than opening the
+   * reporter on its own: a browser grants capture to a real click and nothing
+   * else.
+   */
+  onClick: () => void;
+}
+
+export function showToast(
+  message: string,
+  tone: "success" | "error" = "success",
+  action?: ToastAction,
+): void {
+  const parent = ensureStack();
+  if (!parent) return;
+
+  const toast = document.createElement("div");
+  toast.className = "toast";
+  toast.dataset.tone = tone;
+
+  const dot = document.createElement("span");
+  dot.className = "dot";
+  const text = document.createElement("span");
+  // textContent: the message can carry a server's error string.
+  text.textContent = message;
+
+  const close = document.createElement("button");
+  close.type = "button";
+  close.className = "close";
+  close.textContent = "✕";
+  close.setAttribute("aria-label", "ปิด");
+
+  const dismiss = () => {
+    window.clearTimeout(timer);
+    toast.remove();
+  };
+  close.addEventListener("click", dismiss);
+  // An error stays until it is read, and so does anything with an action —
+  // a crash invitation that vanishes before it is noticed is a report nobody
+  // ever files.
+  const timer = tone === "error" || action ? 0 : window.setTimeout(dismiss, VISIBLE_MS);
+
+  toast.append(dot, text);
+  if (action) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "action";
+    button.textContent = action.label;
+    button.addEventListener("click", () => {
+      dismiss();
+      action.onClick();
+    });
+    toast.append(button);
+  }
+  toast.append(close);
+  parent.append(toast);
+}