anton-bakker-feedback 0.1.0

package/dist/react.js

@@ -0,0 +1,1576 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React, { createContext, lazy, useMemo, useReducer, useEffect, useCallback, Suspense, useContext, useState, useRef } from "react";
+import { v as validateConfig, b as resolveConfig, d as detectLocale, t, w as withSpan } from "./chunks/i18n-RpKqSWAT.js";
+const FeedbackContext = createContext(null);
+FeedbackContext.displayName = "FeedbackContext";
+const INITIAL_PANEL_STATE = { status: "idle" };
+function buildInitialCapturedContext() {
+  const isClient = typeof window !== "undefined";
+  return {
+    url: isClient ? window.location.href : "",
+    pageTitle: isClient ? document.title : "",
+    userAgent: isClient ? navigator.userAgent : "",
+    viewport: isClient ? { width: window.innerWidth, height: window.innerHeight } : { width: 0, height: 0 },
+    locale: isClient ? navigator.language : "en",
+    consoleErrors: [],
+    screenshots: [],
+    duplicateCandidates: []
+  };
+}
+const INITIAL_INTERNAL_STATE = {
+  panel: INITIAL_PANEL_STATE,
+  capturedContext: null,
+  capabilities: { bedrock: false, dynamodb: false, detected: false },
+  preservedClassification: {}
+};
+function feedbackReducer(state, action) {
+  switch (action.type) {
+    case "OPEN": {
+      if (state.panel.status !== "idle") return state;
+      const base = buildInitialCapturedContext();
+      const merged = "payload" in action && action.payload ? { ...base, ...action.payload } : base;
+      const newPanel = state.capabilities.bedrock ? {
+        status: "dialogue",
+        history: [],
+        step: 0,
+        totalSteps: 5,
+        awaitingResponse: false,
+        classification: {},
+        error: null
+      } : {
+        status: "confirming",
+        classification: {},
+        submitting: false,
+        error: null
+      };
+      return { ...state, panel: newPanel, capturedContext: merged };
+    }
+    case "CLOSE":
+      return {
+        ...state,
+        panel: INITIAL_PANEL_STATE,
+        capturedContext: null,
+        preservedClassification: {}
+      };
+    case "SEND_MESSAGE": {
+      if (state.panel.status !== "dialogue") return state;
+      const newHistory = [
+        ...state.panel.history,
+        {
+          role: "user",
+          content: action.payload.message,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        }
+      ];
+      return {
+        ...state,
+        panel: {
+          ...state.panel,
+          history: newHistory,
+          awaitingResponse: true,
+          error: null
+        }
+      };
+    }
+    case "RECEIVE_RESPONSE": {
+      if (state.panel.status !== "dialogue") return state;
+      const { response, step, totalSteps, classification, done } = action.payload;
+      const mergedClassification = {
+        ...state.panel.classification,
+        ...classification ?? {}
+      };
+      const newHistory = [
+        ...state.panel.history,
+        {
+          role: "assistant",
+          content: response,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        }
+      ];
+      if (done === true) {
+        return {
+          ...state,
+          panel: {
+            status: "confirming",
+            classification: mergedClassification,
+            submitting: false,
+            error: null
+          },
+          preservedClassification: mergedClassification
+        };
+      }
+      return {
+        ...state,
+        panel: {
+          ...state.panel,
+          history: newHistory,
+          step,
+          totalSteps,
+          awaitingResponse: false,
+          classification: mergedClassification
+        }
+      };
+    }
+    case "DIALOGUE_ERROR": {
+      if (state.panel.status !== "dialogue") return state;
+      return {
+        ...state,
+        panel: {
+          ...state.panel,
+          awaitingResponse: false,
+          error: action.payload.error
+        }
+      };
+    }
+    case "START_RECORDING": {
+      const currentClassification = state.panel.status === "dialogue" || state.panel.status === "confirming" ? state.panel.classification : state.preservedClassification;
+      return {
+        ...state,
+        panel: {
+          status: "recording",
+          recordingMode: "capture",
+          captureCount: state.capturedContext?.screenshots.length ?? 0
+        },
+        preservedClassification: currentClassification
+      };
+    }
+    case "SET_RECORDING_MODE": {
+      if (state.panel.status !== "recording") return state;
+      return {
+        ...state,
+        panel: {
+          ...state.panel,
+          recordingMode: action.payload.mode
+        }
+      };
+    }
+    case "ADD_SCREENSHOT": {
+      if (!state.capturedContext) return state;
+      const existing = state.capturedContext.screenshots;
+      if (existing.length >= 10) return state;
+      const updated = [...existing, action.payload];
+      return {
+        ...state,
+        capturedContext: { ...state.capturedContext, screenshots: updated },
+        panel: state.panel.status === "recording" ? { ...state.panel, captureCount: updated.length } : state.panel
+      };
+    }
+    case "REMOVE_SCREENSHOT": {
+      if (!state.capturedContext) return state;
+      const filtered = state.capturedContext.screenshots.filter(
+        (s) => s.id !== action.payload.id
+      );
+      return {
+        ...state,
+        capturedContext: { ...state.capturedContext, screenshots: filtered },
+        panel: state.panel.status === "recording" ? { ...state.panel, captureCount: filtered.length } : state.panel
+      };
+    }
+    case "CONFIRM": {
+      const classification = "payload" in action && action.payload?.classification ? action.payload.classification : state.preservedClassification;
+      return {
+        ...state,
+        panel: {
+          status: "confirming",
+          classification,
+          submitting: false,
+          error: null
+        },
+        preservedClassification: classification
+      };
+    }
+    case "SUBMIT_START": {
+      if (state.panel.status !== "confirming") return state;
+      return {
+        ...state,
+        panel: { ...state.panel, submitting: true, error: null }
+      };
+    }
+    case "SUBMIT_SUCCESS": {
+      return {
+        ...state,
+        panel: {
+          status: "submitted",
+          feedbackId: action.payload.feedbackId
+        }
+      };
+    }
+    case "SUBMIT_ERROR": {
+      if (state.panel.status !== "confirming") return state;
+      return {
+        ...state,
+        panel: {
+          ...state.panel,
+          submitting: false,
+          error: action.payload.error
+        }
+      };
+    }
+    case "SET_CAPABILITIES": {
+      return { ...state, capabilities: action.payload };
+    }
+    default:
+      return state;
+  }
+}
+async function detectCapabilities(submitUrl, dialogueUrl) {
+  let dynamodb = true;
+  let bedrock = !!dialogueUrl;
+  if (dialogueUrl) {
+    try {
+      const ctrl = new AbortController();
+      const timeoutId = setTimeout(() => ctrl.abort(), 3e3);
+      await fetch(dialogueUrl, { method: "HEAD", signal: ctrl.signal });
+      clearTimeout(timeoutId);
+      bedrock = true;
+    } catch {
+      bedrock = false;
+    }
+  }
+  try {
+    const ctrl = new AbortController();
+    const timeoutId = setTimeout(() => ctrl.abort(), 3e3);
+    await fetch(submitUrl, { method: "HEAD", signal: ctrl.signal });
+    clearTimeout(timeoutId);
+    dynamodb = true;
+  } catch {
+    dynamodb = false;
+  }
+  return { bedrock, dynamodb, detected: true };
+}
+const FeedbackPanelLazy = lazy(
+  () => Promise.resolve().then(() => FeedbackPanel$1).then((m) => ({ default: m.FeedbackPanel }))
+);
+function FeedbackProvider({
+  config,
+  canSubmitFeedback,
+  locale: localeProp,
+  user,
+  children
+}) {
+  const resolvedConfig = useMemo(() => {
+    const validation = validateConfig(config);
+    if (!validation.valid) {
+      console.error(
+        "[anton-bakker-feedback/react] FeedbackProvider received invalid config:\n" + validation.errors.map((e) => `  • ${e}`).join("\n") + "\nFeedbackPanel will not render until config is corrected."
+      );
+      return null;
+    }
+    return resolveConfig(config);
+  }, [config]);
+  const locale = useMemo(() => {
+    const preferred = localeProp ?? (typeof navigator !== "undefined" ? navigator.language : "en");
+    return detectLocale(preferred);
+  }, [localeProp]);
+  const authorised = useMemo(
+    () => canSubmitFeedback(user),
+    [canSubmitFeedback, user]
+  );
+  const [internalState, dispatch] = useReducer(
+    feedbackReducer,
+    INITIAL_INTERNAL_STATE
+  );
+  useEffect(() => {
+    if (!resolvedConfig) return;
+    let cancelled = false;
+    void detectCapabilities(
+      resolvedConfig.transport.submitUrl,
+      resolvedConfig.transport.dialogueUrl
+    ).then((caps) => {
+      if (!cancelled) {
+        dispatch({ type: "SET_CAPABILITIES", payload: caps });
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [resolvedConfig]);
+  const open = useCallback(
+    (trigger) => {
+      if (trigger !== void 0) {
+        dispatch({ type: "OPEN", payload: trigger });
+      } else {
+        dispatch({ type: "OPEN" });
+      }
+    },
+    []
+  );
+  const close = useCallback(() => {
+    dispatch({ type: "CLOSE" });
+  }, []);
+  const contextValue = useMemo(() => {
+    if (!resolvedConfig) return null;
+    return {
+      config: resolvedConfig,
+      state: internalState.panel,
+      isOpen: internalState.panel.status !== "idle",
+      capturedContext: internalState.capturedContext,
+      capabilities: internalState.capabilities,
+      locale,
+      open,
+      close,
+      dispatch
+    };
+  }, [resolvedConfig, internalState, locale, open, close]);
+  if (!contextValue) {
+    return React.createElement(React.Fragment, null, children);
+  }
+  return /* @__PURE__ */ jsxs(FeedbackContext.Provider, { value: contextValue, children: [
+    children,
+    authorised && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(FeedbackPanelLazy, {}) })
+  ] });
+}
+function useFeedback() {
+  const ctx = useContext(FeedbackContext);
+  if (ctx === null) {
+    throw new Error(
+      '[useFeedback] Could not find FeedbackContext. Make sure your component is rendered inside a <FeedbackProvider>. Import from: import { FeedbackProvider } from "anton-bakker-feedback/react"'
+    );
+  }
+  return {
+    open: ctx.open,
+    close: ctx.close,
+    state: ctx.state,
+    isOpen: ctx.isOpen,
+    capturedContext: ctx.capturedContext,
+    _context: ctx
+  };
+}
+const BUTTON_STYLES = `
+.feedback-button {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: var(--feedback-z-index, 9998);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 12px 16px;
+  border-radius: 24px;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  background-color: var(--feedback-button-bg, #4f46e5);
+  color: var(--feedback-button-color, #ffffff);
+  box-shadow: var(--feedback-button-shadow, 0 4px 12px rgba(79, 70, 229, 0.35));
+  transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
+  -webkit-user-select: none;
+  user-select: none;
+  outline: none;
+}
+
+.feedback-button:hover {
+  background-color: var(--feedback-button-hover-bg, #4338ca);
+  box-shadow: var(--feedback-button-hover-shadow, 0 6px 16px rgba(79, 70, 229, 0.45));
+}
+
+.feedback-button:focus-visible {
+  outline: 2px solid var(--feedback-button-focus-ring, #4f46e5);
+  outline-offset: 2px;
+  box-shadow: var(--feedback-button-shadow, 0 4px 12px rgba(79, 70, 229, 0.35)),
+              0 0 0 4px var(--feedback-button-focus-ring-spread, rgba(79, 70, 229, 0.2));
+}
+
+.feedback-button:active {
+  background-color: var(--feedback-button-active-bg, #3730a3);
+  transform: scale(0.97);
+}
+
+.feedback-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.feedback-button__icon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
+`;
+let stylesInjected = false;
+function injectStyles() {
+  if (stylesInjected || typeof document === "undefined") return;
+  const style = document.createElement("style");
+  style.setAttribute("data-feedback-button", "");
+  style.textContent = BUTTON_STYLES;
+  document.head.appendChild(style);
+  stylesInjected = true;
+}
+function FeedbackButton({ className, label }) {
+  const ctx = useContext(FeedbackContext);
+  const { state, open } = useFeedback();
+  React.useEffect(() => {
+    injectStyles();
+  }, []);
+  if (state.status !== "idle") return null;
+  const locale = ctx?.locale ?? "en";
+  const customTranslations = ctx?.config.i18n.customTranslations;
+  const tooltipFromI18n = t("feedback.button.tooltip", locale, customTranslations) || t("feedback.button.open", locale, customTranslations);
+  const tooltip = label ?? tooltipFromI18n;
+  const handleClick = () => {
+    open();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      open();
+    }
+  };
+  const classNames = ["feedback-button", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: classNames,
+      "aria-label": tooltip,
+      title: tooltip,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "feedback-button__icon",
+            "aria-hidden": "true",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
+          }
+        ),
+        tooltip
+      ]
+    }
+  );
+}
+function MessageBubble({ entry }) {
+  const isUser = entry.role === "user";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `feedback-dialogue__bubble feedback-dialogue__bubble--${entry.role}`,
+      "data-role": entry.role,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "feedback-dialogue__bubble-label", children: isUser ? "You" : "Assistant" }),
+        /* @__PURE__ */ jsx("p", { className: "feedback-dialogue__bubble-content", children: entry.content })
+      ]
+    }
+  );
+}
+function TypingIndicator() {
+  return /* @__PURE__ */ jsxs("div", { className: "feedback-dialogue__typing", "aria-live": "polite", "aria-label": "Assistant is typing", children: [
+    /* @__PURE__ */ jsx("span", { className: "feedback-dialogue__typing-dot" }),
+    /* @__PURE__ */ jsx("span", { className: "feedback-dialogue__typing-dot" }),
+    /* @__PURE__ */ jsx("span", { className: "feedback-dialogue__typing-dot" })
+  ] });
+}
+function FeedbackDialogue({ className }) {
+  const ctx = useContext(FeedbackContext);
+  const { state, _context } = useFeedback();
+  const [inputValue, setInputValue] = useState("");
+  const messagesEndRef = useRef(null);
+  const locale = ctx?.locale ?? "en";
+  const customTranslations = ctx?.config.i18n.customTranslations;
+  const capabilities = ctx?.capabilities;
+  const dialogueUrl = ctx?.config.transport.dialogueUrl;
+  const isDialogue = state.status === "dialogue";
+  const history = isDialogue ? state.history : [];
+  const step = isDialogue ? state.step : 0;
+  const totalSteps = isDialogue ? state.totalSteps : 5;
+  const awaitingResponse = isDialogue && state.awaitingResponse;
+  const error = isDialogue ? state.error : null;
+  const canSkipToForm = capabilities?.bedrock === false || error !== null && error !== "";
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [history.length, awaitingResponse]);
+  const handleSend = useCallback(() => {
+    const trimmed = inputValue.trim();
+    if (!trimmed || awaitingResponse || !isDialogue) return;
+    _context.dispatch({ type: "SEND_MESSAGE", payload: { message: trimmed } });
+    setInputValue("");
+    if (dialogueUrl) {
+      const url = dialogueUrl;
+      const newStep = step + 1;
+      const done = newStep >= totalSteps;
+      void fetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ message: trimmed, step: newStep })
+      }).then(async (res) => {
+        if (!res.ok) throw new Error(`Dialogue error: ${res.status}`);
+        const data = await res.json();
+        _context.dispatch({
+          type: "RECEIVE_RESPONSE",
+          payload: {
+            response: data.response,
+            step: newStep,
+            totalSteps,
+            ...data.classification !== void 0 && { classification: data.classification },
+            done: data.done ?? done
+          }
+        });
+      }).catch((err) => {
+        _context.dispatch({
+          type: "DIALOGUE_ERROR",
+          payload: {
+            error: err instanceof Error ? err.message : "Dialogue request failed"
+          }
+        });
+      });
+    } else {
+      setTimeout(() => {
+        const newStepVal = step + 1;
+        const doneVal = newStepVal >= totalSteps;
+        _context.dispatch({
+          type: "RECEIVE_RESPONSE",
+          payload: {
+            response: doneVal ? t("feedback.dialogue.complete", locale, customTranslations) : t("feedback.dialogue.turnPrompt", locale, customTranslations),
+            step: newStepVal,
+            totalSteps,
+            done: doneVal
+          }
+        });
+      }, 800);
+    }
+  }, [inputValue, awaitingResponse, isDialogue, _context, step, totalSteps, locale, customTranslations, dialogueUrl]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend]
+  );
+  if (state.status !== "dialogue") return null;
+  const handleSkipToForm = () => {
+    _context.dispatch({ type: "CONFIRM", payload: { classification: {} } });
+  };
+  const handleStartRecording = () => {
+    _context.dispatch({ type: "START_RECORDING" });
+  };
+  const hasExchange = history.length > 0;
+  const classNames = ["feedback-dialogue", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classNames, role: "region", "aria-label": "Feedback dialogue", children: [
+    /* @__PURE__ */ jsx("div", { className: "feedback-dialogue__progress", "aria-label": `Step ${step} of ${totalSteps}`, children: /* @__PURE__ */ jsx("span", { className: "feedback-dialogue__step", children: step > 0 ? `${step} / ${totalSteps}` : "" }) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "feedback-dialogue__messages",
+        "aria-live": "polite",
+        "aria-relevant": "additions",
+        children: [
+          history.length === 0 && /* @__PURE__ */ jsx("p", { className: "feedback-dialogue__opening", children: t("feedback.dialogue.opening", locale, customTranslations) }),
+          history.map((entry, idx) => /* @__PURE__ */ jsx(MessageBubble, { entry }, `${entry.role}-${idx}`)),
+          awaitingResponse && /* @__PURE__ */ jsx(TypingIndicator, {}),
+          /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx("div", { className: "feedback-dialogue__error", role: "alert", children: error }),
+    /* @__PURE__ */ jsxs("div", { className: "feedback-dialogue__actions", children: [
+      hasExchange && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "feedback-dialogue__action-btn",
+          onClick: handleStartRecording,
+          children: t("feedback.button.screenshot", locale, customTranslations)
+        }
+      ),
+      canSkipToForm && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "feedback-dialogue__skip-btn",
+          onClick: handleSkipToForm,
+          "aria-label": "Skip to form",
+          children: "Skip to form"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "feedback-dialogue__input-area", children: [
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          className: "feedback-dialogue__textarea",
+          value: inputValue,
+          onChange: (e) => setInputValue(e.target.value),
+          onKeyDown: handleKeyDown,
+          disabled: awaitingResponse,
+          placeholder: awaitingResponse ? t("feedback.dialogue.thinking", locale, customTranslations) : "Type your message… (Enter to send, Shift+Enter for newline)",
+          "aria-label": "Dialogue input",
+          rows: 3
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "feedback-dialogue__send-btn",
+          onClick: handleSend,
+          disabled: awaitingResponse || !inputValue.trim(),
+          "aria-label": "Send message",
+          children: awaitingResponse ? /* @__PURE__ */ jsx("span", { className: "feedback-dialogue__spinner", "aria-hidden": "true" }) : "→"
+        }
+      )
+    ] })
+  ] });
+}
+async function captureScreenshot() {
+  try {
+    const h2cName = "html2canvas";
+    const html2canvasModule = await import(
+      /* @vite-ignore */
+      h2cName
+    ).catch(
+      () => null
+    );
+    if (html2canvasModule?.default) {
+      const canvas = await html2canvasModule.default(document.body);
+      return canvas.toDataURL("image/png");
+    }
+  } catch {
+  }
+  try {
+    if (typeof navigator !== "undefined" && navigator.mediaDevices && "getDisplayMedia" in navigator.mediaDevices) {
+      const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
+      const video = document.createElement("video");
+      video.srcObject = stream;
+      await video.play();
+      const canvas = document.createElement("canvas");
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      canvas.getContext("2d")?.drawImage(video, 0, 0);
+      stream.getTracks().forEach((track) => track.stop());
+      return canvas.toDataURL("image/png");
+    }
+  } catch {
+  }
+  return null;
+}
+function FeedbackRecorder({ className }) {
+  const ctx = useContext(FeedbackContext);
+  const { state, capturedContext, _context } = useFeedback();
+  const [apiSupported, setApiSupported] = useState(null);
+  const [capturing, setCapturing] = useState(false);
+  const locale = ctx?.locale ?? "en";
+  const customTranslations = ctx?.config.i18n.customTranslations;
+  const isRecording = state.status === "recording";
+  const recordingMode = isRecording ? state.recordingMode : null;
+  const captureCount = isRecording ? state.captureCount : 0;
+  const screenshots = capturedContext?.screenshots ?? [];
+  useEffect(() => {
+    if (!isRecording) return;
+    const hasGetDisplayMedia = typeof navigator !== "undefined" && !!navigator.mediaDevices && "getDisplayMedia" in navigator.mediaDevices;
+    setApiSupported(hasGetDisplayMedia);
+  }, [isRecording]);
+  const handleCaptureClick = useCallback(async () => {
+    if (capturing || screenshots.length >= 10) return;
+    setCapturing(true);
+    try {
+      const dataUrl = await captureScreenshot();
+      if (dataUrl) {
+        const entry = {
+          id: crypto.randomUUID(),
+          dataUrl,
+          capturedAt: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        _context.dispatch({ type: "ADD_SCREENSHOT", payload: entry });
+        _context.dispatch({
+          type: "SET_RECORDING_MODE",
+          payload: { mode: "review" }
+        });
+      } else {
+        setApiSupported(false);
+      }
+    } catch {
+      setApiSupported(false);
+    } finally {
+      setCapturing(false);
+    }
+  }, [capturing, screenshots.length, _context]);
+  if (state.status !== "recording") return null;
+  if (recordingMode === "minimised") {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: ["feedback-recorder__badge", className].filter(Boolean).join(" "),
+        onClick: () => _context.dispatch({
+          type: "SET_RECORDING_MODE",
+          payload: { mode: "capture" }
+        }),
+        "aria-label": `${captureCount} screenshot${captureCount !== 1 ? "s" : ""} captured. Click to resume`,
+        children: [
+          "📷 ",
+          captureCount
+        ]
+      }
+    );
+  }
+  if (apiSupported === false) {
+    return /* @__PURE__ */ jsxs("div", { className: ["feedback-recorder", className].filter(Boolean).join(" "), children: [
+      /* @__PURE__ */ jsxs("p", { className: "feedback-recorder__unsupported-msg", children: [
+        t("feedback.toast.screenshotError", locale, customTranslations),
+        " ",
+        "Screenshot capture is not supported in this browser."
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "feedback-recorder__continue-btn",
+          onClick: () => _context.dispatch({ type: "CONFIRM", payload: {} }),
+          children: "Continue without screenshots"
+        }
+      )
+    ] });
+  }
+  if (recordingMode === "capture") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: ["feedback-recorder", "feedback-recorder--capture", className].filter(Boolean).join(" "),
+        style: { cursor: "crosshair" },
+        onClick: () => void handleCaptureClick(),
+        role: "button",
+        tabIndex: 0,
+        "aria-label": "Click anywhere to capture screenshot",
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            void handleCaptureClick();
+          }
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "feedback-recorder__capture-overlay", children: [
+          /* @__PURE__ */ jsx("p", { children: capturing ? "Capturing…" : "Click anywhere to capture a screenshot" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "feedback-recorder__minimise-btn",
+              onClick: (e) => {
+                e.stopPropagation();
+                _context.dispatch({
+                  type: "SET_RECORDING_MODE",
+                  payload: { mode: "minimised" }
+                });
+              },
+              children: "Minimise"
+            }
+          ),
+          screenshots.length > 0 && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "feedback-recorder__review-btn",
+              onClick: (e) => {
+                e.stopPropagation();
+                _context.dispatch({
+                  type: "SET_RECORDING_MODE",
+                  payload: { mode: "review" }
+                });
+              },
+              children: [
+                "Review (",
+                screenshots.length,
+                ")"
+              ]
+            }
+          )
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["feedback-recorder", "feedback-recorder--review", className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx("h3", { className: "feedback-recorder__title", children: screenshots.length === 0 ? "No screenshots yet" : `${screenshots.length} screenshot${screenshots.length !== 1 ? "s" : ""}` }),
+        screenshots.length > 0 && /* @__PURE__ */ jsx("div", { className: "feedback-recorder__thumbnails", role: "list", children: screenshots.map((shot) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "feedback-recorder__thumbnail",
+            role: "listitem",
+            children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: shot.dataUrl,
+                  alt: `Screenshot captured at ${shot.capturedAt}`,
+                  className: "feedback-recorder__thumbnail-img"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "feedback-recorder__delete-btn",
+                  "aria-label": `${t("feedback.button.removeScreenshot", locale, customTranslations)} captured at ${shot.capturedAt}`,
+                  onClick: () => _context.dispatch({
+                    type: "REMOVE_SCREENSHOT",
+                    payload: { id: shot.id }
+                  }),
+                  children: "×"
+                }
+              )
+            ]
+          },
+          shot.id
+        )) }),
+        /* @__PURE__ */ jsxs("div", { className: "feedback-recorder__review-actions", children: [
+          screenshots.length < 10 && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "feedback-recorder__add-btn",
+              onClick: () => _context.dispatch({
+                type: "SET_RECORDING_MODE",
+                payload: { mode: "capture" }
+              }),
+              children: t("feedback.button.screenshot", locale, customTranslations)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "feedback-recorder__done-btn",
+              onClick: () => _context.dispatch({ type: "CONFIRM", payload: {} }),
+              children: "Done"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function validateForm(values) {
+  const errors = {};
+  if (!values.title || values.title.trim().length < 10) {
+    errors.title = "Title is required (minimum 10 characters)";
+  }
+  if (!values.type) {
+    errors.type = "Type is required";
+  }
+  return errors;
+}
+function FeedbackConfirm({ className }) {
+  const ctx = useContext(FeedbackContext);
+  const { state, capturedContext, _context } = useFeedback();
+  const locale = ctx?.locale ?? "en";
+  const customTranslations = ctx?.config.i18n.customTranslations;
+  const submitUrl = ctx?.config.transport.submitUrl ?? "";
+  const confirming = state.status === "confirming";
+  const classification = confirming ? state.classification : {};
+  const submitting = confirming && state.submitting;
+  const submitError = confirming ? state.error : null;
+  const [values, setValues] = useState(() => ({
+    title: classification.title ?? "",
+    description: classification.description ?? "",
+    type: classification.type ?? "",
+    scope: classification.scope ?? "",
+    size: classification.size ?? ""
+  }));
+  const [touched, setTouched] = useState({});
+  useEffect(() => {
+    if (!confirming) return;
+    setValues((prev) => ({
+      title: classification.title ?? prev.title,
+      description: classification.description ?? prev.description,
+      type: classification.type ?? prev.type,
+      scope: classification.scope ?? prev.scope,
+      size: classification.size ?? prev.size
+    }));
+  }, [confirming, classification.title, classification.description, classification.type, classification.scope, classification.size]);
+  const formErrors = validateForm(values);
+  const isValid = Object.keys(formErrors).length === 0;
+  const screenshots = capturedContext?.screenshots ?? [];
+  const consoleErrors = capturedContext?.consoleErrors ?? [];
+  const duplicates = capturedContext?.duplicateCandidates ?? [];
+  const handleChange = useCallback(
+    (field, value) => {
+      setValues((prev) => ({ ...prev, [field]: value }));
+      setTouched((prev) => ({ ...prev, [field]: true }));
+    },
+    []
+  );
+  const handleSubmit = useCallback(async () => {
+    setTouched({ title: true, type: true });
+    if (!isValid || !values.type) return;
+    _context.dispatch({ type: "SUBMIT_START" });
+    const submissionPayload = {
+      title: values.title.trim(),
+      type: values.type
+    };
+    const descTrimmed = values.description.trim();
+    if (descTrimmed) submissionPayload.description = descTrimmed;
+    if (values.scope) submissionPayload.scope = values.scope;
+    if (values.size) submissionPayload.size = values.size;
+    if (screenshots.length > 0) {
+      submissionPayload.screenshots = screenshots.map((s) => ({
+        dataUrl: s.dataUrl,
+        capturedAt: s.capturedAt
+      }));
+    }
+    if (consoleErrors.length > 0) submissionPayload.consoleErrors = consoleErrors;
+    if (capturedContext) {
+      submissionPayload.systemInfo = {
+        url: capturedContext.url,
+        userAgent: capturedContext.userAgent,
+        viewport: capturedContext.viewport,
+        locale: capturedContext.locale
+      };
+    }
+    try {
+      const response = await fetch(submitUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(submissionPayload)
+      });
+      if (!response.ok) {
+        const body = await response.json().catch(() => ({}));
+        _context.dispatch({
+          type: "SUBMIT_ERROR",
+          payload: {
+            error: body.error ?? t("feedback.status.error", locale, customTranslations)
+          }
+        });
+        return;
+      }
+      const result = await response.json();
+      const feedbackId = result.id ?? result.feedbackId ?? "unknown";
+      _context.dispatch({ type: "SUBMIT_SUCCESS", payload: { feedbackId } });
+    } catch (err) {
+      _context.dispatch({
+        type: "SUBMIT_ERROR",
+        payload: {
+          error: err instanceof Error ? err.message : t("feedback.status.error", locale, customTranslations)
+        }
+      });
+    }
+  }, [isValid, values, screenshots, consoleErrors, capturedContext, locale, customTranslations, submitUrl, _context]);
+  if (state.status !== "confirming") return null;
+  const classNames = ["feedback-confirm", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      className: classNames,
+      onSubmit: (e) => {
+        e.preventDefault();
+        void handleSubmit();
+      },
+      "aria-label": "Submit feedback",
+      noValidate: true,
+      children: [
+        /* @__PURE__ */ jsx("h2", { id: "feedback-confirm-title", className: "feedback-confirm__title", children: "Review your feedback" }),
+        duplicates.length > 0 && /* @__PURE__ */ jsxs("div", { className: "feedback-confirm__duplicate-warning", role: "alert", children: [
+          /* @__PURE__ */ jsx("strong", { children: "Similar feedback already exists:" }),
+          /* @__PURE__ */ jsx("ul", { children: duplicates.map((d) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", { href: `#${d.id}`, className: "feedback-confirm__duplicate-link", children: [
+            d.title,
+            " (",
+            d.id,
+            ")"
+          ] }) }, d.id)) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "feedback-confirm__field", children: [
+          /* @__PURE__ */ jsxs("label", { htmlFor: "feedback-confirm-title-input", className: "feedback-confirm__label", children: [
+            t("feedback.confirm.titleLabel", locale, customTranslations) || "Title",
+            " ",
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "feedback-confirm__required", children: "*" }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "(required)" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: "feedback-confirm-title-input",
+              type: "text",
+              className: "feedback-confirm__input",
+              value: values.title,
+              onChange: (e) => handleChange("title", e.target.value),
+              "aria-required": "true",
+              "aria-invalid": touched.title && !!formErrors.title,
+              "aria-describedby": touched.title && formErrors.title ? "feedback-confirm-title-error" : void 0
+            }
+          ),
+          touched.title && formErrors.title && /* @__PURE__ */ jsx(
+            "span",
+            {
+              id: "feedback-confirm-title-error",
+              className: "feedback-confirm__error",
+              role: "alert",
+              children: formErrors.title
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "feedback-confirm__field", children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: "feedback-confirm-description", className: "feedback-confirm__label", children: t("feedback.confirm.descriptionLabel", locale, customTranslations) || "Description" }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              id: "feedback-confirm-description",
+              className: "feedback-confirm__textarea",
+              value: values.description,
+              onChange: (e) => handleChange("description", e.target.value),
+              rows: 4
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "feedback-confirm__field", children: [
+          /* @__PURE__ */ jsxs("label", { htmlFor: "feedback-confirm-type", className: "feedback-confirm__label", children: [
+            t("feedback.confirm.typeLabel", locale, customTranslations) || "Type",
+            " ",
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "feedback-confirm__required", children: "*" }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "(required)" })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              id: "feedback-confirm-type",
+              className: "feedback-confirm__select",
+              value: values.type,
+              onChange: (e) => handleChange("type", e.target.value),
+              "aria-required": "true",
+              "aria-invalid": touched.type && !!formErrors.type,
+              "aria-describedby": touched.type && formErrors.type ? "feedback-confirm-type-error" : void 0,
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: t("feedback.form.typePlaceholder", locale, customTranslations) }),
+                /* @__PURE__ */ jsx("option", { value: "bug", children: t("feedback.types.bug", locale, customTranslations) }),
+                /* @__PURE__ */ jsx("option", { value: "feature", children: t("feedback.types.feature", locale, customTranslations) }),
+                /* @__PURE__ */ jsx("option", { value: "ux", children: t("feedback.types.ux", locale, customTranslations) }),
+                /* @__PURE__ */ jsx("option", { value: "other", children: t("feedback.types.other", locale, customTranslations) })
+              ]
+            }
+          ),
+          touched.type && formErrors.type && /* @__PURE__ */ jsx(
+            "span",
+            {
+              id: "feedback-confirm-type-error",
+              className: "feedback-confirm__error",
+              role: "alert",
+              children: formErrors.type
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "feedback-confirm__field", children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: "feedback-confirm-scope", className: "feedback-confirm__label", children: t("feedback.confirm.scopeLabel", locale, customTranslations) || "Scope" }),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              id: "feedback-confirm-scope",
+              className: "feedback-confirm__select",
+              value: values.scope,
+              onChange: (e) => handleChange("scope", e.target.value),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: "Select scope (optional)" }),
+                /* @__PURE__ */ jsx("option", { value: "isolated", children: "Isolated" }),
+                /* @__PURE__ */ jsx("option", { value: "cross-cutting", children: "Cross-cutting" }),
+                /* @__PURE__ */ jsx("option", { value: "systemic", children: "Systemic" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "feedback-confirm__field", children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: "feedback-confirm-size", className: "feedback-confirm__label", children: t("feedback.confirm.sizeLabel", locale, customTranslations) || "Size" }),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              id: "feedback-confirm-size",
+              className: "feedback-confirm__select",
+              value: values.size,
+              onChange: (e) => handleChange("size", e.target.value),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: "Select size (optional)" }),
+                /* @__PURE__ */ jsx("option", { value: "trivial", children: "Trivial" }),
+                /* @__PURE__ */ jsx("option", { value: "small", children: "Small" }),
+                /* @__PURE__ */ jsx("option", { value: "medium", children: "Medium" }),
+                /* @__PURE__ */ jsx("option", { value: "large", children: "Large" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "feedback-confirm__context-section", "aria-label": "Captured context (read-only)", children: [
+          screenshots.length > 0 && /* @__PURE__ */ jsxs("div", { className: "feedback-confirm__screenshots", children: [
+            /* @__PURE__ */ jsxs("p", { className: "feedback-confirm__context-label", children: [
+              "Screenshots (",
+              screenshots.length,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "feedback-confirm__screenshot-thumbnails", children: screenshots.map((s) => /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: s.dataUrl,
+                alt: `Screenshot from ${s.capturedAt}`,
+                className: "feedback-confirm__screenshot-thumb"
+              },
+              s.id
+            )) })
+          ] }),
+          consoleErrors.length > 0 && /* @__PURE__ */ jsxs("p", { className: "feedback-confirm__console-count", children: [
+            consoleErrors.length,
+            " console error",
+            consoleErrors.length !== 1 ? "s" : "",
+            " captured"
+          ] }),
+          capturedContext && /* @__PURE__ */ jsxs("p", { className: "feedback-confirm__system-info", children: [
+            capturedContext.url,
+            " — ",
+            capturedContext.userAgent.slice(0, 60),
+            "…"
+          ] })
+        ] }),
+        submitError && /* @__PURE__ */ jsxs("div", { className: "feedback-confirm__submit-error", role: "alert", children: [
+          submitError,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "feedback-confirm__retry-btn",
+              onClick: () => void handleSubmit(),
+              children: t("feedback.status.retry", locale, customTranslations)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "submit",
+            className: "feedback-confirm__submit-btn",
+            disabled: submitting,
+            "aria-label": submitting ? t("feedback.status.submitting", locale, customTranslations) : t("feedback.button.submit", locale, customTranslations),
+            children: submitting ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "feedback-confirm__spinner", "aria-hidden": "true" }),
+              t("feedback.status.submitting", locale, customTranslations)
+            ] }) : t("feedback.button.submit", locale, customTranslations)
+          }
+        )
+      ]
+    }
+  );
+}
+function Portal({ children }) {
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+  if (!isClient || typeof document === "undefined") {
+    return React.createElement(React.Fragment, null, children);
+  }
+  return React.createElement(
+    React.Fragment,
+    null,
+    children
+  );
+}
+const FOCUSABLE_SELECTORS = [
+  "a[href]",
+  "button:not([disabled])",
+  "textarea:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(", ");
+function getFocusableElements(container) {
+  return Array.from(
+    container.querySelectorAll(FOCUSABLE_SELECTORS)
+  ).filter((el) => el.offsetParent !== null);
+}
+function useFocusTrap(containerRef, isActive) {
+  useEffect(() => {
+    if (!isActive || !containerRef.current) return;
+    const container = containerRef.current;
+    const focusables = getFocusableElements(container);
+    if (focusables.length > 0) {
+      focusables[0]?.focus();
+    } else {
+      container.focus();
+    }
+    function handleKeyDown(e) {
+      if (e.key !== "Tab") return;
+      const elements = getFocusableElements(container);
+      if (elements.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = elements[0];
+      const last = elements[elements.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last?.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first?.focus();
+        }
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isActive, containerRef]);
+}
+function SubmittedView({
+  feedbackId,
+  onClose,
+  locale,
+  customTranslations
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "feedback-panel__submitted", role: "status", children: [
+    /* @__PURE__ */ jsx("p", { className: "feedback-panel__submitted-icon", "aria-hidden": "true", children: "✓" }),
+    /* @__PURE__ */ jsx("h3", { className: "feedback-panel__submitted-title", children: t("feedback.status.success", locale, customTranslations) }),
+    /* @__PURE__ */ jsxs("p", { className: "feedback-panel__submitted-id", children: [
+      "Your feedback ID: ",
+      /* @__PURE__ */ jsx("strong", { children: feedbackId })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "feedback-panel__close-btn",
+        onClick: onClose,
+        children: t("feedback.button.close", locale, customTranslations)
+      }
+    )
+  ] });
+}
+function FeedbackPanel() {
+  const ctx = useContext(FeedbackContext);
+  const { state, isOpen, close, _context } = useFeedback();
+  const dialogRef = useRef(null);
+  const triggerRef = useRef(null);
+  const [showDiscardConfirm, setShowDiscardConfirm] = useState(false);
+  const locale = ctx?.locale ?? "en";
+  const customTranslations = ctx?.config.i18n.customTranslations;
+  useEffect(() => {
+    if (isOpen) {
+      triggerRef.current = document.activeElement;
+    } else {
+      setShowDiscardConfirm(false);
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen && triggerRef.current) {
+      triggerRef.current.focus();
+      triggerRef.current = null;
+    }
+  }, [isOpen]);
+  useFocusTrap(dialogRef, isOpen);
+  const handleEscape = useCallback(() => {
+    const hasStarted = state.status === "dialogue" && (state.history.length > 0 || state.step > 0);
+    if (hasStarted) {
+      setShowDiscardConfirm(true);
+    } else {
+      close();
+    }
+  }, [state, close]);
+  useEffect(() => {
+    if (!isOpen) return;
+    function onKeyDown(e) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        handleEscape();
+      }
+    }
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [isOpen, handleEscape]);
+  const handleBackdropClick = useCallback(
+    (e) => {
+      if (e.target === e.currentTarget) {
+        handleEscape();
+      }
+    },
+    [handleEscape]
+  );
+  const handleDiscardConfirm = () => {
+    setShowDiscardConfirm(false);
+    close();
+  };
+  const handleDiscardCancel = () => {
+    setShowDiscardConfirm(false);
+  };
+  const modalTitleId = "feedback-panel-title";
+  const modalTitle = state.status === "idle" ? "" : state.status === "dialogue" ? "Feedback conversation" : state.status === "recording" ? "Capture screenshot" : state.status === "confirming" ? "Review your feedback" : "Feedback submitted";
+  return /* @__PURE__ */ jsxs(Portal, { children: [
+    state.status === "idle" && /* @__PURE__ */ jsx(FeedbackButton, {}),
+    isOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "feedback-panel__backdrop",
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 9999,
+          backgroundColor: "var(--feedback-backdrop-bg, rgba(0, 0, 0, 0.5))",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        onClick: handleBackdropClick,
+        "aria-hidden": "false",
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: dialogRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": modalTitleId,
+            tabIndex: -1,
+            className: "feedback-panel__dialog",
+            style: {
+              position: "relative",
+              background: "var(--feedback-panel-bg, #ffffff)",
+              borderRadius: "var(--feedback-panel-radius, 12px)",
+              boxShadow: "var(--feedback-panel-shadow, 0 20px 60px rgba(0,0,0,0.3))",
+              width: "var(--feedback-panel-width, 540px)",
+              maxWidth: "95vw",
+              maxHeight: "90vh",
+              overflow: "auto",
+              padding: "var(--feedback-panel-padding, 24px)"
+            },
+            children: [
+              /* @__PURE__ */ jsx("h2", { id: modalTitleId, className: "feedback-panel__title", "aria-live": "polite", children: modalTitle }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "feedback-panel__close-button",
+                  "aria-label": t("feedback.button.close", locale, customTranslations),
+                  onClick: handleEscape,
+                  style: {
+                    position: "absolute",
+                    top: 16,
+                    right: 16,
+                    background: "none",
+                    border: "none",
+                    cursor: "pointer",
+                    fontSize: 20,
+                    lineHeight: 1,
+                    padding: "4px 8px",
+                    color: "inherit"
+                  },
+                  children: "×"
+                }
+              ),
+              showDiscardConfirm && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "feedback-panel__discard-confirm",
+                  role: "alertdialog",
+                  "aria-labelledby": "feedback-panel-discard-title",
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    background: "var(--feedback-panel-bg, #ffffff)",
+                    borderRadius: "inherit",
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: 16,
+                    padding: 24,
+                    zIndex: 1
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("p", { id: "feedback-panel-discard-title", style: { fontWeight: 600 }, children: "Discard your feedback?" }),
+                    /* @__PURE__ */ jsx("p", { children: "Your progress will be lost." }),
+                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 12 }, children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: "feedback-panel__discard-confirm-btn",
+                          onClick: handleDiscardConfirm,
+                          children: "Discard"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: "feedback-panel__discard-cancel-btn",
+                          onClick: handleDiscardCancel,
+                          autoFocus: true,
+                          children: "Continue editing"
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              state.status === "dialogue" && /* @__PURE__ */ jsx(FeedbackDialogue, {}),
+              state.status === "recording" && /* @__PURE__ */ jsx(FeedbackRecorder, {}),
+              state.status === "confirming" && /* @__PURE__ */ jsx(FeedbackConfirm, {}),
+              state.status === "submitted" && /* @__PURE__ */ jsx(
+                SubmittedView,
+                {
+                  feedbackId: state.feedbackId,
+                  onClose: () => _context.dispatch({ type: "CLOSE" }),
+                  locale,
+                  customTranslations: customTranslations ?? void 0
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+const FeedbackPanel$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  FeedbackPanel
+}, Symbol.toStringTag, { value: "Module" }));
+const VALID_TYPES = ["bug", "feature", "ux", "other"];
+function validatePayload(body) {
+  if (!body || typeof body !== "object" || Array.isArray(body)) {
+    return { valid: false, errors: ["Request body must be a JSON object"] };
+  }
+  const obj = body;
+  const errors = [];
+  if (!obj["title"] || typeof obj["title"] !== "string" || obj["title"].trim().length === 0) {
+    errors.push("title is required and must be a non-empty string");
+  } else if (obj["title"].trim().length < 1) {
+    errors.push("title must be at least 1 character");
+  }
+  if (!obj["type"]) {
+    errors.push("type is required");
+  } else if (!VALID_TYPES.includes(obj["type"])) {
+    errors.push(`type must be one of: ${VALID_TYPES.join(", ")} (got: ${String(obj["type"])})`);
+  }
+  if (obj["description"] !== void 0 && typeof obj["description"] !== "string") {
+    errors.push("description must be a string if provided");
+  }
+  if (errors.length > 0) {
+    return { valid: false, errors };
+  }
+  return {
+    valid: true,
+    payload: {
+      title: obj["title"].trim(),
+      ...obj["description"] !== void 0 && { description: obj["description"] },
+      type: obj["type"],
+      ...obj["scope"] !== void 0 && { scope: obj["scope"] },
+      ...obj["size"] !== void 0 && { size: obj["size"] },
+      ...obj["screenshots"] !== void 0 && { screenshots: obj["screenshots"] },
+      ...obj["consoleErrors"] !== void 0 && { consoleErrors: obj["consoleErrors"] },
+      ...obj["systemInfo"] !== void 0 && { systemInfo: obj["systemInfo"] }
+    }
+  };
+}
+async function storeFeedback(payload, config, feedbackId) {
+  if (!config.tableName || !config.awsRegion) {
+    return;
+  }
+  const dynamoPrefix = ["@aws", "-sdk/client-dynamo", "db"].join("");
+  const { DynamoDBClient, PutItemCommand } = await import(
+    /* @vite-ignore */
+    dynamoPrefix
+  );
+  const client = new DynamoDBClient({ region: config.awsRegion });
+  const now = (/* @__PURE__ */ new Date()).toISOString();
+  await client.send(
+    new PutItemCommand({
+      TableName: config.tableName,
+      Item: {
+        PK: { S: `PROJECT#${config.appName}` },
+        SK: { S: `FB#${now}#${feedbackId}` },
+        id: { S: feedbackId },
+        appName: { S: config.appName },
+        type: { S: payload.type },
+        status: { S: "open" },
+        content: { S: payload.title },
+        submittedAt: { S: now },
+        lastModifiedAt: { S: now },
+        environment: { S: config.environment ?? "production" }
+      }
+    })
+  );
+}
+function generateId() {
+  const date = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+  const uuid8 = crypto.randomUUID().replace(/-/g, "").slice(0, 8);
+  return `FB-${date}-${uuid8}`;
+}
+function createIntakeResolver(config) {
+  return async (req, res) => {
+    const contentType = (req.headers?.["content-type"] ?? "").toString();
+    if (!contentType.includes("application/json")) {
+      res.status(400).json({
+        errors: ["Content-Type must be application/json"]
+      });
+      return;
+    }
+    const validation = validatePayload(req.body);
+    if (!validation.valid) {
+      res.status(400).json({ errors: validation.errors });
+      return;
+    }
+    const { payload } = validation;
+    const feedbackId = generateId();
+    try {
+      await withSpan(
+        "feedback.submit",
+        {
+          app: config.appName,
+          environment: config.environment ?? "production"
+        },
+        async (span) => {
+          try {
+            await storeFeedback(payload, config, feedbackId);
+            if (span) {
+              span.setAttribute?.("feedbackId", feedbackId);
+            }
+            res.status(201).json({
+              id: feedbackId,
+              status: "open"
+            });
+          } catch (storageError) {
+            const isDynamoUnavailable = storageError instanceof Error && (storageError.name === "ServiceUnavailableException" || storageError.name === "ProvisionedThroughputExceededException" || storageError.message.includes("ECONNREFUSED") || storageError.message.includes("unavailable") || storageError.message.includes("DynamoDB"));
+            if (isDynamoUnavailable) {
+              res.status(503).json({
+                retryable: true,
+                error: "Storage service temporarily unavailable. Please try again."
+              });
+            } else {
+              res.status(503).json({
+                retryable: true,
+                error: "Failed to store feedback. Please try again."
+              });
+            }
+          }
+        }
+      );
+    } catch {
+      res.status(503).json({
+        retryable: true,
+        error: "Internal error. Please try again."
+      });
+    }
+  };
+}
+export {
+  FeedbackButton,
+  FeedbackConfirm,
+  FeedbackDialogue,
+  FeedbackPanel,
+  FeedbackProvider,
+  FeedbackRecorder,
+  createIntakeResolver,
+  useFeedback
+};
+//# sourceMappingURL=react.js.map