@nodii/onboarding 0.0.1 → 0.1.0-dev.0

package/dist/chunk-SWMIIUXR.js

@@ -0,0 +1,1162 @@
+import { createContactFormState } from './chunk-AFCJLUPK.js';
+import { defaultSpecCache, fetchOnboardingSpec, diffSpecFields } from './chunk-34BQX2KR.js';
+import { createSignupStepper, optionValue } from './chunk-4SWOVHZ2.js';
+import { computePayloadFingerprint, generateIdempotencyKey, submitLead, computeSignupFingerprint, submitSignup } from './chunk-BQCTDU5V.js';
+import { OnboardingBotChallengeError, OnboardingRateLimitError, OnboardingSpecStaleError } from './chunk-AW7W3HAC.js';
+import { loadRecaptcha, executeRecaptcha } from './chunk-7NS7ENJV.js';
+
+// src/widget/dom-utils.ts
+function cssEscape(value) {
+  const g = globalThis;
+  if (g.CSS && typeof g.CSS.escape === "function") {
+    return g.CSS.escape(value);
+  }
+  return value.replace(/[^A-Za-z0-9_-]/g, (ch) => `\\${ch}`);
+}
+function idSelector(id) {
+  return `#${cssEscape(id)}`;
+}
+
+// src/widget/styles.ts
+var DEFAULT_WIDGET_CSS = `
+.nodii-onboarding-widget {
+  --_font: var(--nodii-onboarding-font-family, system-ui, -apple-system, sans-serif);
+  --_primary: var(--nodii-onboarding-primary-color, #2563eb);
+  --_primary-hover: var(--nodii-onboarding-primary-hover, #1d4ed8);
+  --_error: var(--nodii-onboarding-error-color, #dc2626);
+  --_border: var(--nodii-onboarding-border-color, #d1d5db);
+  --_input-bg: var(--nodii-onboarding-input-bg, #fff);
+  --_label: var(--nodii-onboarding-label-color, #374151);
+  --_radius: var(--nodii-onboarding-radius, 6px);
+  --_spacing: var(--nodii-onboarding-spacing, 16px);
+
+  font-family: var(--_font);
+  box-sizing: border-box;
+}
+
+.nodii-onboarding-widget *,
+.nodii-onboarding-widget *::before,
+.nodii-onboarding-widget *::after {
+  box-sizing: inherit;
+}
+
+.nodii-onboarding-field {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--_spacing) * 0.25);
+  margin-bottom: var(--_spacing);
+}
+
+.nodii-onboarding-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--_label);
+}
+
+.nodii-onboarding-label.required::after {
+  content: " *";
+  color: var(--_error);
+}
+
+.nodii-onboarding-input,
+.nodii-onboarding-textarea {
+  width: 100%;
+  padding: calc(var(--_spacing) * 0.5) calc(var(--_spacing) * 0.75);
+  border: 1px solid var(--_border);
+  border-radius: var(--_radius);
+  background: var(--_input-bg);
+  font-family: var(--_font);
+  font-size: 1rem;
+  line-height: 1.5;
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+
+.nodii-onboarding-input:focus,
+.nodii-onboarding-textarea:focus {
+  border-color: var(--_primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--_primary) 20%, transparent);
+}
+
+.nodii-onboarding-input.has-error,
+.nodii-onboarding-textarea.has-error {
+  border-color: var(--_error);
+}
+
+.nodii-onboarding-textarea {
+  min-height: 100px;
+  resize: vertical;
+}
+
+.nodii-onboarding-field-error {
+  font-size: 0.75rem;
+  color: var(--_error);
+  margin-top: 2px;
+}
+
+.nodii-onboarding-server-error {
+  padding: calc(var(--_spacing) * 0.75);
+  border-radius: var(--_radius);
+  background: color-mix(in srgb, var(--_error) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--_error) 30%, transparent);
+  color: var(--_error);
+  font-size: 0.875rem;
+  margin-bottom: var(--_spacing);
+}
+
+.nodii-onboarding-success {
+  padding: var(--_spacing);
+  border-radius: var(--_radius);
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  color: #15803d;
+  font-size: 0.9375rem;
+  text-align: center;
+}
+
+.nodii-onboarding-submit-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: calc(var(--_spacing) * 0.625) var(--_spacing);
+  background: var(--_primary);
+  color: #fff;
+  border: none;
+  border-radius: var(--_radius);
+  font-family: var(--_font);
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.nodii-onboarding-submit-btn:hover:not(:disabled) {
+  background: var(--_primary-hover);
+}
+
+.nodii-onboarding-submit-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.nodii-onboarding-spinner {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  border: 2px solid rgba(255,255,255,0.4);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: nodii-spin 0.6s linear infinite;
+  margin-right: 0.5em;
+}
+
+@keyframes nodii-spin {
+  to { transform: rotate(360deg); }
+}
+
+.nodii-onboarding-recaptcha-notice {
+  font-size: 0.7rem;
+  color: #6b7280;
+  margin-top: calc(var(--_spacing) * 0.5);
+  text-align: center;
+}
+
+.nodii-onboarding-recaptcha-notice a {
+  color: inherit;
+}
+
+/* \u2500\u2500 dynamic stepper (signup form) \u2500\u2500 */
+
+.nodii-onboarding-steps {
+  display: flex;
+  gap: calc(var(--_spacing) * 0.5);
+  margin-bottom: var(--_spacing);
+}
+
+.nodii-onboarding-step-dot {
+  flex: 1;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--_border);
+}
+
+.nodii-onboarding-step-dot.active {
+  background: var(--_primary);
+}
+
+.nodii-onboarding-stage-title {
+  font-size: 1.0625rem;
+  font-weight: 600;
+  color: var(--_label);
+  margin: 0 0 var(--_spacing) 0;
+}
+
+.nodii-onboarding-nav {
+  display: flex;
+  gap: calc(var(--_spacing) * 0.5);
+  margin-top: var(--_spacing);
+}
+
+.nodii-onboarding-back-btn {
+  padding: calc(var(--_spacing) * 0.625) var(--_spacing);
+  background: transparent;
+  color: var(--_label);
+  border: 1px solid var(--_border);
+  border-radius: var(--_radius);
+  font-family: var(--_font);
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+.nodii-onboarding-stale-banner {
+  padding: calc(var(--_spacing) * 0.75);
+  border-radius: var(--_radius);
+  background: #fffbeb;
+  border: 1px solid #fcd34d;
+  color: #92400e;
+  font-size: 0.875rem;
+  margin-bottom: var(--_spacing);
+}
+
+.nodii-onboarding-consent-row {
+  display: flex;
+  align-items: flex-start;
+  gap: calc(var(--_spacing) * 0.5);
+  margin-bottom: calc(var(--_spacing) * 0.5);
+  font-size: 0.875rem;
+  color: var(--_label);
+}
+
+.nodii-onboarding-consent-row input[type="checkbox"] {
+  margin-top: 3px;
+}
+
+.nodii-onboarding-account-section {
+  border-top: 1px solid var(--_border);
+  margin-top: var(--_spacing);
+  padding-top: var(--_spacing);
+}
+
+.nodii-onboarding-loading {
+  padding: var(--_spacing);
+  text-align: center;
+  color: var(--_label);
+}
+`;
+function injectWidgetStyles() {
+  if (typeof document === "undefined") return;
+  const styleId = "__nodii_onboarding_styles__";
+  if (document.getElementById(styleId)) return;
+  const style = document.createElement("style");
+  style.id = styleId;
+  style.textContent = DEFAULT_WIDGET_CSS;
+  document.head.appendChild(style);
+}
+
+// src/widget/contact-form.ts
+function el(tag, attrs = {}, children = []) {
+  const element = document.createElement(tag);
+  for (const [key, value] of Object.entries(attrs)) {
+    element.setAttribute(key, value);
+  }
+  for (const child of children) {
+    if (typeof child === "string") {
+      element.appendChild(document.createTextNode(child));
+    } else {
+      element.appendChild(child);
+    }
+  }
+  return element;
+}
+function createFieldEl(id, label, input, required) {
+  const labelEl = el(
+    "label",
+    { for: id, class: `nodii-onboarding-label${required ? " required" : ""}` },
+    [label]
+  );
+  const errorEl = el("div", {
+    class: "nodii-onboarding-field-error",
+    id: `${id}-error`,
+    role: "alert",
+    "aria-live": "polite"
+  });
+  const field = el("div", { class: "nodii-onboarding-field" }, [
+    labelEl,
+    input,
+    errorEl
+  ]);
+  return field;
+}
+function setFieldError(container, fieldId, message) {
+  const errorEl = container.querySelector(idSelector(`${fieldId}-error`));
+  if (errorEl) errorEl.textContent = message;
+  const inputEl = container.querySelector(idSelector(fieldId));
+  if (inputEl) inputEl.classList.add("has-error");
+}
+function clearFieldErrors(container) {
+  for (const el3 of container.querySelectorAll(
+    ".nodii-onboarding-field-error"
+  )) {
+    el3.textContent = "";
+  }
+  for (const el3 of container.querySelectorAll(".has-error")) {
+    el3.classList.remove("has-error");
+  }
+}
+function applyErrors(container, errors) {
+  clearFieldErrors(container);
+  for (const err of errors) {
+    setFieldError(container, `nodii-${err.path}`, err.message);
+  }
+}
+function mountContactForm(host, options) {
+  injectWidgetStyles();
+  const formControl = createContactFormState();
+  loadRecaptcha(options.siteKey).catch(() => {
+  });
+  const wrapper = el("div", { class: "nodii-onboarding-widget" });
+  const nameInput = el("input", {
+    type: "text",
+    id: "nodii-name",
+    name: "name",
+    class: "nodii-onboarding-input",
+    placeholder: "Your name",
+    autocomplete: "name",
+    maxlength: "200",
+    required: "required"
+  });
+  const emailInput = el("input", {
+    type: "email",
+    id: "nodii-email",
+    name: "email",
+    class: "nodii-onboarding-input",
+    placeholder: "you@company.com",
+    autocomplete: "email",
+    required: "required"
+  });
+  const phoneInput = el("input", {
+    type: "tel",
+    id: "nodii-phone",
+    name: "phone",
+    class: "nodii-onboarding-input",
+    placeholder: "+1 555 000 0000",
+    autocomplete: "tel"
+  });
+  const messageInput = el("textarea", {
+    id: "nodii-message",
+    name: "message",
+    class: "nodii-onboarding-textarea",
+    placeholder: "How can we help?",
+    maxlength: "4000",
+    rows: "4"
+  });
+  const serverErrorEl = el("div", {
+    class: "nodii-onboarding-server-error",
+    role: "alert",
+    "aria-live": "assertive",
+    style: "display:none"
+  });
+  const successEl = el(
+    "div",
+    {
+      class: "nodii-onboarding-success",
+      role: "status",
+      style: "display:none"
+    },
+    [options.successMessage ?? "Thank you! We'll be in touch shortly."]
+  );
+  const submitBtn = el(
+    "button",
+    {
+      type: "submit",
+      class: "nodii-onboarding-submit-btn"
+    },
+    [options.submitLabel ?? "Get in touch"]
+  );
+  const recaptchaNotice = el(
+    "p",
+    { class: "nodii-onboarding-recaptcha-notice" },
+    [
+      "Protected by reCAPTCHA. ",
+      Object.assign(
+        el("a", {
+          href: "https://policies.google.com/privacy",
+          target: "_blank",
+          rel: "noopener noreferrer"
+        }),
+        { textContent: "Privacy" }
+      ),
+      " & ",
+      Object.assign(
+        el("a", {
+          href: "https://policies.google.com/terms",
+          target: "_blank",
+          rel: "noopener noreferrer"
+        }),
+        { textContent: "Terms" }
+      )
+    ]
+  );
+  const form = el("form", {
+    novalidate: "true",
+    "aria-label": "Contact us"
+  });
+  form.appendChild(createFieldEl("nodii-name", "Name", nameInput, true));
+  form.appendChild(createFieldEl("nodii-email", "Email", emailInput, true));
+  form.appendChild(
+    createFieldEl("nodii-phone", "Phone (optional)", phoneInput, false)
+  );
+  form.appendChild(
+    createFieldEl("nodii-message", "Message (optional)", messageInput, false)
+  );
+  form.appendChild(serverErrorEl);
+  form.appendChild(submitBtn);
+  form.appendChild(recaptchaNotice);
+  wrapper.appendChild(successEl);
+  wrapper.appendChild(form);
+  host.appendChild(wrapper);
+  nameInput.addEventListener("input", () => {
+    formControl.setValue("name", nameInput.value);
+  });
+  emailInput.addEventListener("input", () => {
+    formControl.setValue("email", emailInput.value);
+  });
+  phoneInput.addEventListener("input", () => {
+    formControl.setValue("phone", phoneInput.value || void 0);
+  });
+  messageInput.addEventListener("input", () => {
+    formControl.setValue("message", messageInput.value || void 0);
+  });
+  const submitLabel = options.submitLabel ?? "Get in touch";
+  function renderSubmitButton(submitting) {
+    while (submitBtn.firstChild) {
+      submitBtn.removeChild(submitBtn.firstChild);
+    }
+    if (submitting) {
+      const spinner = document.createElement("span");
+      spinner.className = "nodii-onboarding-spinner";
+      submitBtn.appendChild(spinner);
+      submitBtn.appendChild(document.createTextNode("Sending\u2026"));
+    } else {
+      submitBtn.appendChild(document.createTextNode(submitLabel));
+    }
+  }
+  const unsubscribe = formControl.subscribe((state) => {
+    submitBtn.disabled = state.status === "submitting";
+    renderSubmitButton(state.status === "submitting");
+    applyErrors(wrapper, state.errors);
+    if (state.serverError) {
+      serverErrorEl.textContent = state.serverError;
+      serverErrorEl.style.display = "";
+    } else {
+      serverErrorEl.style.display = "none";
+    }
+    if (state.status === "success") {
+      successEl.style.display = "";
+      form.style.display = "none";
+    }
+  });
+  let idempotencyKey = null;
+  let lastFingerprint = null;
+  form.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    formControl.setValue("name", nameInput.value);
+    formControl.setValue("email", emailInput.value);
+    formControl.setValue("phone", phoneInput.value || void 0);
+    formControl.setValue("message", messageInput.value || void 0);
+    const valid = formControl.validate();
+    if (!valid) return;
+    formControl.setSubmitting();
+    const values = formControl.getState().values;
+    const fingerprint = computePayloadFingerprint(values);
+    if (idempotencyKey === null || fingerprint !== lastFingerprint) {
+      idempotencyKey = generateIdempotencyKey();
+      lastFingerprint = fingerprint;
+    }
+    let firstToken;
+    try {
+      firstToken = await executeRecaptcha(options.siteKey, "contact_submit", {
+        timeoutMs: options.timeoutMs
+      });
+    } catch (recaptchaErr) {
+      formControl.setError("Could not load bot protection. Please try again.");
+      options.onError?.(recaptchaErr);
+      return;
+    }
+    let usedFirst = false;
+    const tokenProvider = async () => {
+      if (!usedFirst) {
+        usedFirst = true;
+        return firstToken;
+      }
+      return executeRecaptcha(options.siteKey, "contact_submit", {
+        timeoutMs: options.timeoutMs
+      });
+    };
+    try {
+      await submitLead(values, {
+        baseUrl: options.baseUrl,
+        botToken: tokenProvider,
+        idempotencyKey,
+        fetch: options.fetch,
+        timeoutMs: options.timeoutMs
+      });
+      idempotencyKey = null;
+      lastFingerprint = null;
+      formControl.setSuccess();
+      options.onSuccess?.();
+    } catch (err) {
+      if (err instanceof OnboardingBotChallengeError) {
+        formControl.setError(
+          "Bot protection check failed. Please refresh the page and try again."
+        );
+        options.onError?.(err);
+      } else if (err instanceof OnboardingRateLimitError) {
+        const msg = err.retryAfterSeconds !== null ? `Too many requests. Please wait ${err.retryAfterSeconds}s.` : "Too many requests. Please wait a moment.";
+        formControl.setError(msg);
+        options.onError?.(err);
+      } else {
+        formControl.setError(
+          "Something went wrong. Please try again in a moment."
+        );
+        options.onError?.(err);
+      }
+    }
+  });
+  return {
+    unmount() {
+      unsubscribe();
+      host.removeChild(wrapper);
+    },
+    reset() {
+      idempotencyKey = null;
+      lastFingerprint = null;
+      formControl.reset();
+      form.style.display = "";
+      successEl.style.display = "none";
+      nameInput.value = "";
+      emailInput.value = "";
+      phoneInput.value = "";
+      messageInput.value = "";
+    }
+  };
+}
+
+// src/widget/signup-form.ts
+var STAGE_TITLES = {
+  lead: "About you",
+  prospect: "Your business",
+  activation: "Choose your services"
+};
+function el2(tag, attrs = {}, children = []) {
+  const element = document.createElement(tag);
+  for (const [key, value] of Object.entries(attrs)) {
+    element.setAttribute(key, value);
+  }
+  for (const child of children) {
+    if (typeof child === "string") {
+      element.appendChild(document.createTextNode(child));
+    } else {
+      element.appendChild(child);
+    }
+  }
+  return element;
+}
+function optionLabel(option) {
+  if (option !== null && typeof option === "object") {
+    const o = option;
+    if (typeof o["label"] === "string") return o["label"];
+  }
+  return optionValue(option);
+}
+function buildFieldInput(field, currentValue, onChange) {
+  const id = `nodii-f-${field.key}`;
+  switch (field.type) {
+    case "textarea": {
+      const input = el2("textarea", {
+        id,
+        class: "nodii-onboarding-textarea",
+        rows: "4"
+      });
+      if (typeof currentValue === "string") input.value = currentValue;
+      input.addEventListener("input", () => onChange(input.value));
+      return input;
+    }
+    case "checkbox":
+    case "boolean": {
+      const input = el2("input", {
+        type: "checkbox",
+        id
+      });
+      input.checked = currentValue === true;
+      input.addEventListener("change", () => onChange(input.checked));
+      return input;
+    }
+    case "select":
+    case "radio": {
+      const select = el2("select", {
+        id,
+        class: "nodii-onboarding-input"
+      });
+      select.appendChild(el2("option", { value: "" }, ["\u2014 select \u2014"]));
+      for (const opt of field.options ?? []) {
+        const value = optionValue(opt);
+        const optionEl = el2("option", { value }, [optionLabel(opt)]);
+        select.appendChild(optionEl);
+      }
+      if (typeof currentValue === "string") select.value = currentValue;
+      select.addEventListener("change", () => onChange(select.value));
+      return select;
+    }
+    case "multiselect": {
+      const select = el2("select", {
+        id,
+        class: "nodii-onboarding-input",
+        multiple: "multiple"
+      });
+      const current = Array.isArray(currentValue) ? currentValue.map(String) : [];
+      for (const opt of field.options ?? []) {
+        const value = optionValue(opt);
+        const optionEl = el2("option", { value }, [
+          optionLabel(opt)
+        ]);
+        if (current.includes(value)) optionEl.selected = true;
+        select.appendChild(optionEl);
+      }
+      select.addEventListener("change", () => {
+        const values = [];
+        for (const o of Array.from(select.options)) {
+          if (o.selected && o.value !== "") values.push(o.value);
+        }
+        onChange(values);
+      });
+      return select;
+    }
+    default: {
+      const typeAttr = field.type === "email" || field.type === "tel" || field.type === "number" || field.type === "date" ? field.type : "text";
+      const input = el2("input", {
+        type: typeAttr,
+        id,
+        class: "nodii-onboarding-input"
+      });
+      if (typeof currentValue === "string") input.value = currentValue;
+      if (typeof currentValue === "number") input.value = String(currentValue);
+      input.addEventListener("input", () => onChange(input.value));
+      return input;
+    }
+  }
+}
+function fieldRow(field, input, idOverride) {
+  const id = idOverride ?? `nodii-f-${field.key}`;
+  const labelEl = el2(
+    "label",
+    {
+      for: id,
+      class: `nodii-onboarding-label${field.required ? " required" : ""}`
+    },
+    [field.label]
+  );
+  const errorEl = el2("div", {
+    class: "nodii-onboarding-field-error",
+    id: `${id}-error`,
+    role: "alert",
+    "aria-live": "polite"
+  });
+  return el2("div", { class: "nodii-onboarding-field" }, [
+    labelEl,
+    input,
+    errorEl
+  ]);
+}
+function mountSignupForm(host, options) {
+  injectWidgetStyles();
+  const wrapper = el2("div", { class: "nodii-onboarding-widget" });
+  const loadingEl = el2("div", { class: "nodii-onboarding-loading" }, [
+    "Loading signup form\u2026"
+  ]);
+  wrapper.appendChild(loadingEl);
+  host.appendChild(wrapper);
+  const cache = options.cache ?? defaultSpecCache;
+  let stepper = null;
+  let unsubscribe = null;
+  let unmounted = false;
+  let siteKey = options.siteKey ?? "";
+  let idempotencyKey = null;
+  let lastFingerprint = null;
+  let renderedStepIndex = -1;
+  let renderedStale = false;
+  let currentSpecVersion = null;
+  let staleDiffSummary = "";
+  const stepArea = el2("div", {});
+  const staleBanner = el2("div", {
+    class: "nodii-onboarding-stale-banner",
+    role: "alert",
+    style: "display:none"
+  });
+  const serverErrorEl = el2("div", {
+    class: "nodii-onboarding-server-error",
+    role: "alert",
+    "aria-live": "assertive",
+    style: "display:none"
+  });
+  const successEl = el2("div", {
+    class: "nodii-onboarding-success",
+    role: "status",
+    style: "display:none"
+  });
+  const stepsIndicator = el2("div", { class: "nodii-onboarding-steps" });
+  const form = el2("form", { novalidate: "true", "aria-label": "Sign up" });
+  function setFieldErrorsInPlace(container, errors, idPrefix) {
+    for (const errEl of container.querySelectorAll(
+      ".nodii-onboarding-field-error"
+    )) {
+      errEl.textContent = "";
+    }
+    for (const marked of container.querySelectorAll(".has-error")) {
+      marked.classList.remove("has-error");
+    }
+    for (const err of errors) {
+      const id = idPrefix(err.path);
+      const errorNode = container.querySelector(idSelector(`${id}-error`));
+      if (errorNode) errorNode.textContent = err.message;
+      const inputNode = container.querySelector(idSelector(id));
+      if (inputNode) inputNode.classList.add("has-error");
+    }
+  }
+  function accountIdOf(path) {
+    if (path === "email") return "nodii-account-email";
+    if (path === "password") return "nodii-account-password";
+    if (path === "tosAccepted") return "nodii-consent-tos";
+    if (path === "privacyAccepted") return "nodii-consent-privacy";
+    return `nodii-account-${path}`;
+  }
+  function renderStepsIndicator(state) {
+    while (stepsIndicator.firstChild) {
+      stepsIndicator.removeChild(stepsIndicator.firstChild);
+    }
+    for (let i = 0; i < state.stepCount; i++) {
+      stepsIndicator.appendChild(
+        el2("div", {
+          class: `nodii-onboarding-step-dot${i <= state.stepIndex ? " active" : ""}`
+        })
+      );
+    }
+  }
+  function renderAccountSection(control, state) {
+    const section = el2("div", { class: "nodii-onboarding-account-section" });
+    const emailInput = el2("input", {
+      type: "email",
+      id: "nodii-account-email",
+      class: "nodii-onboarding-input",
+      autocomplete: "email"
+    });
+    emailInput.value = state.credentials.email;
+    emailInput.addEventListener(
+      "input",
+      () => control.setCredentials({ email: emailInput.value })
+    );
+    section.appendChild(
+      fieldRow(
+        {
+          key: "account-email",
+          label: "Account email",
+          required: true
+        },
+        emailInput,
+        "nodii-account-email"
+        // label for + error id match the real input id
+      )
+    );
+    const passwordInput = el2("input", {
+      type: "password",
+      id: "nodii-account-password",
+      class: "nodii-onboarding-input",
+      autocomplete: "new-password",
+      minlength: "12",
+      maxlength: "256"
+    });
+    passwordInput.value = state.credentials.password;
+    passwordInput.addEventListener(
+      "input",
+      () => control.setCredentials({ password: passwordInput.value })
+    );
+    section.appendChild(
+      fieldRow(
+        {
+          key: "account-password",
+          label: "Password (12+ characters)",
+          required: true
+        },
+        passwordInput,
+        "nodii-account-password"
+        // label for + error id match the real input id
+      )
+    );
+    const tosCheckbox = el2("input", {
+      type: "checkbox",
+      id: "nodii-consent-tos"
+    });
+    tosCheckbox.checked = state.consent.tosAccepted;
+    tosCheckbox.addEventListener(
+      "change",
+      () => control.setConsent({ tosAccepted: tosCheckbox.checked })
+    );
+    const tosLabelChildren = ["I accept the "];
+    if (options.tosUrl) {
+      tosLabelChildren.push(
+        el2(
+          "a",
+          {
+            href: options.tosUrl,
+            target: "_blank",
+            rel: "noopener noreferrer"
+          },
+          ["Terms of Service"]
+        )
+      );
+    } else {
+      tosLabelChildren.push("Terms of Service");
+    }
+    section.appendChild(
+      el2("div", { class: "nodii-onboarding-consent-row" }, [
+        tosCheckbox,
+        el2("label", { for: "nodii-consent-tos" }, tosLabelChildren)
+      ])
+    );
+    section.appendChild(
+      el2("div", {
+        class: "nodii-onboarding-field-error",
+        id: "nodii-consent-tos-error",
+        role: "alert"
+      })
+    );
+    const privacyCheckbox = el2("input", {
+      type: "checkbox",
+      id: "nodii-consent-privacy"
+    });
+    privacyCheckbox.checked = state.consent.privacyAccepted;
+    privacyCheckbox.addEventListener(
+      "change",
+      () => control.setConsent({ privacyAccepted: privacyCheckbox.checked })
+    );
+    const privacyLabelChildren = ["I accept the "];
+    if (options.privacyUrl) {
+      privacyLabelChildren.push(
+        el2(
+          "a",
+          {
+            href: options.privacyUrl,
+            target: "_blank",
+            rel: "noopener noreferrer"
+          },
+          ["Privacy Policy"]
+        )
+      );
+    } else {
+      privacyLabelChildren.push("Privacy Policy");
+    }
+    section.appendChild(
+      el2("div", { class: "nodii-onboarding-consent-row" }, [
+        privacyCheckbox,
+        el2("label", { for: "nodii-consent-privacy" }, privacyLabelChildren)
+      ])
+    );
+    section.appendChild(
+      el2("div", {
+        class: "nodii-onboarding-field-error",
+        id: "nodii-consent-privacy-error",
+        role: "alert"
+      })
+    );
+    return section;
+  }
+  function renderStep(control, state) {
+    while (stepArea.firstChild) stepArea.removeChild(stepArea.firstChild);
+    const step = state.currentStep;
+    if (step) {
+      stepArea.appendChild(
+        el2("h3", { class: "nodii-onboarding-stage-title" }, [
+          STAGE_TITLES[step.stage] ?? step.stage
+        ])
+      );
+      for (const field of step.fields) {
+        const input = buildFieldInput(
+          field,
+          state.answers[field.key],
+          (value) => control.setAnswer(field.key, value)
+        );
+        stepArea.appendChild(fieldRow(field, input));
+      }
+    }
+    const isLast = control.isLastStep();
+    if (isLast) {
+      stepArea.appendChild(renderAccountSection(control, state));
+    }
+    const nav = el2("div", { class: "nodii-onboarding-nav" });
+    if (!control.isFirstStep()) {
+      const backBtn = el2(
+        "button",
+        { type: "button", class: "nodii-onboarding-back-btn" },
+        ["Back"]
+      );
+      backBtn.addEventListener("click", () => control.back());
+      nav.appendChild(backBtn);
+    }
+    const forwardBtn = el2(
+      "button",
+      {
+        type: isLast ? "submit" : "button",
+        class: "nodii-onboarding-submit-btn",
+        id: "nodii-signup-forward"
+      },
+      [isLast ? options.submitLabel ?? "Create account" : "Next"]
+    );
+    if (!isLast) {
+      forwardBtn.addEventListener("click", () => control.next());
+    }
+    nav.appendChild(forwardBtn);
+    stepArea.appendChild(nav);
+  }
+  async function handleSpecStale(control) {
+    const prior = currentSpecVersion !== null ? cache.get(options.onboarder, currentSpecVersion) : void 0;
+    const fresh = await fetchOnboardingSpec({
+      baseUrl: options.baseUrl,
+      onboarder: options.onboarder,
+      fetch: options.fetch,
+      timeoutMs: options.timeoutMs,
+      cache
+    });
+    if (unmounted) return;
+    if (prior) {
+      const diff = diffSpecFields(prior, fresh);
+      const parts = [];
+      if (diff.added.length) parts.push(`added: ${diff.added.join(", ")}`);
+      if (diff.removed.length)
+        parts.push(`removed: ${diff.removed.join(", ")}`);
+      if (diff.changed.length)
+        parts.push(`changed: ${diff.changed.join(", ")}`);
+      staleDiffSummary = parts.length ? ` (${parts.join("; ")})` : "";
+    } else {
+      staleDiffSummary = "";
+    }
+    siteKey = options.siteKey ?? fresh.botChallenge.siteKey;
+    currentSpecVersion = fresh.specVersion;
+    control.applyNewSpec(fresh);
+    idempotencyKey = null;
+    lastFingerprint = null;
+  }
+  async function handleSubmit(control) {
+    if (!control.validateAll()) return;
+    control.acknowledgeSpecStale();
+    control.setSubmitting();
+    const body = control.buildSubmitPayload();
+    const fingerprint = computeSignupFingerprint(body);
+    if (idempotencyKey === null || fingerprint !== lastFingerprint) {
+      idempotencyKey = generateIdempotencyKey();
+      lastFingerprint = fingerprint;
+    }
+    let firstToken;
+    try {
+      firstToken = await executeRecaptcha(siteKey, "signup_submit", {
+        timeoutMs: options.timeoutMs
+      });
+    } catch (recaptchaErr) {
+      control.setError("Could not load bot protection. Please try again.");
+      options.onError?.(recaptchaErr);
+      return;
+    }
+    let usedFirst = false;
+    const tokenProvider = async () => {
+      if (!usedFirst) {
+        usedFirst = true;
+        return firstToken;
+      }
+      return executeRecaptcha(siteKey, "signup_submit", {
+        timeoutMs: options.timeoutMs
+      });
+    };
+    try {
+      const result = await submitSignup(body, {
+        baseUrl: options.baseUrl,
+        botToken: tokenProvider,
+        idempotencyKey,
+        fetch: options.fetch,
+        timeoutMs: options.timeoutMs
+      });
+      idempotencyKey = null;
+      lastFingerprint = null;
+      control.setSuccess(result.terminalStage);
+      options.onSuccess?.(result);
+    } catch (err) {
+      if (err instanceof OnboardingSpecStaleError) {
+        try {
+          await handleSpecStale(control);
+        } catch (refetchErr) {
+          control.setError(
+            "The signup form changed and could not be reloaded. Please refresh the page."
+          );
+          options.onError?.(refetchErr);
+          return;
+        }
+        options.onError?.(err);
+      } else if (err instanceof OnboardingBotChallengeError) {
+        control.setError(
+          "Bot protection check failed. Please refresh the page and try again."
+        );
+        options.onError?.(err);
+      } else if (err instanceof OnboardingRateLimitError) {
+        control.setError(
+          err.retryAfterSeconds !== null ? `Too many requests. Please wait ${err.retryAfterSeconds}s.` : "Too many requests. Please wait a moment."
+        );
+        options.onError?.(err);
+      } else {
+        control.setError("Something went wrong. Please try again in a moment.");
+        options.onError?.(err);
+      }
+    }
+  }
+  function onStateChange(control, state) {
+    if (state.stepIndex !== renderedStepIndex || state.specStale !== renderedStale) {
+      renderedStepIndex = state.stepIndex;
+      renderedStale = state.specStale;
+      renderStep(control, state);
+      renderStepsIndicator(state);
+    }
+    staleBanner.style.display = state.specStale ? "" : "none";
+    staleBanner.textContent = state.specStale ? `This form was just updated by the provider${staleDiffSummary}. Please review your answers below and submit again.` : "";
+    setFieldErrorsInPlace(
+      stepArea,
+      state.errors,
+      (path) => `nodii-f-${path.split(".")[0] ?? path}`
+    );
+    for (const err of state.accountErrors) {
+      const id = accountIdOf(err.path.split(".")[0] ?? err.path);
+      const errorNode = stepArea.querySelector(idSelector(`${id}-error`));
+      if (errorNode) errorNode.textContent = err.message;
+      const inputNode = stepArea.querySelector(idSelector(id));
+      if (inputNode) inputNode.classList.add("has-error");
+    }
+    if (state.serverError) {
+      serverErrorEl.textContent = state.serverError;
+      serverErrorEl.style.display = "";
+    } else {
+      serverErrorEl.style.display = "none";
+    }
+    const forwardBtn = stepArea.querySelector(
+      "#nodii-signup-forward"
+    );
+    if (forwardBtn) {
+      forwardBtn.disabled = state.status === "submitting";
+    }
+    if (state.status === "success") {
+      const message = state.terminalStage === "active" ? "Your account is ready \u2014 you're all set!" : state.terminalStage === "inactive" ? "Your account was created. Complete verification to activate it." : "Thanks for signing up! Check your email to verify your account.";
+      successEl.textContent = message;
+      successEl.style.display = "";
+      form.style.display = "none";
+    } else {
+      successEl.style.display = "none";
+      form.style.display = "";
+    }
+  }
+  void (async () => {
+    let spec;
+    try {
+      spec = await fetchOnboardingSpec({
+        baseUrl: options.baseUrl,
+        onboarder: options.onboarder,
+        fetch: options.fetch,
+        timeoutMs: options.timeoutMs,
+        cache,
+        // Reuse a spec already loaded for this onboarder this session (a
+        // remount into the same page shouldn't re-hit the network). A 409 on
+        // submit is the authoritative staleness signal that triggers refetch.
+        preferCached: true
+      });
+    } catch (err) {
+      if (unmounted) return;
+      loadingEl.textContent = "The signup form could not be loaded. Please refresh the page.";
+      options.onError?.(err);
+      return;
+    }
+    if (unmounted) return;
+    siteKey = options.siteKey ?? spec.botChallenge.siteKey;
+    currentSpecVersion = spec.specVersion;
+    const control = createSignupStepper(spec);
+    stepper = control;
+    form.addEventListener("submit", (event) => {
+      event.preventDefault();
+      void handleSubmit(control);
+    });
+    form.appendChild(stepsIndicator);
+    form.appendChild(staleBanner);
+    form.appendChild(stepArea);
+    form.appendChild(serverErrorEl);
+    wrapper.removeChild(loadingEl);
+    wrapper.appendChild(successEl);
+    wrapper.appendChild(form);
+    unsubscribe = control.subscribe((state) => onStateChange(control, state));
+    onStateChange(control, control.getState());
+    options.onReady?.(spec);
+  })();
+  return {
+    unmount() {
+      unmounted = true;
+      unsubscribe?.();
+      if (wrapper.parentNode === host) host.removeChild(wrapper);
+    },
+    reset() {
+      idempotencyKey = null;
+      lastFingerprint = null;
+      renderedStepIndex = -1;
+      renderedStale = false;
+      if (stepper) {
+        stepper.reset();
+      } else {
+        form.style.display = "";
+        successEl.style.display = "none";
+      }
+    }
+  };
+}
+
+// src/widget/index.ts
+var OnboardingWidget = {
+  /**
+   * Mount the onboarding widget into a host element.
+   *
+   * @param el - The DOM element to render into.
+   * @param options - Widget configuration. `form: "contact"` renders the
+   *   fixed contact form (Phase 1); `form: "signup"` fetches the D540 spec
+   *   and renders the dynamic stepper (Phase 2 — siteKey comes from the
+   *   spec's botChallenge unless overridden).
+   * @returns A mounted widget control (unmount / reset).
+   *
+   * @example
+   * ```ts
+   * import { OnboardingWidget } from "@nodii/onboarding/widget";
+   *
+   * OnboardingWidget.mount(document.getElementById("signup-form")!, {
+   *   onboarder: "acme-corp",
+   *   form: "signup",
+   *   baseUrl: "https://api.acme.nucleus-cloud.in",
+   *   onSuccess: (r) => console.log("landed at", r.terminalStage),
+   * });
+   * ```
+   */
+  mount(el3, options) {
+    if (options.form === "contact") {
+      return mountContactForm(el3, options);
+    }
+    if (options.form === "signup") {
+      return mountSignupForm(el3, options);
+    }
+    throw new Error(
+      `OnboardingWidget.mount: unknown form "${options.form}". Supported: "contact", "signup".`
+    );
+  }
+};
+
+export { DEFAULT_WIDGET_CSS, OnboardingWidget, cssEscape, idSelector, injectWidgetStyles, mountContactForm, mountSignupForm };
+//# sourceMappingURL=chunk-SWMIIUXR.js.map
+//# sourceMappingURL=chunk-SWMIIUXR.js.map