create-safest-tools 0.2.0

package/template/public/customer-brand.js

@@ -0,0 +1,58 @@
+(function customerBrandRuntime(global) {
+  const fallback = {
+    organization_name: "Safest Resolve", logo_url: "", logo_alt: "",
+    primary_color: "#154e3a", primary_contrast_color: "#ffffff", accent_color: "#cbef68",
+    background_color: "#f5f6f1", surface_color: "#ffffff", text_color: "#14231c",
+    muted_color: "#637168", border_color: "#dfe6e0",
+    body_font_family: '"Safest Sans", Manrope, ui-sans-serif, system-ui, sans-serif',
+    heading_font_family: '"Safest Serif", Newsreader, Georgia, serif', font_css_url: "", border_radius: 12,
+  };
+
+  function initials(value) {
+    return String(value || "SR").split(/\s+/u).slice(0, 2).map((part) => part[0] || "").join("").toUpperCase();
+  }
+
+  function applyBrand(value, options = {}) {
+    const brand = { ...fallback, ...(value || {}) };
+    const defaultLogo = !brand.logo_url && brand.organization_name.trim().toLowerCase() === "safest resolve";
+    const logoUrl = brand.logo_url || (defaultLogo ? "/brand-icon.svg" : "");
+    const logoAlt = brand.logo_alt || (defaultLogo ? "Safest Resolve logo" : `${brand.organization_name} logo`);
+    const root = document.documentElement;
+    const variables = {
+      "--forest": brand.primary_color, "--forest-dark": brand.primary_color,
+      "--brand-primary-contrast": brand.primary_contrast_color, "--brand-accent": brand.accent_color,
+      "--canvas": brand.background_color, "--paper": brand.surface_color, "--ink": brand.text_color,
+      "--muted": brand.muted_color, "--line": brand.border_color,
+      "--sans": brand.body_font_family, "--serif": brand.heading_font_family,
+      "--customer-radius": `${brand.border_radius}px`,
+    };
+    for (const [name, child] of Object.entries(variables)) root.style.setProperty(name, child);
+    for (const node of document.querySelectorAll("[data-customer-brand-name]")) node.textContent = brand.organization_name;
+    for (const node of document.querySelectorAll("[data-customer-brand-fallback]")) node.textContent = initials(brand.organization_name);
+    for (const image of document.querySelectorAll("[data-customer-logo]")) {
+      image.hidden = !logoUrl;
+      if (logoUrl) { image.src = logoUrl; image.alt = logoAlt; }
+    }
+    for (const node of document.querySelectorAll("[data-customer-logo-fallback]")) node.hidden = Boolean(logoUrl);
+    document.querySelector("link[data-customer-font]")?.remove();
+    if (brand.font_css_url) {
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = brand.font_css_url;
+      link.dataset.customerFont = "true";
+      document.head.append(link);
+    }
+    if (options.title) document.title = `${options.title} — ${brand.organization_name}`;
+    global.dispatchEvent(new CustomEvent("safest-brand-applied", { detail: { brand } }));
+    return brand;
+  }
+
+  async function loadBrand(path = "/v1/brand", options = {}) {
+    const response = await fetch(path, { headers: { accept: "application/json" }, credentials: "omit", referrerPolicy: "no-referrer" });
+    const result = await response.json().catch(() => ({}));
+    if (!response.ok) throw new Error(result?.error?.message || "Brand settings are unavailable.");
+    return applyBrand(result.brand, options);
+  }
+
+  global.SafestBrand = { applyBrand, loadBrand, defaults: fallback };
+})(globalThis);

package/template/public/embed/embed.css

@@ -0,0 +1,139 @@
+@font-face { font-family: Manrope; src: url("/fonts/Manrope-Variable.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
+@font-face { font-family: Newsreader; src: url("/fonts/Newsreader-Variable.ttf") format("truetype"); font-weight: 300 700; font-display: swap; }
+
+:root {
+  color-scheme: light;
+  --primary: #184c3d;
+  --on-primary: #fffdf7;
+  --accent: #d47a3b;
+  --page: #f6f8f5;
+  --surface: #fffdf9;
+  --text: #18221d;
+  --muted: #65736c;
+  --line: #dbe4de;
+  --radius: 20px;
+  --body: Manrope, ui-sans-serif, system-ui, sans-serif;
+  --heading: Newsreader, Georgia, serif;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+html { background: transparent; scrollbar-gutter: stable; }
+body { margin: 0; min-width: 280px; background: transparent; color: var(--text); font-family: var(--body); -webkit-font-smoothing: antialiased; }
+button, input, select, textarea { font: inherit; }
+button, a { -webkit-tap-highlight-color: transparent; }
+[hidden] { display: none !important; }
+
+.report-card { min-height: 100vh; padding: 0 0 4px; background: var(--surface); }
+.card-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px 16px; border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent); }
+.brand { display: flex; align-items: center; min-width: 0; gap: 10px; }
+.brand img, .brand-fallback { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; object-fit: contain; }
+.brand-fallback { display: grid; place-items: center; background: var(--primary); color: var(--on-primary); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
+.brand-copy { display: grid; min-width: 0; }
+.brand-copy strong { overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
+.brand-copy small { color: var(--muted); font-size: 10px; }
+.privacy-mark { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--primary) 5%, var(--surface)); color: var(--primary); font-size: 10px; font-weight: 750; }
+.privacy-mark span { font-size: 7px; }
+
+form { padding: 26px 28px 24px; }
+.intro { max-width: 560px; }
+.eyebrow { margin: 0 0 7px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
+h1 { margin: 0; color: var(--text); font-family: var(--heading); font-size: clamp(28px, 5vw, 39px); font-weight: 560; letter-spacing: -.025em; line-height: 1.02; }
+.intro > p:last-child { margin: 11px 0 0; max-width: 54ch; color: var(--muted); font-size: 13px; line-height: 1.55; }
+
+.trust-note { display: flex; gap: 11px; margin: 22px 0 8px; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--line)); border-radius: calc(var(--radius) * .72); background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
+.trust-icon { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 12px; font-weight: 900; }
+.trust-note div { display: grid; gap: 2px; }
+.trust-note strong { color: var(--text); font-size: 12px; }
+.trust-note p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
+
+.form-section { margin-top: 27px; padding-top: 25px; border-top: 1px solid var(--line); }
+.section-heading { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; }
+.section-heading > span { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--line)); border-radius: 8px; color: var(--primary); font-size: 10px; font-weight: 850; }
+.section-heading h2 { margin: 1px 0 2px; color: var(--text); font-size: 14px; font-weight: 760; letter-spacing: -.01em; }
+.section-heading p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
+
+fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
+.reason-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
+.reason-option { position: relative; display: flex; min-height: 48px; cursor: pointer; }
+.reason-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
+.reason-option span { display: flex; align-items: center; width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: calc(var(--radius) * .65); background: var(--surface); color: var(--text); font-size: 12px; font-weight: 650; line-height: 1.3; transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease; }
+.reason-option span::before { content: ""; width: 12px; height: 12px; margin-right: 9px; flex: 0 0 auto; border: 1.5px solid color-mix(in srgb, var(--muted) 55%, var(--line)); border-radius: 50%; box-shadow: inset 0 0 0 3px var(--surface); }
+.reason-option:hover span { border-color: color-mix(in srgb, var(--primary) 32%, var(--line)); transform: translateY(-1px); }
+.reason-option input:checked + span { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 9%, transparent); }
+.reason-option input:checked + span::before { border-color: var(--primary); background: var(--primary); }
+.reason-option input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--primary) 24%, transparent); outline-offset: 2px; }
+
+.answer-fields { display: grid; gap: 13px; }
+.answer-field { display: grid; gap: 6px; color: var(--text); font-size: 11px; font-weight: 700; }
+.answer-field .field-label { display: flex; justify-content: space-between; gap: 12px; }
+.answer-field .optional { color: var(--muted); font-size: 9px; font-weight: 600; }
+.answer-field small { color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.45; }
+input[type="text"], input[type="email"], input[type="url"], input[type="number"], select, textarea { width: 100%; border: 1px solid var(--line); border-radius: calc(var(--radius) * .65); background: color-mix(in srgb, var(--page) 45%, var(--surface)); color: var(--text); outline: none; transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease; }
+input[type="text"], input[type="email"], input[type="url"], input[type="number"], select { min-height: 44px; padding: 10px 12px; }
+textarea { min-height: 118px; resize: vertical; padding: 12px; line-height: 1.55; }
+input:focus, select:focus, textarea:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
+
+.contact-section { margin: 20px 0 2px; padding: 15px; border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line)); border-radius: calc(var(--radius) * .72); background: color-mix(in srgb, var(--primary) 4%, var(--surface)); }
+.contact-section label { display: grid; gap: 7px; }
+.contact-section .field-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text); font-size: 12px; }
+.contact-section .field-label > span { color: var(--primary); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
+.contact-section small { color: var(--muted); font-size: 10px; line-height: 1.5; }
+
+.choices { display: grid; gap: 7px; }
+.choice { display: flex; align-items: flex-start; gap: 8px; font-weight: 560; }
+.choice input { margin-top: 2px; accent-color: var(--primary); }
+.turnstile-mount { min-height: 0; overflow: hidden; }
+.verification-status { margin: 8px 0 12px 35px; color: var(--muted); font-size: 10px; }
+.verification-status.verified { color: var(--primary); font-weight: 700; }
+.consent-card { display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; border: 1px solid var(--line); border-radius: calc(var(--radius) * .7); background: color-mix(in srgb, var(--page) 52%, var(--surface)); cursor: pointer; }
+.consent-card input { width: 17px; height: 17px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--primary); }
+.consent-card span { display: grid; gap: 2px; }
+.consent-card strong { font-size: 11px; }
+.consent-card small { color: var(--muted); font-size: 9px; font-weight: 500; line-height: 1.45; }
+
+.form-error { min-height: 18px; margin: 14px 0 0; color: #a33b34; font-size: 11px; font-weight: 650; line-height: 1.45; }
+.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; margin-top: 8px; }
+button, .link-button { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; border: 0; border-radius: 999px; padding: 10px 17px; text-decoration: none; cursor: pointer; transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease; }
+button:focus-visible, .link-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 25%, transparent); outline-offset: 3px; }
+.primary { background: var(--primary); color: var(--on-primary); font-weight: 760; box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 20%, transparent); }
+.primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 26%, transparent); }
+.primary:disabled { cursor: wait; opacity: .62; transform: none; box-shadow: none; }
+.quiet, .secondary { background: transparent; color: var(--muted); font-weight: 680; }
+.secondary { border: 1px solid var(--line); background: var(--surface); color: var(--text); }
+.privacy-footer { margin: 14px 0 0; color: var(--muted); font-size: 9px; text-align: center; }
+
+.state-view { display: grid; min-height: 390px; place-content: center; justify-items: center; padding: 42px 28px; text-align: center; }
+.state-view p { max-width: 46ch; overflow-wrap: anywhere; color: var(--muted); font-size: 12px; line-height: 1.55; }
+.spinner { width: 30px; height: 30px; margin-bottom: 10px; border: 3px solid color-mix(in srgb, var(--primary) 16%, transparent); border-top-color: var(--primary); border-radius: 50%; animation: spin 800ms linear infinite; }
+.state-icon, .success-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 50%; font-size: 21px; font-weight: 850; }
+.state-icon { background: #fff0ed; color: #a33b34; }
+.success-icon { background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary); }
+.success-view h1 { max-width: 13ch; }
+.success-view > p:not(.eyebrow):not(.notification-reminder) { margin: 13px 0 20px; }
+.reference-card { display: flex; align-items: center; gap: 10px; width: min(100%, 430px); margin-bottom: 14px; padding: 11px 12px 11px 14px; border: 1px solid var(--line); border-radius: calc(var(--radius) * .7); background: color-mix(in srgb, var(--page) 56%, var(--surface)); text-align: left; }
+.reference-card span { color: var(--muted); font-size: 9px; }
+.reference-card strong { min-width: 0; flex: 1; overflow-wrap: anywhere; font-size: 11px; letter-spacing: .02em; }
+.reference-card button { min-height: 30px; padding: 6px 10px; background: var(--surface); color: var(--primary); font-size: 9px; font-weight: 750; }
+.notification-reminder { display: flex; align-items: flex-start; gap: 7px; margin: 1px 0 18px; color: var(--muted); font-size: 9px !important; text-align: left; }
+.notification-reminder span { margin-top: 4px; color: var(--accent); font-size: 6px; }
+.finish-button { width: min(100%, 430px); }
+
+.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+body.compact .card-header { padding-inline: 18px; }
+body.compact form { padding: 22px 18px 20px; }
+body.compact .reason-grid { grid-template-columns: 1fr; }
+body.compact .privacy-mark { display: none; }
+body.compact .form-actions { justify-content: stretch; }
+body.compact .form-actions button { flex: 1; }
+
+@keyframes spin { to { transform: rotate(1turn); } }
+@media (max-width: 430px) {
+  .card-header { padding-inline: 18px; }
+  form { padding: 22px 18px 20px; }
+  .reason-grid { grid-template-columns: 1fr; }
+  .privacy-mark { display: none; }
+  .state-view { min-height: 340px; padding: 34px 18px; }
+  .reference-card { align-items: flex-start; flex-wrap: wrap; }
+  .reference-card strong { width: calc(100% - 80px); }
+}
+@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

package/template/public/embed/embed.js

@@ -0,0 +1,408 @@
+const MESSAGE_VERSION = 1;
+const query = new URLSearchParams(location.search);
+const integrationId = query.get("integration_id") || "";
+const formVersion = query.get("form_version") || "general-v1";
+const preview = query.get("preview") === "1";
+let parentOrigin = "";
+try { parentOrigin = new URL(query.get("parent_origin") || "").origin; } catch { parentOrigin = ""; }
+
+const elements = Object.fromEntries([...document.querySelectorAll("[id]")].map((element) => [element.id.replaceAll("-", "_"), element]));
+const state = {
+  config: null,
+  mode: "contextual",
+  contextToken: "",
+  target: null,
+  turnstileToken: "",
+  turnstileId: null,
+  submitting: false,
+  pendingSubmit: false,
+  verificationTimer: null,
+  idempotencyKey: crypto.randomUUID(),
+};
+
+function post(message) {
+  if (!parentOrigin || parent === globalThis) return;
+  parent.postMessage({ version: MESSAGE_VERSION, ...message }, parentOrigin);
+}
+
+function readable(value) {
+  return String(value || "").replaceAll("_", " ").replace(/\b\w/gu, (letter) => letter.toUpperCase());
+}
+
+function initials(value) {
+  return String(value || "SR").split(/\s+/u).slice(0, 2).map((part) => part[0] || "").join("").toUpperCase();
+}
+
+function applyBrand(brand = {}) {
+  const variables = {
+    "--primary": brand.primary_color,
+    "--on-primary": brand.primary_contrast_color,
+    "--accent": brand.accent_color,
+    "--page": brand.background_color,
+    "--surface": brand.surface_color,
+    "--text": brand.text_color,
+    "--muted": brand.muted_color,
+    "--line": brand.border_color,
+    "--body": brand.body_font_family,
+    "--heading": brand.heading_font_family,
+    "--radius": Number.isInteger(brand.border_radius) ? `${brand.border_radius}px` : undefined,
+  };
+  for (const [key, value] of Object.entries(variables)) if (value) document.documentElement.style.setProperty(key, value);
+  const name = brand.organization_name || "Safest Resolve";
+  elements.brand_name.textContent = name;
+  elements.brand_fallback.textContent = initials(name);
+  elements.brand_logo.hidden = !brand.logo_url;
+  elements.brand_fallback.hidden = Boolean(brand.logo_url);
+  if (brand.logo_url) { elements.brand_logo.src = brand.logo_url; elements.brand_logo.alt = brand.logo_alt || `${name} logo`; }
+}
+
+function option(value, label) {
+  const item = document.createElement("option");
+  item.value = value;
+  item.textContent = label;
+  return item;
+}
+
+function fieldLabel(definition) {
+  const header = document.createElement("span");
+  header.className = "field-label";
+  const label = document.createElement("span");
+  label.textContent = definition.label || readable(definition.key);
+  header.append(label);
+  if (!definition.required) {
+    const optional = document.createElement("span");
+    optional.className = "optional";
+    optional.textContent = "Optional";
+    header.append(optional);
+  }
+  return header;
+}
+
+function answerField(definition) {
+  const key = String(definition.key);
+  const wrapper = document.createElement(definition.type === "multi_select" ? "fieldset" : "label");
+  wrapper.className = "answer-field";
+  wrapper.dataset.answerKey = key;
+  if (wrapper instanceof HTMLFieldSetElement) {
+    const legend = document.createElement("legend");
+    legend.append(fieldLabel(definition));
+    wrapper.append(legend);
+  } else wrapper.append(fieldLabel(definition));
+  if (definition.help_text) {
+    const help = document.createElement("small");
+    help.textContent = definition.help_text;
+    wrapper.append(help);
+  }
+  let control;
+  if (definition.type === "long_text") control = document.createElement("textarea");
+  else if (definition.type === "select" || definition.type === "boolean") {
+    control = document.createElement("select");
+    control.append(option("", "Choose an option"));
+    const choices = definition.type === "boolean"
+      ? [{ value: "true", label: "Yes" }, { value: "false", label: "No" }]
+      : definition.options || [];
+    for (const choice of choices) control.append(option(choice.value, choice.label));
+  } else if (definition.type === "multi_select") {
+    control = document.createElement("div");
+    control.className = "choices";
+    for (const choice of definition.options || []) {
+      const label = document.createElement("label");
+      label.className = "choice";
+      const input = document.createElement("input");
+      input.type = "checkbox";
+      input.name = `answer-${key}`;
+      input.value = choice.value;
+      label.append(input, document.createTextNode(choice.label));
+      control.append(label);
+    }
+  } else {
+    control = document.createElement("input");
+    control.type = definition.type === "number" ? "number" : definition.type === "url" ? "url" : "text";
+  }
+  control.dataset.answerControl = key;
+  if (control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement || control instanceof HTMLSelectElement) {
+    control.name = `answer-${key}`;
+    control.required = definition.required === true;
+    if (definition.placeholder) control.placeholder = definition.placeholder;
+    if (definition.max_length) control.maxLength = Number(definition.max_length);
+    if (definition.type === "number") {
+      if (definition.min_value !== undefined) control.min = String(definition.min_value);
+      if (definition.max_value !== undefined) control.max = String(definition.max_value);
+    }
+  }
+  wrapper.append(control);
+  return wrapper;
+}
+
+function collectAnswers() {
+  const answers = {};
+  for (const definition of state.config.form.fields || []) {
+    const key = String(definition.key);
+    const wrapper = elements.answer_fields.querySelector(`[data-answer-key="${CSS.escape(key)}"]`);
+    let value;
+    if (definition.type === "multi_select") value = [...wrapper.querySelectorAll("input:checked")].map((input) => input.value);
+    else {
+      const control = wrapper.querySelector("[data-answer-control]");
+      if (definition.type === "number") value = control.value === "" ? undefined : control.valueAsNumber;
+      else if (definition.type === "boolean") value = control.value === "" ? undefined : control.value === "true";
+      else value = control.value.trim();
+    }
+    const missing = value === undefined || value === "" || Array.isArray(value) && value.length === 0;
+    if (definition.required && missing) {
+      wrapper.querySelector("input, select, textarea")?.focus();
+      throw new Error(`${definition.label || readable(key)} is required.`);
+    }
+    if (!missing) answers[key] = value;
+  }
+  return answers;
+}
+
+async function contextDigest(token) {
+  const bytes = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(token));
+  return [...new Uint8Array(bytes)].map((byte) => byte.toString(16).padStart(2, "0")).join("");
+}
+
+async function waitForTurnstile() {
+  for (let attempt = 0; attempt < 120; attempt += 1) {
+    if (typeof globalThis.turnstile?.render === "function") return globalThis.turnstile;
+    await new Promise((resolve) => setTimeout(resolve, 50));
+  }
+  throw new Error("Human verification could not be loaded. Check your connection and try again.");
+}
+
+async function prepareTurnstile() {
+  if (preview || state.turnstileId !== null || !state.config) return;
+  if (state.mode === "contextual" && !state.contextToken) return;
+  const turnstile = await waitForTurnstile();
+  const options = {
+    sitekey: state.config.human_verification.site_key,
+    action: state.mode === "contextual" ? "widget_report_submit" : "anonymous_report_submit",
+    appearance: "interaction-only",
+    execution: "execute",
+    size: "flexible",
+    callback: (token) => {
+      clearTimeout(state.verificationTimer);
+      state.verificationTimer = null;
+      state.turnstileToken = token;
+      elements.verification_status.textContent = "Human verification complete.";
+      elements.verification_status.classList.add("verified");
+      if (state.pendingSubmit) void submitReport();
+    },
+    "expired-callback": () => {
+      clearTimeout(state.verificationTimer);
+      state.verificationTimer = null;
+      state.turnstileToken = "";
+      elements.verification_status.textContent = "Verification expired. It will run again when you submit.";
+      elements.verification_status.classList.remove("verified");
+    },
+    "error-callback": () => {
+      clearTimeout(state.verificationTimer);
+      state.verificationTimer = null;
+      state.turnstileToken = "";
+      state.pendingSubmit = false;
+      setBusy(false);
+      showFormError("Human verification could not finish. Check your connection and try again.");
+    },
+  };
+  if (state.mode === "contextual") options.cData = await contextDigest(state.contextToken);
+  state.turnstileId = turnstile.render(elements.turnstile_mount, options);
+}
+
+function resetTurnstile() {
+  clearTimeout(state.verificationTimer);
+  state.verificationTimer = null;
+  state.turnstileToken = "";
+  state.pendingSubmit = false;
+  elements.verification_status.textContent = "Human verification will run when you submit.";
+  elements.verification_status.classList.remove("verified");
+  if (state.turnstileId !== null && globalThis.turnstile?.reset) globalThis.turnstile.reset(state.turnstileId);
+}
+
+function setBusy(busy, label = "Sending report…") {
+  state.submitting = busy;
+  elements.submit_report.disabled = busy;
+  elements.cancel_report.disabled = busy;
+  elements.submit_report.querySelector("span").textContent = busy ? label : "Send report";
+}
+
+function showFormError(message) {
+  elements.form_error.textContent = message;
+  if (message) elements.form_error.focus();
+}
+
+function renderConfig(config) {
+  state.config = config;
+  state.mode = config.mode === "anonymous" ? "anonymous" : "contextual";
+  applyBrand(config.brand);
+  elements.form_title.textContent = config.form.title || "Report a safety concern";
+  elements.form_description.textContent = config.form.description || "Tell the safety team what happened.";
+  elements.consent_notice.textContent = config.form.consent_notice;
+  elements.mode_label.textContent = state.mode === "anonymous" ? "Anonymous report" : "Private report";
+  elements.trust_title.textContent = state.mode === "anonymous" ? "No account identity is attached" : "Right item, private answers";
+  elements.trust_copy.textContent = state.mode === "anonymous"
+    ? "The service receives what you write and your contact email, but it does not claim the email proves who you are."
+    : "This app securely attached the selected item. Only authorized reviewers can read what you write.";
+  elements.contact_section.hidden = state.mode !== "anonymous";
+  elements.reporter_email.required = state.mode === "anonymous";
+  elements.reason_options.replaceChildren(...config.form.reasons.map((reason, index) => {
+    const label = document.createElement("label");
+    label.className = "reason-option";
+    const input = document.createElement("input");
+    input.type = "radio";
+    input.name = "reason";
+    input.value = reason.code;
+    input.required = true;
+    if (index === 0) input.checked = true;
+    const copy = document.createElement("span");
+    copy.textContent = reason.label;
+    label.append(input, copy);
+    return label;
+  }));
+  elements.answer_fields.replaceChildren(...(config.form.fields || []).map(answerField));
+  elements.loading_view.hidden = true;
+  elements.error_view.hidden = true;
+  elements.report_form.hidden = false;
+  if (preview) {
+    elements.submit_report.disabled = true;
+    elements.submit_report.querySelector("span").textContent = "Preview only";
+    elements.verification_status.textContent = "Human verification appears here in the live channel.";
+  }
+}
+
+async function loadConfig() {
+  elements.loading_view.hidden = false;
+  elements.error_view.hidden = true;
+  elements.report_form.hidden = true;
+  try {
+    const url = new URL("/v1/widget/config", location.origin);
+    url.searchParams.set("integration_id", integrationId);
+    url.searchParams.set("form_version", formVersion);
+    const response = await fetch(url, { headers: { accept: "application/json" }, credentials: "omit", referrerPolicy: "no-referrer" });
+    const result = await response.json().catch(() => ({}));
+    if (!response.ok) throw new Error(result?.error?.message || "This reporting channel is unavailable.");
+    renderConfig(result);
+    post({ type: "safest-resolve:ready", mode: state.mode });
+  } catch (error) {
+    elements.loading_view.hidden = true;
+    elements.error_view.hidden = false;
+    elements.setup_error.textContent = error instanceof Error ? error.message : "This reporting channel is unavailable.";
+  }
+}
+
+async function submitReport() {
+  if (state.submitting && !state.pendingSubmit) return;
+  showFormError("");
+  let answers;
+  try {
+    if (!elements.report_form.reportValidity()) throw new Error("Complete the required fields before sending.");
+    answers = collectAnswers();
+    if (!elements.consent.checked) throw new Error("Confirm that you are ready to send this report.");
+    if (state.mode === "contextual" && !state.contextToken) throw new Error("The secure report connection is not ready yet.");
+    if (state.mode === "anonymous" && (!state.target?.type || !state.target?.reference)) throw new Error("The application did not provide the item being reported.");
+  } catch (error) {
+    showFormError(error instanceof Error ? error.message : "Complete the required fields before sending.");
+    return;
+  }
+  if (!state.turnstileToken) {
+    state.pendingSubmit = true;
+    setBusy(true, "Checking…");
+    elements.verification_status.textContent = "Checking this submission…";
+    try {
+      await prepareTurnstile();
+      state.verificationTimer = setTimeout(() => {
+        state.pendingSubmit = false;
+        setBusy(false);
+        resetTurnstile();
+        showFormError("Human verification took too long. Check your connection and try again.");
+      }, 15_000);
+      globalThis.turnstile.execute(state.turnstileId);
+    } catch (error) {
+      state.pendingSubmit = false;
+      setBusy(false);
+      showFormError(error instanceof Error ? error.message : "Human verification could not start.");
+    }
+    return;
+  }
+  state.pendingSubmit = false;
+  setBusy(true, "Sending report…");
+  const now = new Date().toISOString();
+  const body = {
+    schema_version: "1",
+    idempotency_key: state.idempotencyKey,
+    source: state.mode === "contextual" ? "signed_widget" : "public_page",
+    form_version: state.config.form.id,
+    reason_code: elements.report_form.elements.reason.value,
+    answers,
+    evidence: { mode: "reference_only", references: [] },
+    locale: document.documentElement.lang || "en",
+    consent: { notice: state.config.form.consent_notice, accepted_at: now },
+    submitted_at: now,
+    turnstile_token: state.turnstileToken,
+  };
+  let endpoint = "/v1/reports/anonymous";
+  if (state.mode === "contextual") {
+    endpoint = "/v1/reports";
+    body.context_token = state.contextToken;
+  } else {
+    body.integration_id = integrationId;
+    body.target = state.target;
+    body.reporter = { email: elements.reporter_email.value.trim() };
+  }
+  try {
+    const response = await fetch(endpoint, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      credentials: "omit",
+      referrerPolicy: "no-referrer",
+      body: JSON.stringify(body),
+    });
+    const result = await response.json().catch(() => ({}));
+    if (!response.ok) throw new Error(result?.error?.message || "The report could not be sent.");
+    elements.report_form.hidden = true;
+    elements.success_view.hidden = false;
+    elements.receipt_reference.textContent = result.reference || "";
+    elements.receipt_copy.textContent = state.mode === "anonymous"
+      ? `We’ll send updates to ${elements.reporter_email.value.trim().toLowerCase()}. You can close this window now.`
+      : "You can close this window now. Updates will be sent through the application’s notification channel.";
+    elements.success_view.focus();
+    post({ type: "safest-resolve:submitted", reference: result.reference || "", mode: state.mode });
+  } catch (error) {
+    setBusy(false);
+    resetTurnstile();
+    showFormError(error instanceof Error ? error.message : "The report could not be sent. Try again.");
+  }
+}
+
+elements.report_form.addEventListener("submit", (event) => { event.preventDefault(); void submitReport(); });
+elements.cancel_report.addEventListener("click", () => post({ type: "safest-resolve:cancel" }));
+elements.finish_report.addEventListener("click", () => post({ type: "safest-resolve:cancel" }));
+elements.retry_setup.addEventListener("click", () => void loadConfig());
+elements.copy_reference.addEventListener("click", async () => {
+  try { await navigator.clipboard.writeText(elements.receipt_reference.textContent); elements.copy_reference.textContent = "Copied"; }
+  catch { elements.copy_reference.textContent = "Select to copy"; }
+});
+
+globalThis.addEventListener("message", (event) => {
+  if (!parentOrigin || event.origin !== parentOrigin || event.source !== parent) return;
+  const message = event.data;
+  if (!message || typeof message !== "object" || message.version !== MESSAGE_VERSION || typeof message.type !== "string") return;
+  if (message.type === "safest-resolve:viewport") document.body.classList.toggle("compact", Number(message.width) < 480);
+  if (preview && message.type === "safest-resolve:preview" && message.config && typeof message.config === "object") {
+    renderConfig({ ...state.config, form: message.config, brand: message.brand && typeof message.brand === "object" ? message.brand : state.config?.brand });
+  }
+  if (message.type === "safest-resolve:context") {
+    if (state.mode !== "contextual" || typeof message.contextToken !== "string" || !message.contextToken) return;
+    state.contextToken = message.contextToken;
+    state.target = message.target && typeof message.target === "object" ? message.target : null;
+    elements.verification_status.textContent = "You’re reporting the right item. We’ll check for spam when you send.";
+    void prepareTurnstile().catch((error) => showFormError(error instanceof Error ? error.message : "Human verification could not load."));
+  }
+  if (message.type === "safest-resolve:target" && state.mode === "anonymous") {
+    state.target = message.target && typeof message.target === "object" ? message.target : null;
+    void prepareTurnstile().catch((error) => showFormError(error instanceof Error ? error.message : "Human verification could not load."));
+  }
+  if (message.type === "safest-resolve:context-error") showFormError(typeof message.message === "string" ? message.message : "Secure reporting context was unavailable.");
+});
+
+new ResizeObserver(() => post({ type: "safest-resolve:resize", height: document.documentElement.scrollHeight })).observe(elements.report_card);
+void loadConfig();