spaps-issue-reporting-react 0.1.0

package/dist/index.js

@@ -0,0 +1,933 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  FloatingIssueReportButton: () => FloatingIssueReportButton,
+  IssueReportingProvider: () => IssueReportingProvider,
+  ReportModeContext: () => ReportModeContext,
+  ReportableSection: () => ReportableSection,
+  defaultIssueReportingCopy: () => defaultIssueReportingCopy,
+  filterIssueReports: () => filterIssueReports,
+  getEntryPointClassName: () => getEntryPointClassName,
+  getEntryPointState: () => getEntryPointState,
+  getIssueNoteLengthMessage: () => getIssueNoteLengthMessage,
+  getIssueStatusBadgeLabel: () => getIssueStatusBadgeLabel,
+  getIssueStatusClassName: () => getIssueStatusClassName,
+  isClosedIssueStatus: () => isClosedIssueStatus,
+  isOpenIssueStatus: () => isOpenIssueStatus,
+  issueReportingKeys: () => issueReportingKeys,
+  useIssueReporting: () => useIssueReporting,
+  useIssueReportingHistory: () => useIssueReportingHistory,
+  useIssueReportingMutations: () => useIssueReportingMutations,
+  useIssueReportingStatus: () => useIssueReportingStatus,
+  useReportMode: () => useReportMode
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components.tsx
+var Dialog = __toESM(require("@radix-ui/react-dialog"));
+var Popover = __toESM(require("@radix-ui/react-popover"));
+var import_react3 = require("@phosphor-icons/react");
+var import_date_fns = require("date-fns");
+var import_react4 = require("react");
+
+// src/provider.tsx
+var import_react2 = require("react");
+var import_react_query = require("@tanstack/react-query");
+
+// src/report-mode.ts
+var import_react = require("react");
+var ReportModeContext = (0, import_react.createContext)(
+  null
+);
+function useReportMode() {
+  return (0, import_react.useContext)(ReportModeContext);
+}
+
+// src/provider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var LIST_LIMIT = 200;
+var NOTE_MIN_LENGTH = 10;
+var NOTE_MAX_LENGTH = 2e3;
+var initialModalState = {
+  isOpen: false,
+  mode: "create",
+  issueReportId: null,
+  issue: null,
+  target: null,
+  error: null,
+  isHydrating: false
+};
+var IssueReportingContext = (0, import_react2.createContext)(
+  void 0
+);
+var defaultIssueReportingCopy = {
+  entryAriaLabel: "Report issue",
+  popoverTitle: "Issue Reports",
+  reportNewAction: "Report New Issue",
+  filtersAll: "All",
+  filtersOpen: "Open",
+  filtersClosed: "Closed",
+  historyHelpText: "We read every report. If something is broken or could work better, report it here and it goes straight to the people building the app.",
+  historyLoading: "Loading issues...",
+  historyLoadFailed: "Failed to load issues",
+  emptyAll: "No issues reported yet",
+  emptyOpen: "No open issues",
+  emptyClosed: "No resolved or ignored issues",
+  reportModeTitle: "Report mode is active",
+  reportModeDescription: "Click a highlighted section to capture the broken surface.",
+  reportModeCancelAction: "Cancel",
+  createTitlePrefix: "Report Issue",
+  editTitlePrefix: "Edit Issue",
+  replyTitlePrefix: "Reply to",
+  createDescriptionPrefix: "Reporting issue for page:",
+  editDescription: "Update the issue description below.",
+  replyDescription: "The original issue was marked resolved or ignored. Describe why it still needs attention.",
+  notePlaceholder: "Describe the issue in detail (min 10 characters)...",
+  noteMinimumSuffix: "more characters needed",
+  keyboardShortcutHint: "Cmd/Ctrl + Enter to submit",
+  originalIssueLabel: "Original issue",
+  cancelAction: "Cancel",
+  submitAction: "Submit",
+  submittingAction: "Submitting...",
+  editAction: "Edit",
+  replyAction: "Reply",
+  hydrateLoading: "Loading the latest issue details...",
+  hydrateFailed: "Failed to load the latest issue details.",
+  retryAction: "Retry"
+};
+var issueReportingKeys = {
+  all: ["spaps-issue-reporting"],
+  status: () => [...issueReportingKeys.all, "status"],
+  history: () => [...issueReportingKeys.all, "history"],
+  detail: (issueReportId) => [...issueReportingKeys.all, "detail", issueReportId]
+};
+function resolvePageUrl(getPageUrl) {
+  if (getPageUrl) {
+    return getPageUrl();
+  }
+  if (typeof window === "undefined") {
+    return "/";
+  }
+  return `${window.location.pathname}${window.location.search}${window.location.hash}`;
+}
+function normalizeTarget(target, getPageUrl) {
+  if (typeof target === "string") {
+    const normalized = target.trim();
+    return {
+      component_key: normalized,
+      component_label: normalized,
+      page_url: resolvePageUrl(getPageUrl),
+      surface_ref: null,
+      metadata: {}
+    };
+  }
+  const key = target.componentKey.trim();
+  const label = (target.componentLabel ?? key).trim();
+  return {
+    component_key: key,
+    component_label: label,
+    page_url: resolvePageUrl(getPageUrl),
+    surface_ref: target.surfaceRef ?? null,
+    metadata: target.metadata ?? {}
+  };
+}
+function normalizeIssueTarget(issue) {
+  return {
+    component_key: issue.target.component_key,
+    component_label: issue.target.component_label,
+    page_url: issue.target.page_url,
+    surface_ref: issue.target.surface_ref ?? null,
+    metadata: issue.target.metadata ?? {}
+  };
+}
+function toErrorMessage(error, fallback) {
+  if (error instanceof Error && error.message.trim()) {
+    return error.message;
+  }
+  return fallback;
+}
+function isOpenIssueStatus(status) {
+  return status === "open" || status === "in_progress";
+}
+function isClosedIssueStatus(status) {
+  return status === "resolved" || status === "ignored";
+}
+function filterIssueReports(issues, filter) {
+  if (filter === "open") {
+    return issues.filter((issue) => isOpenIssueStatus(issue.status));
+  }
+  if (filter === "closed") {
+    return issues.filter((issue) => isClosedIssueStatus(issue.status));
+  }
+  return issues;
+}
+function getIssueStatusBadgeLabel(status) {
+  switch (status) {
+    case "in_progress":
+      return "In Progress";
+    case "resolved":
+      return "Resolved";
+    case "ignored":
+      return "Ignored";
+    default:
+      return "Open";
+  }
+}
+function getIssueStatusClassName(status) {
+  switch (status) {
+    case "in_progress":
+      return "bg-amber-100 text-amber-700";
+    case "resolved":
+      return "bg-emerald-100 text-emerald-700";
+    case "ignored":
+      return "bg-slate-200 text-slate-700";
+    default:
+      return "bg-rose-100 text-rose-700";
+  }
+}
+function getEntryPointState(status) {
+  if (!status) {
+    return "neutral";
+  }
+  if (status.has_open) {
+    return "open";
+  }
+  if (status.has_recent_resolved) {
+    return "recent_resolved";
+  }
+  return "neutral";
+}
+function getEntryPointClassName(state) {
+  if (state === "open") {
+    return "text-rose-600";
+  }
+  if (state === "recent_resolved") {
+    return "text-emerald-600";
+  }
+  return "text-slate-500";
+}
+function getIssueNoteLengthMessage(note, copy) {
+  if (note.length < NOTE_MIN_LENGTH) {
+    return `${NOTE_MIN_LENGTH - note.length} ${copy.noteMinimumSuffix}`;
+  }
+  return `${note.length}/${NOTE_MAX_LENGTH}`;
+}
+function useIssueReporting() {
+  const context = (0, import_react2.useContext)(IssueReportingContext);
+  if (!context) {
+    throw new Error(
+      "useIssueReporting must be used within an IssueReportingProvider"
+    );
+  }
+  return context;
+}
+function useIssueReportingStatus() {
+  const { client, isEligible } = useIssueReporting();
+  return (0, import_react_query.useQuery)({
+    queryKey: issueReportingKeys.status(),
+    queryFn: () => client.issueReporting.getStatus(),
+    enabled: isEligible,
+    retry: false,
+    staleTime: 3e4
+  });
+}
+function useIssueReportingHistory(filter = "all") {
+  const { client, isEligible } = useIssueReporting();
+  const query = (0, import_react_query.useQuery)({
+    queryKey: issueReportingKeys.history(),
+    queryFn: () => client.issueReporting.list({ limit: LIST_LIMIT, offset: 0 }),
+    enabled: isEligible,
+    retry: false
+  });
+  const items = (0, import_react2.useMemo)(
+    () => filterIssueReports(query.data?.items ?? [], filter),
+    [filter, query.data?.items]
+  );
+  return {
+    ...query,
+    items,
+    total: items.length
+  };
+}
+function useIssueReportingMutations() {
+  const queryClient = (0, import_react_query.useQueryClient)();
+  const { client } = useIssueReporting();
+  const invalidateAll = (0, import_react2.useCallback)(async () => {
+    await queryClient.invalidateQueries({
+      queryKey: issueReportingKeys.all
+    });
+  }, [queryClient]);
+  const createMutation = (0, import_react_query.useMutation)({
+    mutationFn: (payload) => client.issueReporting.create(payload),
+    onSuccess: invalidateAll
+  });
+  const updateMutation = (0, import_react_query.useMutation)({
+    mutationFn: ({
+      issueReportId,
+      note
+    }) => client.issueReporting.update(issueReportId, { note }),
+    onSuccess: invalidateAll
+  });
+  const replyMutation = (0, import_react_query.useMutation)({
+    mutationFn: ({
+      issueReportId,
+      note,
+      reporterRoleHint
+    }) => client.issueReporting.reply(issueReportId, {
+      note,
+      reporter_role_hint: reporterRoleHint
+    }),
+    onSuccess: invalidateAll
+  });
+  return {
+    createMutation,
+    updateMutation,
+    replyMutation
+  };
+}
+function IssueReportingProvider({
+  client,
+  isEligible,
+  reporterRoleHint,
+  getPageUrl,
+  copy,
+  children
+}) {
+  const mergedCopy = (0, import_react2.useMemo)(
+    () => ({
+      ...defaultIssueReportingCopy,
+      ...copy
+    }),
+    [copy]
+  );
+  const queryClient = (0, import_react_query.useQueryClient)();
+  const [isReportMode, setIsReportMode] = (0, import_react2.useState)(false);
+  const [isPopoverOpen, setIsPopoverOpen] = (0, import_react2.useState)(false);
+  const [modalState, setModalState] = (0, import_react2.useState)(initialModalState);
+  const closePopover = (0, import_react2.useCallback)(() => {
+    setIsPopoverOpen(false);
+  }, []);
+  const openPopover = (0, import_react2.useCallback)(() => {
+    setIsPopoverOpen(true);
+  }, []);
+  const enterReportMode = (0, import_react2.useCallback)(() => {
+    setIsReportMode(true);
+    setIsPopoverOpen(false);
+  }, []);
+  const cancelReportMode = (0, import_react2.useCallback)(() => {
+    setIsReportMode(false);
+  }, []);
+  const closeModal = (0, import_react2.useCallback)(() => {
+    setModalState(initialModalState);
+    setIsPopoverOpen(true);
+  }, []);
+  const hydrateIssueIntoModal = (0, import_react2.useCallback)(
+    async (issueReportId, mode) => {
+      setModalState({
+        isOpen: true,
+        mode,
+        issueReportId,
+        issue: null,
+        target: null,
+        error: null,
+        isHydrating: true
+      });
+      try {
+        const issue = await queryClient.fetchQuery({
+          queryKey: issueReportingKeys.detail(issueReportId),
+          queryFn: () => client.issueReporting.get(issueReportId)
+        });
+        setModalState({
+          isOpen: true,
+          mode,
+          issueReportId,
+          issue,
+          target: normalizeIssueTarget(issue),
+          error: null,
+          isHydrating: false
+        });
+      } catch (error) {
+        setModalState({
+          isOpen: true,
+          mode,
+          issueReportId,
+          issue: null,
+          target: null,
+          error: toErrorMessage(error, mergedCopy.hydrateFailed),
+          isHydrating: false
+        });
+      }
+    },
+    [client.issueReporting, mergedCopy.hydrateFailed, queryClient]
+  );
+  const retryModalHydration = (0, import_react2.useCallback)(async () => {
+    if (!modalState.issueReportId || modalState.mode === "create") {
+      return;
+    }
+    await hydrateIssueIntoModal(modalState.issueReportId, modalState.mode);
+  }, [hydrateIssueIntoModal, modalState.issueReportId, modalState.mode]);
+  const openExistingIssueModal = (0, import_react2.useCallback)(
+    async (issueReportId, mode) => {
+      setIsPopoverOpen(false);
+      await hydrateIssueIntoModal(issueReportId, mode);
+    },
+    [hydrateIssueIntoModal]
+  );
+  const selectPanel = (0, import_react2.useCallback)(
+    (target) => {
+      if (!isEligible) {
+        return;
+      }
+      const normalizedTarget = normalizeTarget(target, getPageUrl);
+      setIsReportMode(false);
+      setModalState({
+        isOpen: true,
+        mode: "create",
+        issueReportId: null,
+        issue: null,
+        target: normalizedTarget,
+        error: null,
+        isHydrating: false
+      });
+    },
+    [getPageUrl, isEligible]
+  );
+  const contextValue = (0, import_react2.useMemo)(
+    () => ({
+      client,
+      isEligible,
+      reporterRoleHint,
+      copy: mergedCopy,
+      isReportMode,
+      enterReportMode,
+      cancelReportMode,
+      selectPanel,
+      isPopoverOpen,
+      openPopover,
+      closePopover,
+      modalState,
+      closeModal,
+      openExistingIssueModal,
+      retryModalHydration
+    }),
+    [
+      cancelReportMode,
+      client,
+      closeModal,
+      closePopover,
+      enterReportMode,
+      isEligible,
+      isPopoverOpen,
+      isReportMode,
+      mergedCopy,
+      modalState,
+      openExistingIssueModal,
+      openPopover,
+      reporterRoleHint,
+      retryModalHydration,
+      selectPanel
+    ]
+  );
+  const reportModeValue = (0, import_react2.useMemo)(
+    () => ({
+      isReportMode,
+      selectPanel,
+      cancelReportMode
+    }),
+    [cancelReportMode, isReportMode, selectPanel]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReportModeContext.Provider, { value: reportModeValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IssueReportingContext.Provider, { value: contextValue, children }) });
+}
+
+// src/components.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function cn(...values) {
+  return values.filter(Boolean).join(" ");
+}
+function truncate(value, max = 80) {
+  if (value.length <= max) {
+    return value;
+  }
+  return `${value.slice(0, max - 3)}...`;
+}
+function formatRelativeTime(timestamp) {
+  return (0, import_date_fns.formatDistanceToNow)(new Date(timestamp), {
+    addSuffix: true
+  });
+}
+function IssueReportModeBanner() {
+  const { copy } = useIssueReporting();
+  const reportMode = useReportMode();
+  if (!reportMode?.isReportMode) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "fixed inset-x-4 top-4 z-[70] flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "max-w-xl rounded-full border border-amber-300 bg-amber-50/95 px-4 py-3 text-sm text-amber-950 shadow-lg backdrop-blur", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-wrap items-center justify-center gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "font-medium", children: copy.reportModeTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-amber-900/80", children: copy.reportModeDescription }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "rounded-full border border-amber-400 px-3 py-1 font-medium text-amber-900 transition hover:bg-amber-100",
+        onClick: reportMode.cancelReportMode,
+        children: copy.reportModeCancelAction
+      }
+    )
+  ] }) }) });
+}
+function IssueList({
+  filter,
+  onEdit,
+  onReply
+}) {
+  const { copy } = useIssueReporting();
+  const history = useIssueReportingHistory(filter);
+  if (history.isPending) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-5 text-sm text-slate-600", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Spinner, { className: "h-4 w-4 animate-spin" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: copy.historyLoading })
+    ] });
+  }
+  if (history.error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-3 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-4 text-sm text-rose-700", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: history.error.message || copy.historyLoadFailed }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "rounded-full border border-rose-300 px-3 py-1 font-medium transition hover:bg-rose-100",
+          onClick: () => history.refetch(),
+          children: copy.retryAction
+        }
+      )
+    ] });
+  }
+  if (history.items.length === 0) {
+    const emptyMessage = filter === "open" ? copy.emptyOpen : filter === "closed" ? copy.emptyClosed : copy.emptyAll;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "rounded-2xl border border-dashed border-slate-200 bg-slate-50 px-4 py-8 text-center text-sm text-slate-500", children: emptyMessage });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "max-h-80 space-y-2 overflow-y-auto pr-1", children: history.items.map((issue) => {
+    const isClosed = isClosedIssueStatus(issue.status);
+    const actionLabel = isClosed ? copy.replyAction : copy.editAction;
+    const onAction = () => isClosed ? onReply(issue.id) : onEdit(issue.id);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className: "rounded-2xl border border-slate-200 bg-white px-3 py-3 shadow-sm",
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mt-0.5 flex-shrink-0", children: isClosed ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.CheckCircle, { className: "h-4 w-4 text-emerald-600", weight: "fill" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Circle, { className: "h-4 w-4 text-rose-600", weight: "fill" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "truncate text-sm font-semibold text-slate-900", children: issue.target.component_label }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-1 flex flex-wrap items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "span",
+                    {
+                      className: cn(
+                        "rounded-full px-2 py-0.5 text-[11px] font-medium",
+                        getIssueStatusClassName(issue.status)
+                      ),
+                      children: getIssueStatusBadgeLabel(issue.status)
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-xs text-slate-400", children: formatRelativeTime(issue.updated_at) })
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: "rounded-full border border-slate-200 px-3 py-1 text-xs font-medium text-slate-700 transition hover:bg-slate-50",
+                  onClick: onAction,
+                  children: actionLabel
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mt-2 text-sm text-slate-600", children: truncate(issue.note) }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mt-2 truncate text-xs text-slate-400", children: issue.target.page_url })
+          ] })
+        ] })
+      },
+      issue.id
+    );
+  }) });
+}
+function IssueReportPopover({ children }) {
+  const [filter, setFilter] = (0, import_react4.useState)("all");
+  const {
+    copy,
+    isPopoverOpen,
+    openPopover,
+    closePopover,
+    enterReportMode,
+    openExistingIssueModal
+  } = useIssueReporting();
+  const history = useIssueReportingHistory("all");
+  const status = useIssueReportingStatus();
+  const allItems = history.data?.items ?? [];
+  const counts = (0, import_react4.useMemo)(
+    () => ({
+      all: allItems.length,
+      open: filterIssueReports(allItems, "open").length,
+      closed: filterIssueReports(allItems, "closed").length
+    }),
+    [allItems]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    Popover.Root,
+    {
+      open: isPopoverOpen,
+      onOpenChange: (open) => open ? openPopover() : closePopover(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Popover.Trigger, { asChild: true, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          Popover.Content,
+          {
+            align: "end",
+            side: "top",
+            sideOffset: 12,
+            className: "z-[70] w-[360px] rounded-3xl border border-slate-200 bg-white p-4 shadow-[0_18px_48px_rgba(15,23,42,0.18)]",
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "text-sm font-semibold text-slate-900", children: copy.popoverTitle }),
+                  status.data?.has_open ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "mt-1 text-xs text-slate-500", children: [
+                    status.data.open_count,
+                    " open issue",
+                    status.data.open_count === 1 ? "" : "s"
+                  ] }) : null
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "rounded-full bg-slate-900 px-3 py-2 text-xs font-semibold text-white transition hover:bg-slate-800",
+                    onClick: () => {
+                      closePopover();
+                      enterReportMode();
+                    },
+                    children: copy.reportNewAction
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex gap-2", children: [
+                ["all", copy.filtersAll, counts.all],
+                ["open", copy.filtersOpen, counts.open],
+                ["closed", copy.filtersClosed, counts.closed]
+              ].map(([value, label, count]) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  className: cn(
+                    "rounded-full px-3 py-1.5 text-xs font-medium transition",
+                    filter === value ? "bg-slate-900 text-white" : "bg-slate-100 text-slate-600 hover:bg-slate-200"
+                  ),
+                  onClick: () => setFilter(value),
+                  children: [
+                    label,
+                    count > 0 ? ` (${count})` : ""
+                  ]
+                },
+                value
+              )) }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                IssueList,
+                {
+                  filter,
+                  onEdit: (issueReportId) => openExistingIssueModal(issueReportId, "edit"),
+                  onReply: (issueReportId) => openExistingIssueModal(issueReportId, "reply")
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "border-t border-slate-100 pt-3 text-xs leading-relaxed text-slate-500", children: copy.historyHelpText })
+            ] })
+          }
+        ) })
+      ]
+    }
+  );
+}
+function IssueReportModal() {
+  const {
+    copy,
+    reporterRoleHint,
+    modalState,
+    closeModal,
+    retryModalHydration
+  } = useIssueReporting();
+  const { createMutation, updateMutation, replyMutation } = useIssueReportingMutations();
+  const [note, setNote] = (0, import_react4.useState)("");
+  const [submitError, setSubmitError] = (0, import_react4.useState)(null);
+  const { isOpen, mode, issue, target, isHydrating, error } = modalState;
+  (0, import_react4.useEffect)(() => {
+    if (!isOpen) {
+      setNote("");
+      setSubmitError(null);
+      return;
+    }
+    if (mode === "edit" && issue) {
+      setNote(issue.note);
+    } else {
+      setNote("");
+    }
+    setSubmitError(null);
+  }, [isOpen, mode, issue]);
+  const isValid = note.trim().length >= 10 && note.trim().length <= 2e3;
+  const isSubmitting = createMutation.isPending || updateMutation.isPending || replyMutation.isPending;
+  const title = mode === "create" ? `${copy.createTitlePrefix}: ${target?.component_label ?? ""}` : mode === "edit" ? `${copy.editTitlePrefix}: ${target?.component_label ?? ""}` : `${copy.replyTitlePrefix}: ${target?.component_label ?? ""}`;
+  const handleSubmit = async () => {
+    if (!target || !isValid || isSubmitting) {
+      return;
+    }
+    setSubmitError(null);
+    try {
+      const normalizedNote = note.trim();
+      if (mode === "create") {
+        await createMutation.mutateAsync({
+          target,
+          note: normalizedNote,
+          reporter_role_hint: reporterRoleHint
+        });
+      } else if (mode === "edit" && issue) {
+        await updateMutation.mutateAsync({
+          issueReportId: issue.id,
+          note: normalizedNote
+        });
+      } else if (mode === "reply" && issue) {
+        await replyMutation.mutateAsync({
+          issueReportId: issue.id,
+          note: normalizedNote,
+          reporterRoleHint
+        });
+      }
+      closeModal();
+    } catch (submissionError) {
+      setSubmitError(
+        submissionError instanceof Error ? submissionError.message : "Failed to submit issue report"
+      );
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog.Root, { open: isOpen, onOpenChange: (open) => !open && closeModal(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Dialog.Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog.Overlay, { className: "fixed inset-0 z-[80] bg-slate-950/45 backdrop-blur-sm" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Dialog.Content, { className: "fixed left-1/2 top-1/2 z-[81] w-[calc(100vw-2rem)] max-w-xl -translate-x-1/2 -translate-y-1/2 rounded-[28px] border border-slate-200 bg-white p-6 shadow-[0_28px_80px_rgba(15,23,42,0.24)] focus:outline-none", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog.Title, { className: "text-lg font-semibold text-slate-950", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog.Description, { className: "mt-2 text-sm text-slate-600", children: mode === "create" && target ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        copy.createDescriptionPrefix,
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { className: "rounded bg-slate-100 px-1.5 py-0.5 text-xs text-slate-700", children: target.page_url })
+      ] }) : mode === "edit" ? copy.editDescription : copy.replyDescription }),
+      isHydrating ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-5 flex items-center gap-2 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4 text-sm text-slate-600", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Spinner, { className: "h-4 w-4 animate-spin" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: copy.hydrateLoading })
+      ] }) : error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-5 space-y-3 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-4 text-sm text-rose-700", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: error }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "rounded-full border border-rose-300 px-3 py-1 font-medium transition hover:bg-rose-100",
+              onClick: () => retryModalHydration(),
+              children: copy.retryAction
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "rounded-full border border-slate-300 px-3 py-1 font-medium text-slate-700 transition hover:bg-slate-50",
+              onClick: closeModal,
+              children: copy.cancelAction
+            }
+          )
+        ] })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        mode === "reply" && issue ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-5 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-xs font-medium uppercase tracking-wide text-slate-500", children: copy.originalIssueLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mt-1 text-sm text-slate-700", children: issue.note })
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-5 space-y-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "textarea",
+            {
+              value: note,
+              onChange: (event) => setNote(event.target.value),
+              onKeyDown: (event) => {
+                if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+                  event.preventDefault();
+                  void handleSubmit();
+                }
+              },
+              placeholder: copy.notePlaceholder,
+              className: "h-36 w-full resize-none rounded-2xl border border-slate-300 px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-slate-500 focus:ring-2 focus:ring-slate-200",
+              disabled: isSubmitting,
+              autoFocus: true
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between text-xs text-slate-500", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: getIssueNoteLengthMessage(note, copy) }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: copy.keyboardShortcutHint })
+          ] })
+        ] }),
+        submitError ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mt-4 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700", children: submitError }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-6 flex justify-end gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "rounded-full border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50",
+              onClick: closeModal,
+              disabled: isSubmitting,
+              children: copy.cancelAction
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              type: "button",
+              className: cn(
+                "rounded-full px-4 py-2 text-sm font-semibold text-white transition",
+                isValid && !isSubmitting ? "bg-slate-900 hover:bg-slate-800" : "cursor-not-allowed bg-slate-300"
+              ),
+              onClick: () => void handleSubmit(),
+              disabled: !isValid || isSubmitting,
+              children: isSubmitting ? copy.submittingAction : copy.submitAction
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "absolute right-4 top-4 inline-flex h-9 w-9 items-center justify-center rounded-full border border-slate-200 text-slate-500 transition hover:bg-slate-50 hover:text-slate-900",
+          "aria-label": "Close issue report modal",
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.X, { className: "h-4 w-4" })
+        }
+      ) })
+    ] })
+  ] }) });
+}
+function FloatingIssueReportButton({
+  className,
+  positionClassName
+}) {
+  const {
+    copy,
+    isEligible,
+    isReportMode,
+    isPopoverOpen,
+    openPopover,
+    closePopover
+  } = useIssueReporting();
+  const status = useIssueReportingStatus();
+  const entryPointState = getEntryPointState(status.data);
+  if (!isEligible) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IssueReportModeBanner, {}),
+    !isReportMode ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("fixed bottom-12 right-4 z-[65]", positionClassName), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IssueReportPopover, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        type: "button",
+        "aria-label": copy.entryAriaLabel,
+        onClick: () => isPopoverOpen ? closePopover() : openPopover(),
+        className: cn(
+          "flex h-12 w-12 items-center justify-center rounded-full border border-slate-200 bg-white shadow-lg transition hover:-translate-y-0.5 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-slate-300",
+          status.isPending && "animate-pulse",
+          className
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_react3.BugBeetle,
+          {
+            className: cn("h-6 w-6", getEntryPointClassName(entryPointState)),
+            weight: "fill"
+          }
+        )
+      }
+    ) }) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IssueReportModal, {})
+  ] });
+}
+function ReportableSection({
+  reportableName,
+  children,
+  className,
+  as: Component = "div"
+}) {
+  const reportMode = useReportMode();
+  const isSelectable = Boolean(reportMode?.isReportMode);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Component,
+    {
+      className: cn(
+        className,
+        isSelectable && "cursor-pointer ring-2 ring-amber-400 transition hover:ring-amber-500"
+      ),
+      onClick: isSelectable ? () => {
+        reportMode?.selectPanel(reportableName);
+      } : void 0,
+      onKeyDown: isSelectable ? (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          reportMode?.selectPanel(reportableName);
+        }
+      } : void 0,
+      role: isSelectable ? "button" : void 0,
+      tabIndex: isSelectable ? 0 : void 0,
+      children
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FloatingIssueReportButton,
+  IssueReportingProvider,
+  ReportModeContext,
+  ReportableSection,
+  defaultIssueReportingCopy,
+  filterIssueReports,
+  getEntryPointClassName,
+  getEntryPointState,
+  getIssueNoteLengthMessage,
+  getIssueStatusBadgeLabel,
+  getIssueStatusClassName,
+  isClosedIssueStatus,
+  isOpenIssueStatus,
+  issueReportingKeys,
+  useIssueReporting,
+  useIssueReportingHistory,
+  useIssueReportingMutations,
+  useIssueReportingStatus,
+  useReportMode
+});