fdbck-react 0.2.0

package/dist/index.js

@@ -0,0 +1,716 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  FdbckError: () => FdbckError,
+  FdbckProvider: () => FdbckProvider,
+  FdbckWidget: () => FdbckWidget,
+  useFdbck: () => useFdbck
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/FdbckWidget.tsx
+var import_react7 = require("react");
+
+// src/lib/errors.ts
+var FdbckError = class extends Error {
+  constructor(code, message) {
+    super(message);
+    __publicField(this, "code");
+    this.name = "FdbckError";
+    this.code = code;
+  }
+};
+function statusToErrorCode(status) {
+  switch (status) {
+    case "invalid":
+    case "token_expired":
+      return "invalid_token";
+    case "already_responded":
+      return "already_responded";
+    case "question_ended":
+      return "question_expired";
+    default:
+      return "unknown";
+  }
+}
+function httpStatusToErrorCode(status) {
+  if (status === 401) return "invalid_token";
+  if (status === 409) return "already_responded";
+  if (status === 410) return "question_expired";
+  return "unknown";
+}
+
+// src/lib/api.ts
+var DEFAULT_BASE_URL = "https://api.fdbck.sh";
+var FdbckApiClient = class {
+  constructor(baseUrl) {
+    __publicField(this, "baseUrl");
+    this.baseUrl = (baseUrl || DEFAULT_BASE_URL).replace(/\/$/, "");
+  }
+  /** Fetch question data for a token via GET /v1/f/:token */
+  async fetchQuestion(token, signal) {
+    let res;
+    try {
+      res = await fetch(`${this.baseUrl}/v1/f/${encodeURIComponent(token)}`, { signal });
+    } catch (err) {
+      if (err.name === "AbortError") throw err;
+      throw new FdbckError("network_error", "Failed to fetch question");
+    }
+    if (!res.ok) {
+      throw new FdbckError(httpStatusToErrorCode(res.status), `HTTP ${res.status}`);
+    }
+    const data = await res.json();
+    if (data.status !== "valid") {
+      throw new FdbckError(statusToErrorCode(data.status), `Token status: ${data.status}`);
+    }
+    return data;
+  }
+  /** Submit a response via POST /v1/responses */
+  async submitResponse(token, value, signal) {
+    let res;
+    try {
+      res = await fetch(`${this.baseUrl}/v1/responses`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ token, value }),
+        signal
+      });
+    } catch (err) {
+      if (err.name === "AbortError") throw err;
+      throw new FdbckError("network_error", "Failed to submit response");
+    }
+    if (!res.ok) {
+      const body = await res.json().catch(() => null);
+      const message = body?.error?.message || `HTTP ${res.status}`;
+      throw new FdbckError(httpStatusToErrorCode(res.status), message);
+    }
+  }
+};
+
+// src/lib/colors.ts
+function getThemeVars(themeColor, themeMode) {
+  const accent = themeColor || "#FF6B35";
+  const isDark = themeMode === "dark";
+  return {
+    "--fdbck-accent": accent,
+    "--fdbck-accent-alpha": `${accent}18`,
+    "--fdbck-bg": isDark ? "#0a0a0a" : "#f9fafb",
+    "--fdbck-card-bg": isDark ? "#141414" : "#ffffff",
+    "--fdbck-border": isDark ? "#262626" : "#e5e7eb",
+    "--fdbck-text-primary": isDark ? "#ffffff" : "#111827",
+    "--fdbck-text-secondary": isDark ? "#9ca3af" : "#6b7280",
+    "--fdbck-text-muted": isDark ? "#6b7280" : "#9ca3af",
+    "--fdbck-indicator-border": isDark ? "#52525b" : "#d1d5db"
+  };
+}
+
+// src/lib/style.ts
+function getStyleVars(style) {
+  return {
+    "--fdbck-width": style?.width || "100%",
+    "--fdbck-max-width": style?.maxWidth || "28rem",
+    "--fdbck-border-radius": style?.borderRadius || "0.75rem",
+    "--fdbck-font-family": style?.fontFamily || "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    "--fdbck-font-size": style?.fontSize || "0.875rem"
+  };
+}
+
+// src/lib/locale.ts
+var DEFAULT_LOCALE = {
+  submit: "Submit",
+  poweredBy: "Powered by",
+  loading: "Loading\u2026",
+  errorTitle: "Something went wrong",
+  errorMessage: "Unable to load this question. Please try again later.",
+  retry: "Retry",
+  close: "Close"
+};
+function resolveLocale(locale) {
+  if (!locale) return DEFAULT_LOCALE;
+  return { ...DEFAULT_LOCALE, ...locale };
+}
+
+// src/hooks/useWidgetState.ts
+var import_react = require("react");
+function reducer(state, action) {
+  switch (action.type) {
+    case "TOKEN_RESOLVED":
+      return { ...state, status: "loading", token: action.token };
+    case "LOADED":
+      return { ...state, status: "ready", question: action.question, token: action.token };
+    case "SUBMITTING":
+      return { ...state, status: "submitting" };
+    case "COMPLETE":
+      return { ...state, status: "complete", submittedValue: action.value };
+    case "ERROR":
+      return { ...state, status: "error", error: action.error };
+    case "RESET":
+      return initialState;
+    default:
+      return state;
+  }
+}
+var initialState = {
+  status: "loading",
+  question: null,
+  token: null,
+  error: null,
+  submittedValue: null
+};
+var fetchingTokenState = {
+  ...initialState,
+  status: "fetching_token"
+};
+function useWidgetState(needsTokenFetch) {
+  return (0, import_react.useReducer)(reducer, needsTokenFetch ? fetchingTokenState : initialState);
+}
+
+// src/hooks/useFocusTrap.ts
+var import_react2 = require("react");
+var FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function useFocusTrap(containerRef, active) {
+  (0, import_react2.useEffect)(() => {
+    if (!active) return;
+    const container = containerRef.current;
+    if (!container) return;
+    function handleKeyDown(e) {
+      if (e.key !== "Tab") return;
+      const focusable = Array.from(container.querySelectorAll(FOCUSABLE));
+      if (focusable.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+    container.addEventListener("keydown", handleKeyDown);
+    const firstFocusable = container.querySelector(FOCUSABLE);
+    firstFocusable?.focus();
+    return () => container.removeEventListener("keydown", handleKeyDown);
+  }, [containerRef, active]);
+}
+
+// src/components/FdbckShadowHost.tsx
+var import_react3 = require("react");
+var import_react_dom = require("react-dom");
+
+// src/styles/base.css
+var base_default = {};
+
+// src/styles/question-types.css
+var question_types_default = {};
+
+// src/styles/confirmation.css
+var confirmation_default = {};
+
+// src/styles/branding.css
+var branding_default = {};
+
+// src/styles/modal.css
+var modal_default = {};
+
+// src/styles/popover.css
+var popover_default = {};
+
+// src/styles/index.ts
+var WIDGET_CSS = [
+  base_default,
+  question_types_default,
+  confirmation_default,
+  branding_default,
+  modal_default,
+  popover_default
+].join("\n");
+
+// src/components/FdbckShadowHost.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function FdbckShadowHost({ children, style }) {
+  const hostRef = (0, import_react3.useRef)(null);
+  const [container, setContainer] = (0, import_react3.useState)(null);
+  (0, import_react3.useEffect)(() => {
+    const host = hostRef.current;
+    if (!host || host.shadowRoot) return;
+    const shadow = host.attachShadow({ mode: "open" });
+    const styleEl = document.createElement("style");
+    styleEl.textContent = WIDGET_CSS;
+    shadow.appendChild(styleEl);
+    const wrapper = document.createElement("div");
+    shadow.appendChild(wrapper);
+    setContainer(wrapper);
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    if (!container || !style) return;
+    const parent = container.parentNode;
+    const host = parent?.host;
+    if (host) {
+      for (const [key, value] of Object.entries(style)) {
+        host.style.setProperty(key, value);
+      }
+    }
+  }, [container, style]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: hostRef, children: container && (0, import_react_dom.createPortal)(children, container) });
+}
+
+// src/components/FdbckLoading.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function FdbckLoading() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "fdbck-loading", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "fdbck-spinner" }) });
+}
+
+// src/components/FdbckConfirmation.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function FdbckConfirmation({ thankYouMessage }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fdbck-confirmation", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fdbck-check-circle", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { children: thankYouMessage ? "Thank you" : "Response recorded" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: thankYouMessage || "Your response has been recorded. You can close this." })
+  ] });
+}
+
+// src/components/FdbckError.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ERROR_TITLES = {
+  invalid_token: "Invalid link",
+  already_responded: "Already responded",
+  question_expired: "Question closed"
+};
+var ERROR_MESSAGES = {
+  invalid_token: "This response link is not valid.",
+  already_responded: "You've already responded to this.",
+  question_expired: "This question has closed."
+};
+function FdbckErrorDisplay({ error, locale, onRetry }) {
+  const title = ERROR_TITLES[error.code] || locale.errorTitle;
+  const message = ERROR_MESSAGES[error.code] || locale.errorMessage;
+  const isRetryable = error.code === "network_error" || error.code === "unknown";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fdbck-error-state", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: message }),
+    isRetryable && onRetry && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "fdbck-retry-btn", onClick: onRetry, children: locale.retry })
+  ] });
+}
+
+// src/components/FdbckHeader.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function FdbckHeader({ question }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    question.welcome_message && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "fdbck-welcome", children: question.welcome_message }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h1", { className: "fdbck-question", children: question.question })
+  ] });
+}
+
+// src/components/questions/YesNoQuestion.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function YesNoQuestion({ options, disabled, onSubmit }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "fdbck-yesno-grid", children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "button",
+    {
+      className: "fdbck-option-btn",
+      disabled,
+      onClick: () => onSubmit(opt),
+      children: opt
+    },
+    opt
+  )) });
+}
+
+// src/components/questions/SingleChoiceQuestion.tsx
+var import_react4 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function SingleChoiceQuestion({ options, disabled, onSubmit }) {
+  const [selected, setSelected] = (0, import_react4.useState)(null);
+  function handleClick(opt) {
+    setSelected(opt);
+    onSubmit(opt);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "fdbck-choice-list", children: options.map((opt) => {
+    const isSelected = selected === opt;
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "button",
+      {
+        className: "fdbck-option-btn",
+        "data-selected": isSelected,
+        disabled,
+        onClick: () => handleClick(opt),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fdbck-radio", "data-selected": isSelected, children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fdbck-radio-dot" }) }),
+          opt
+        ]
+      },
+      opt
+    );
+  }) });
+}
+
+// src/components/questions/MultipleChoiceQuestion.tsx
+var import_react5 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function MultipleChoiceQuestion({ options, disabled, locale, onSubmit }) {
+  const [selected, setSelected] = (0, import_react5.useState)([]);
+  function toggle(opt) {
+    setSelected(
+      (prev) => prev.includes(opt) ? prev.filter((x) => x !== opt) : [...prev, opt]
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "fdbck-choice-list", children: [
+    options.map((opt) => {
+      const isSelected = selected.includes(opt);
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        "button",
+        {
+          className: "fdbck-option-btn",
+          "data-selected": isSelected,
+          disabled,
+          onClick: () => toggle(opt),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "fdbck-checkbox", "data-selected": isSelected, children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }) }),
+            opt
+          ]
+        },
+        opt
+      );
+    }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "button",
+      {
+        className: "fdbck-submit-btn",
+        disabled: disabled || selected.length === 0,
+        onClick: () => onSubmit(selected),
+        children: locale.submit
+      }
+    )
+  ] });
+}
+
+// src/components/questions/RatingQuestion.tsx
+var import_react6 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function RatingQuestion({ options, disabled, onSubmit }) {
+  const [selected, setSelected] = (0, import_react6.useState)(null);
+  const count = options.max - options.min + 1;
+  const columns = Math.min(count, 10);
+  function handleClick(v) {
+    setSelected(v);
+    onSubmit(v);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fdbck-rating-grid", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` }, children: Array.from({ length: count }, (_, i) => options.min + i).map((v) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "button",
+      {
+        className: "fdbck-rating-btn",
+        "data-selected": selected === v,
+        disabled,
+        onClick: () => handleClick(v),
+        children: v
+      },
+      v
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "fdbck-rating-labels", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: options.min_label || options.min }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: options.max_label || options.max })
+    ] })
+  ] });
+}
+
+// src/components/FdbckBody.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function FdbckBody({ question, disabled, locale, onSubmit }) {
+  switch (question.type) {
+    case "yes_no":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(YesNoQuestion, { options: question.options, disabled, onSubmit });
+    case "single_choice":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SingleChoiceQuestion, { options: question.options, disabled, onSubmit });
+    case "multiple_choice":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MultipleChoiceQuestion, { options: question.options, disabled, locale, onSubmit });
+    case "rating":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RatingQuestion, { options: question.options, disabled, onSubmit });
+    default:
+      return null;
+  }
+}
+
+// src/components/FdbckFooter.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function FdbckFooter({ hideBranding, locale }) {
+  if (hideBranding) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "fdbck-branding", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("a", { href: "https://fdbck.sh", target: "_blank", rel: "noopener noreferrer", children: [
+    locale.poweredBy,
+    " ",
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "fdbck-branding-name", children: "fdbck" })
+  ] }) });
+}
+
+// src/components/FdbckCard.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function FdbckCard({ state, locale, submitError, onSubmit, onRetry }) {
+  const { status, question, error } = state;
+  if (status === "fetching_token" || status === "loading") {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "fdbck-card", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FdbckLoading, {}) });
+  }
+  if (status === "error" && error) {
+    const showBranding = error.code !== "invalid_token" && error.code !== "unknown" && !!question;
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "fdbck-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FdbckErrorDisplay, { error, locale, onRetry }),
+      showBranding && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FdbckFooter, { hideBranding: question?.hide_branding ?? true, locale })
+    ] });
+  }
+  if (status === "complete" && question) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "fdbck-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FdbckConfirmation, { thankYouMessage: question.thank_you_message }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FdbckFooter, { hideBranding: question.hide_branding, locale })
+    ] });
+  }
+  if ((status === "ready" || status === "submitting") && question) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "fdbck-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FdbckHeader, { question }),
+      submitError && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "fdbck-error-text", children: submitError }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        FdbckBody,
+        {
+          question,
+          disabled: status === "submitting",
+          locale,
+          onSubmit
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FdbckFooter, { hideBranding: question.hide_branding, locale })
+    ] });
+  }
+  return null;
+}
+
+// src/components/FdbckWidget.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function FdbckWidget({
+  token,
+  mode = "inline",
+  open = true,
+  baseUrl,
+  delay = 0,
+  autoCloseAfter,
+  closeOnOverlayClick = true,
+  closeOnEscape = true,
+  locale: localeProp,
+  style: styleProp,
+  onSubmit,
+  onDismiss,
+  onError,
+  onLoad
+}) {
+  const [state, dispatch] = useWidgetState(false);
+  const [submitError, setSubmitError] = (0, import_react7.useState)(null);
+  const [visible, setVisible] = (0, import_react7.useState)(delay === 0);
+  const clientRef = (0, import_react7.useRef)(new FdbckApiClient(baseUrl));
+  const submitRef = (0, import_react7.useRef)(false);
+  const modalRef = (0, import_react7.useRef)(null);
+  const locale = resolveLocale(localeProp);
+  (0, import_react7.useEffect)(() => {
+    if (delay <= 0 || visible) return;
+    const timer = setTimeout(() => setVisible(true), delay);
+    return () => clearTimeout(timer);
+  }, [delay, visible]);
+  const loadQuestion = (0, import_react7.useCallback)(() => {
+    const controller = new AbortController();
+    clientRef.current.fetchQuestion(token, controller.signal).then((data) => {
+      dispatch({ type: "LOADED", question: data.question, token: data.token });
+      onLoad?.(data.question);
+    }).catch((err) => {
+      if (err.name === "AbortError") return;
+      const fdbckErr = err instanceof FdbckError ? err : new FdbckError("unknown", err.message);
+      dispatch({ type: "ERROR", error: fdbckErr });
+      onError?.(fdbckErr);
+    });
+    return () => controller.abort();
+  }, [token, onLoad, onError]);
+  (0, import_react7.useEffect)(() => {
+    return loadQuestion();
+  }, [loadQuestion]);
+  function handleSubmit(value) {
+    if (submitRef.current) return;
+    submitRef.current = true;
+    setSubmitError(null);
+    dispatch({ type: "SUBMITTING" });
+    clientRef.current.submitResponse(state.token || token, value).then(() => {
+      dispatch({ type: "COMPLETE", value });
+      onSubmit?.(value);
+      if (autoCloseAfter && autoCloseAfter > 0) {
+        setTimeout(() => onDismiss?.(), autoCloseAfter);
+      }
+    }).catch((err) => {
+      const msg = err instanceof FdbckError ? err.message : "Something went wrong";
+      setSubmitError(msg);
+      dispatch({ type: "LOADED", question: state.question, token: state.token });
+      submitRef.current = false;
+      onError?.(err instanceof FdbckError ? err : new FdbckError("unknown", String(err)));
+    });
+  }
+  function handleRetry() {
+    dispatch({ type: "RESET" });
+    submitRef.current = false;
+    setSubmitError(null);
+    loadQuestion();
+  }
+  (0, import_react7.useEffect)(() => {
+    if (mode === "inline" || !closeOnEscape || !open) return;
+    function handleKeyDown(e) {
+      if (e.key === "Escape") onDismiss?.();
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [mode, closeOnEscape, open, onDismiss]);
+  useFocusTrap(modalRef, mode === "modal" && open && visible);
+  if (!open || !visible) return null;
+  const themeVars = getThemeVars(state.question?.theme_color ?? null, state.question?.theme_mode ?? "dark");
+  const styleVars = getStyleVars(styleProp);
+  const cssVars = { ...themeVars, ...styleVars };
+  const card = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    FdbckCard,
+    {
+      state,
+      locale,
+      submitError,
+      onSubmit: handleSubmit,
+      onRetry: handleRetry
+    }
+  );
+  if (mode === "modal") {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FdbckShadowHost, { style: cssVars, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "div",
+      {
+        className: "fdbck-modal-backdrop",
+        onClick: closeOnOverlayClick ? onDismiss : void 0,
+        role: "dialog",
+        "aria-modal": "true",
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "div",
+          {
+            ref: modalRef,
+            className: "fdbck-modal-content",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { className: "fdbck-close-btn", onClick: onDismiss, "aria-label": locale.close, children: "\xD7" }),
+              card
+            ]
+          }
+        )
+      }
+    ) });
+  }
+  if (mode === "popover") {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FdbckShadowHost, { style: cssVars, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "fdbck-popover", role: "dialog", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { className: "fdbck-close-btn", onClick: onDismiss, "aria-label": locale.close, children: "\xD7" }),
+      card
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FdbckShadowHost, { style: cssVars, children: card });
+}
+
+// src/components/FdbckProvider.tsx
+var import_react8 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var FdbckContext = (0, import_react8.createContext)(null);
+function FdbckProvider({ baseUrl, locale, style, children }) {
+  const [activeConfig, setActiveConfig] = (0, import_react8.useState)(null);
+  const resolverRef = (0, import_react8.useRef)(null);
+  const show = (0, import_react8.useCallback)((options) => {
+    return new Promise((resolve, reject) => {
+      resolverRef.current = { resolve, reject };
+      setActiveConfig(options);
+    });
+  }, []);
+  const dismiss = (0, import_react8.useCallback)(() => {
+    if (resolverRef.current) {
+      resolverRef.current.resolve({ status: "dismissed" });
+      resolverRef.current = null;
+    }
+    setActiveConfig(null);
+  }, []);
+  const handleSubmit = (0, import_react8.useCallback)((value) => {
+    if (resolverRef.current) {
+      resolverRef.current.resolve({ status: "submitted", value });
+      resolverRef.current = null;
+    }
+    setActiveConfig(null);
+  }, []);
+  const handleError = (0, import_react8.useCallback)((err) => {
+    activeConfig;
+  }, []);
+  const contextValue = {
+    show,
+    dismiss,
+    isActive: activeConfig !== null,
+    baseUrl,
+    locale,
+    style
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(FdbckContext.Provider, { value: contextValue, children: [
+    children,
+    activeConfig && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      FdbckWidget,
+      {
+        token: activeConfig.token,
+        mode: activeConfig.mode || "modal",
+        open: activeConfig.open ?? true,
+        baseUrl: activeConfig.baseUrl || baseUrl,
+        delay: activeConfig.delay,
+        autoCloseAfter: activeConfig.autoCloseAfter,
+        closeOnOverlayClick: activeConfig.closeOnOverlayClick,
+        closeOnEscape: activeConfig.closeOnEscape,
+        locale: activeConfig.locale || locale,
+        style: activeConfig.style || style,
+        onSubmit: handleSubmit,
+        onDismiss: dismiss,
+        onError: handleError
+      }
+    )
+  ] });
+}
+
+// src/hooks/useFdbck.ts
+var import_react9 = require("react");
+function useFdbck() {
+  const context = (0, import_react9.useContext)(FdbckContext);
+  if (!context) {
+    throw new Error("useFdbck must be used within a <FdbckProvider>");
+  }
+  return {
+    show: context.show,
+    dismiss: context.dismiss,
+    isActive: context.isActive
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FdbckError,
+  FdbckProvider,
+  FdbckWidget,
+  useFdbck
+});