@fivepixels-js/react 0.1.0

package/dist/hooks/useReportState.js

@@ -0,0 +1,904 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ensureReportLocaleMessages, getReportMessages, setActiveReportMessages } from "../i18n/index.js";
+import { useReportShortcuts } from "./useReportShortcuts.js";
+import { useReportPersistence } from "./useReportPersistence.js";
+import { useIsMobileViewport } from "./useIsMobileViewport.js";
+import { useAppearancePreference } from "./useAppearancePreference.js";
+import { useLocalePreference } from "./useLocalePreference.js";
+import { usePersonalKey } from "./usePersonalKey.js";
+import { useResolvedAppearance } from "./useResolvedAppearance.js";
+import { createReplyStatusForSubmit, resolveOriginalFeedbackAuthorName } from "../utils/feedbackThread.js";
+import { clampRatio, getMarkerFromReport, resolveTooltipAnchor } from "../utils/coordinates.js";
+import { scrollToFeedbackTarget } from "../utils/locateFeedback.js";
+const MARKER_HOVER_LEAVE_MS = 250;
+const OVERLAY_HOVER_LEAVE_MS = 100;
+import { findTargetByPoint, getSelectableTargets, isSameHoverTarget, toSnapshot } from "../utils/dom.js";
+import { createInitialFieldValues, getFieldError, getFieldTags } from "../utils/fields.js";
+import { createReplyId } from "../utils/format.js";
+import { notifyFeedbackCreate, notifyFeedbackDelete, notifyFeedbackReply, notifyFeedbackUpdate, notifyGitHubIssueCreated, } from "../utils/reportCallbacks.js";
+import { buildGitHubIssueUpdate, canCreateGitHubIssueFromList, canCreateGitHubIssueOnCreate, isGitIssued, } from "../utils/githubIntegration.js";
+function resolveDefaultAuthorName(identify, authors) {
+    if (identify?.name) {
+        return identify.name;
+    }
+    return authors[0]?.name ?? "";
+}
+export function useReportState({ projectId, environment, appVersion, appearance, fields, authors = [], requireReviewerKey = false, shortcut: _shortcut, identify, onList, onListAll, onNavigate, onCreate, onUpdate, onDelete, onEvent, onReply, github, routeKey, showFeedbackList, visibleShortcutKeys = false, initialLocale, messageOverrides, }) {
+    const { appearance: activeAppearance, setAppearance } = useAppearancePreference(appearance);
+    const { locale, setLocale } = useLocalePreference(initialLocale);
+    const [localeMessagesReady, setLocaleMessagesReady] = useState(locale !== "ko");
+    const messages = useMemo(() => getReportMessages(locale, messageOverrides), [locale, localeMessagesReady, messageOverrides]);
+    useEffect(() => {
+        if (locale !== "ko") {
+            setLocaleMessagesReady(true);
+            return;
+        }
+        let cancelled = false;
+        setLocaleMessagesReady(false);
+        void ensureReportLocaleMessages("ko").then(() => {
+            if (!cancelled) {
+                setLocaleMessagesReady(true);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [locale]);
+    useEffect(() => {
+        setActiveReportMessages(messages);
+    }, [messages]);
+    const overlayRef = useRef(null);
+    const searchInputRef = useRef(null);
+    const hoveredElementRef = useRef(null);
+    const selectedElementRef = useRef(null);
+    const hoverLeaveTimeoutRef = useRef(null);
+    const overlayHoverLeaveTimeoutRef = useRef(null);
+    const resolvedAppearance = useResolvedAppearance(activeAppearance);
+    const isMobileViewport = useIsMobileViewport();
+    const { canTransferFeedback, canListAllFeedback, currentPathname, listScope, setListScope, filters, setFilters, selectedReportId, setSelectedReportId, reports, filteredReports, currentPageFilteredReports, routeDetailsStats, selectedReport, isError, isFetching, hasNextPage, isFetchingNextPage, fetchNextPage, isCreating, isUpdating, isDeleting, queryErrorMessage, refetch, createFeedback, updateFeedback, deleteFeedback, } = useReportPersistence({
+        projectId,
+        environment,
+        appVersion,
+        fields,
+        onList,
+        onListAll,
+        onCreate,
+        onUpdate,
+        onDelete,
+        routeKey,
+    });
+    const eventCallbacks = useMemo(() => ({
+        onEvent,
+        onReply,
+    }), [onEvent, onReply]);
+    const { personalKey, publicKey, personalKeyRequired, personalKeyPendingRegistration, personalKeyCandidates, authorizedAuthors, issuePersonalKey, rotatePersonalKey, insertPersonalKey, signPayload, } = usePersonalKey({
+        enabled: requireReviewerKey || authors.some((author) => Boolean(author.publicKey)),
+        projectId,
+        environment,
+        identify,
+        authors,
+    });
+    const activeIdentify = authorizedAuthors[0] ?? (personalKeyRequired ? undefined : identify);
+    const signCreatePayload = async (payload) => {
+        const auth = await signPayload("feedback:create", payload);
+        return auth ? { ...payload, auth } : payload;
+    };
+    const signUpdatePayload = async (payload) => {
+        if (personalKeyRequired) {
+            throw new Error(messages.errors.personalKeyRequired);
+        }
+        const auth = await signPayload("feedback:update", payload);
+        return auth ? { ...payload, auth } : payload;
+    };
+    const [mode, setMode] = useState("idle");
+    const [showTargetPreview, setShowTargetPreview] = useState(false);
+    const [selectableTargets, setSelectableTargets] = useState([]);
+    const [errorMessage, setErrorMessage] = useState("");
+    const [draft, setDraft] = useState(null);
+    const [hoveredTarget, setHoveredTarget] = useState(null);
+    const [selectedTarget, setSelectedTarget] = useState(null);
+    const [markers, setMarkers] = useState([]);
+    const [hoveredMarkerId, setHoveredMarkerId] = useState(null);
+    const [activeReplyReportId, setActiveReplyReportId] = useState(null);
+    const [replyDraft, setReplyDraft] = useState("");
+    const [draftAuthorName, setDraftAuthorName] = useState(() => resolveDefaultAuthorName(activeIdentify, authorizedAuthors));
+    const [replyAuthorName, setReplyAuthorName] = useState(() => resolveDefaultAuthorName(activeIdentify, authorizedAuthors));
+    const [pendingComposer, setPendingComposer] = useState(null);
+    const [confirmAuthorName, setConfirmAuthorName] = useState("");
+    const [showConfirmAuthorSelect, setShowConfirmAuthorSelect] = useState(false);
+    const pendingLocateReportIdRef = useRef(null);
+    const [editingReportId, setEditingReportId] = useState(null);
+    const [editableDraft, setEditableDraft] = useState(null);
+    const [panelTab, setPanelTab] = useState(null);
+    const [creatingGitHubIssueId, setCreatingGitHubIssueId] = useState(null);
+    const canCreateGitHubIssueFromListValue = useMemo(() => canCreateGitHubIssueFromList(github), [github]);
+    const canCreateGitHubIssueOnCreateValue = useMemo(() => canCreateGitHubIssueOnCreate(github), [github]);
+    const activeReplyAnchor = useMemo(() => resolveTooltipAnchor(markers, activeReplyReportId), [activeReplyReportId, markers]);
+    const activeReplyReport = activeReplyAnchor?.report ?? null;
+    const tooltipAnchor = useMemo(() => {
+        const hoveredAnchor = resolveTooltipAnchor(markers, hoveredMarkerId);
+        if (!activeReplyReportId) {
+            return hoveredAnchor;
+        }
+        if (hoveredMarkerId && hoveredMarkerId !== activeReplyReportId) {
+            return hoveredAnchor;
+        }
+        return activeReplyAnchor ?? hoveredAnchor;
+    }, [activeReplyAnchor, activeReplyReportId, hoveredMarkerId, markers]);
+    const tooltipReport = tooltipAnchor?.report ?? null;
+    const tooltipFieldTags = useMemo(() => (tooltipReport ? getFieldTags(fields, tooltipReport.field_values) : []), [fields, tooltipReport]);
+    const targetStats = useMemo(() => {
+        const groupCount = selectableTargets.filter((target) => target.type === "group").length;
+        const itemCount = selectableTargets.filter((target) => target.type === "item").length;
+        const foundCount = mode === "view" && !isFetching ? currentPageFilteredReports.length : selectableTargets.length;
+        return {
+            found: foundCount,
+            group: groupCount,
+            item: itemCount,
+        };
+    }, [currentPageFilteredReports.length, isFetching, mode, selectableTargets]);
+    const statusText = useMemo(() => {
+        if (mode === "report") {
+            const focusTarget = selectedTarget ?? hoveredTarget;
+            if (!focusTarget) {
+                return "";
+            }
+            const typeLabel = focusTarget.type === "item" ? messages.statusText.selectedItem : messages.statusText.selectedGroup;
+            return `${typeLabel}\n${focusTarget.id}`;
+        }
+        if (mode === "view") {
+            return isFetching ? messages.statusText.loadingFeedback : messages.statusText.ready;
+        }
+        if (showTargetPreview) {
+            return messages.statusText.showingSelectableTargets(selectableTargets.length);
+        }
+        if (selectableTargets.length === 0) {
+            return messages.statusText.noSelectableTargets;
+        }
+        return messages.statusText.ready;
+    }, [filteredReports.length, isFetching, hoveredTarget, messages.statusText, mode, selectableTargets.length, selectedTarget, showTargetPreview]);
+    useEffect(() => {
+        setDraft(null);
+        setErrorMessage("");
+        setHoveredTarget(null);
+        setSelectedTarget(null);
+        setHoveredMarkerId(null);
+        setActiveReplyReportId(null);
+        setReplyDraft("");
+        setPendingComposer(null);
+        setShowConfirmAuthorSelect(false);
+        setConfirmAuthorName("");
+        setDraftAuthorName(resolveDefaultAuthorName(activeIdentify, authorizedAuthors));
+        setReplyAuthorName(resolveDefaultAuthorName(activeIdentify, authorizedAuthors));
+        setEditingReportId(null);
+        setEditableDraft(null);
+        if (mode !== "idle") {
+            setShowTargetPreview(false);
+        }
+        hoveredElementRef.current = null;
+        selectedElementRef.current = null;
+        if (hoverLeaveTimeoutRef.current) {
+            window.clearTimeout(hoverLeaveTimeoutRef.current);
+            hoverLeaveTimeoutRef.current = null;
+        }
+        if (overlayHoverLeaveTimeoutRef.current) {
+            window.clearTimeout(overlayHoverLeaveTimeoutRef.current);
+            overlayHoverLeaveTimeoutRef.current = null;
+        }
+    }, [currentPathname, mode]);
+    useEffect(() => {
+        setShowTargetPreview(false);
+    }, [currentPathname]);
+    useEffect(() => {
+        return () => {
+            if (hoverLeaveTimeoutRef.current) {
+                window.clearTimeout(hoverLeaveTimeoutRef.current);
+            }
+            if (overlayHoverLeaveTimeoutRef.current) {
+                window.clearTimeout(overlayHoverLeaveTimeoutRef.current);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        const syncSelectableTargets = () => {
+            setSelectableTargets(getSelectableTargets());
+        };
+        syncSelectableTargets();
+        window.addEventListener("scroll", syncSelectableTargets, { passive: true });
+        window.addEventListener("resize", syncSelectableTargets);
+        return () => {
+            window.removeEventListener("scroll", syncSelectableTargets);
+            window.removeEventListener("resize", syncSelectableTargets);
+        };
+    }, [currentPathname]);
+    useEffect(() => {
+        if (!showTargetPreview) {
+            return;
+        }
+        const syncPreviewRects = () => {
+            setSelectableTargets(getSelectableTargets());
+        };
+        window.addEventListener("scroll", syncPreviewRects, { passive: true });
+        window.addEventListener("resize", syncPreviewRects);
+        return () => {
+            window.removeEventListener("scroll", syncPreviewRects);
+            window.removeEventListener("resize", syncPreviewRects);
+        };
+    }, [showTargetPreview]);
+    useEffect(() => {
+        if (mode !== "view") {
+            setMarkers([]);
+            return;
+        }
+        const syncMarkers = () => {
+            setMarkers(currentPageFilteredReports.map((report) => getMarkerFromReport(report, window.scrollY)));
+        };
+        syncMarkers();
+        window.addEventListener("scroll", syncMarkers, { passive: true });
+        window.addEventListener("resize", syncMarkers);
+        return () => {
+            window.removeEventListener("scroll", syncMarkers);
+            window.removeEventListener("resize", syncMarkers);
+        };
+    }, [currentPageFilteredReports, mode]);
+    useEffect(() => {
+        if (mode !== "report") {
+            return;
+        }
+        const syncTargetRects = () => {
+            setHoveredTarget(toSnapshot(hoveredElementRef.current));
+            setSelectedTarget(toSnapshot(selectedElementRef.current));
+        };
+        window.addEventListener("scroll", syncTargetRects, { passive: true });
+        window.addEventListener("resize", syncTargetRects);
+        return () => {
+            window.removeEventListener("scroll", syncTargetRects);
+            window.removeEventListener("resize", syncTargetRects);
+        };
+    }, [mode]);
+    useEffect(() => {
+        if (hoveredMarkerId && !markers.some((marker) => marker.report.id === hoveredMarkerId)) {
+            setHoveredMarkerId(null);
+        }
+    }, [hoveredMarkerId, markers]);
+    // markers (points, tooltip, reply)
+    const clearHoverLeaveTimeout = () => {
+        if (hoverLeaveTimeoutRef.current) {
+            window.clearTimeout(hoverLeaveTimeoutRef.current);
+            hoverLeaveTimeoutRef.current = null;
+        }
+    };
+    const scheduleHoverLeave = (markerId) => {
+        clearHoverLeaveTimeout();
+        hoverLeaveTimeoutRef.current = window.setTimeout(() => {
+            setHoveredMarkerId((current) => (current === markerId ? null : current));
+            hoverLeaveTimeoutRef.current = null;
+        }, MARKER_HOVER_LEAVE_MS);
+    };
+    const clearOverlayHoverLeaveTimeout = () => {
+        if (overlayHoverLeaveTimeoutRef.current) {
+            window.clearTimeout(overlayHoverLeaveTimeoutRef.current);
+            overlayHoverLeaveTimeoutRef.current = null;
+        }
+    };
+    const scheduleOverlayHoverLeave = () => {
+        if (overlayHoverLeaveTimeoutRef.current) {
+            return;
+        }
+        overlayHoverLeaveTimeoutRef.current = window.setTimeout(() => {
+            if (!hoveredElementRef.current) {
+                setHoveredTarget(null);
+            }
+            overlayHoverLeaveTimeoutRef.current = null;
+        }, OVERLAY_HOVER_LEAVE_MS);
+    };
+    const stopEditing = () => {
+        setEditingReportId(null);
+        setEditableDraft(null);
+    };
+    const selectReport = (reportId) => {
+        setSelectedReportId(reportId);
+        if (editingReportId && editingReportId !== reportId) {
+            stopEditing();
+        }
+    };
+    const closeReplyComposer = () => {
+        setActiveReplyReportId(null);
+        setReplyDraft("");
+        setPendingComposer(null);
+        setShowConfirmAuthorSelect(false);
+    };
+    const showFeedbackTooltip = useCallback((report) => {
+        scrollToFeedbackTarget(report);
+        clearHoverLeaveTimeout();
+        closeReplyComposer();
+        setHoveredMarkerId(report.id);
+    }, [clearHoverLeaveTimeout]);
+    const locateFeedback = async (reportId) => {
+        const report = filteredReports.find((item) => item.id === reportId);
+        if (!report) {
+            return;
+        }
+        selectReport(reportId);
+        if (report.pathname !== currentPathname) {
+            pendingLocateReportIdRef.current = reportId;
+            try {
+                if (onNavigate) {
+                    await onNavigate(report.pathname);
+                }
+                else if (typeof window !== "undefined") {
+                    window.location.assign(report.pathname);
+                }
+            }
+            catch (nextError) {
+                pendingLocateReportIdRef.current = null;
+                setErrorMessage(nextError instanceof Error ? nextError.message : messages.errors.loadFeedbackFailed);
+            }
+            return;
+        }
+        showFeedbackTooltip(report);
+    };
+    useEffect(() => {
+        const pendingReportId = pendingLocateReportIdRef.current;
+        if (!pendingReportId) {
+            return;
+        }
+        const report = reports.find((item) => item.id === pendingReportId && item.pathname === currentPathname);
+        if (!report) {
+            return;
+        }
+        pendingLocateReportIdRef.current = null;
+        window.setTimeout(() => showFeedbackTooltip(report), 0);
+    }, [currentPathname, reports, showFeedbackTooltip]);
+    const focusSearchInput = () => {
+        searchInputRef.current?.focus();
+        searchInputRef.current?.select();
+    };
+    const selectAdjacentReport = (direction) => {
+        if (filteredReports.length === 0) {
+            return;
+        }
+        const currentIndex = filteredReports.findIndex((report) => report.id === selectedReportId);
+        let nextIndex;
+        if (currentIndex === -1) {
+            nextIndex = direction === "down" ? 0 : filteredReports.length - 1;
+        }
+        else {
+            nextIndex = direction === "down" ? Math.min(currentIndex + 1, filteredReports.length - 1) : Math.max(currentIndex - 1, 0);
+        }
+        void locateFeedback(filteredReports[nextIndex].id);
+    };
+    const openReplyComposer = (report) => {
+        selectReport(report.id);
+        setActiveReplyReportId(report.id);
+        setReplyDraft("");
+        setPendingComposer(null);
+        setReplyAuthorName(resolveDefaultAuthorName(activeIdentify, authorizedAuthors));
+        setConfirmAuthorName(resolveOriginalFeedbackAuthorName(report));
+        setShowConfirmAuthorSelect(false);
+        clearHoverLeaveTimeout();
+    };
+    const toggleConfirmAuthorSelect = () => {
+        setShowConfirmAuthorSelect((current) => !current);
+    };
+    const startDenyReview = () => {
+        if (!activeReplyReport) {
+            return;
+        }
+        const latest = activeReplyReport.replies[activeReplyReport.replies.length - 1];
+        if (!latest) {
+            return;
+        }
+        setPendingComposer({
+            type: latest.status === "found_error" ? "recheck" : "deny",
+            targetReplyId: latest.id,
+        });
+        setReplyDraft("");
+    };
+    const startCheckoutReview = (replyId) => {
+        setPendingComposer({ type: "checkout", targetReplyId: replyId });
+        setReplyDraft("");
+    };
+    const cancelPendingComposer = () => {
+        setPendingComposer(null);
+        setReplyDraft("");
+    };
+    const toggleReportMode = () => {
+        if (personalKeyRequired) {
+            setErrorMessage(messages.errors.personalKeyRequired);
+            return;
+        }
+        setShowTargetPreview(false);
+        setMode((current) => (current === "report" ? "idle" : "report"));
+    };
+    const togglePanelTab = (nextTab) => {
+        setPanelTab((current) => {
+            if (current === nextTab) {
+                return null;
+            }
+            return nextTab;
+        });
+    };
+    const enableIssueMode = () => {
+        setShowTargetPreview(false);
+        closeReplyComposer();
+        stopEditing();
+        setMode("view");
+    };
+    const openPanelTab = (nextTab) => {
+        const isClosing = panelTab === nextTab;
+        setPanelTab(isClosing ? null : nextTab);
+        if (!isClosing && nextTab === "feedback-list") {
+            enableIssueMode();
+        }
+    };
+    const toggleIssueMode = () => {
+        setShowTargetPreview(false);
+        closeReplyComposer();
+        setMode((current) => (current === "view" ? "idle" : "view"));
+        stopEditing();
+        setSelectedReportId(filteredReports[0]?.id ?? null);
+    };
+    const toggleTargetPreview = () => {
+        setShowTargetPreview((current) => {
+            const next = !current;
+            if (next) {
+                setMode("idle");
+            }
+            return next;
+        });
+    };
+    // overlay (target pick, create draft, edit)
+    const handleOverlayMove = (event) => {
+        if (mode !== "report" || draft) {
+            return;
+        }
+        const targetElement = findTargetByPoint(overlayRef.current, event.clientX, event.clientY);
+        hoveredElementRef.current = targetElement;
+        if (!targetElement) {
+            scheduleOverlayHoverLeave();
+            return;
+        }
+        clearOverlayHoverLeaveTimeout();
+        const snapshot = toSnapshot(targetElement);
+        setHoveredTarget((previous) => (isSameHoverTarget(previous, snapshot) ? previous : snapshot));
+    };
+    const handleOverlayClick = (event) => {
+        if (mode !== "report") {
+            return;
+        }
+        const targetElement = findTargetByPoint(overlayRef.current, event.clientX, event.clientY);
+        const snapshot = toSnapshot(targetElement);
+        if (!targetElement || !snapshot) {
+            setErrorMessage(messages.errors.clickSelectableArea);
+            return;
+        }
+        hoveredElementRef.current = targetElement;
+        selectedElementRef.current = targetElement;
+        setHoveredTarget(snapshot);
+        setSelectedTarget(snapshot);
+        setErrorMessage("");
+        setDraft({
+            clientX: event.clientX,
+            clientY: event.clientY,
+            xRatio: clampRatio(event.clientX / window.innerWidth),
+            yRatio: clampRatio(event.clientY / window.innerHeight),
+            elementXRatio: clampRatio((event.clientX - snapshot.rect.left) / Math.max(snapshot.rect.width, 1)),
+            elementYRatio: clampRatio((event.clientY - snapshot.rect.top) / Math.max(snapshot.rect.height, 1)),
+            scrollY: window.scrollY,
+            documentY: Math.round(window.scrollY + event.clientY),
+            reportId: snapshot.id,
+            reportType: snapshot.type,
+            message: "",
+            fieldValues: createInitialFieldValues(fields),
+        });
+    };
+    const cancelDraft = () => {
+        setDraft(null);
+        setSelectedTarget(null);
+    };
+    const updateDraftMessage = (nextMessage) => {
+        setDraft((current) => (current ? { ...current, message: nextMessage } : current));
+    };
+    const updateDraftField = (key, nextValue) => {
+        setDraft((current) => current
+            ? {
+                ...current,
+                fieldValues: {
+                    ...current.fieldValues,
+                    [key]: nextValue,
+                },
+            }
+            : current);
+    };
+    const buildCreatePayloadFromDraft = () => {
+        if (!draft) {
+            return null;
+        }
+        if (personalKeyRequired) {
+            setErrorMessage(messages.errors.personalKeyRequired);
+            return null;
+        }
+        const nextError = getFieldError(draft.message, draft.fieldValues, fields, messages.errors);
+        if (nextError) {
+            setErrorMessage(nextError);
+            return null;
+        }
+        return {
+            pathname: currentPathname,
+            report_id: draft.reportId,
+            report_type: draft.reportType,
+            message: draft.message.trim(),
+            status: "open",
+            field_values: draft.fieldValues,
+            x_ratio: draft.xRatio,
+            y_ratio: draft.yRatio,
+            element_x_ratio: draft.elementXRatio,
+            element_y_ratio: draft.elementYRatio,
+            scroll_y: draft.scrollY,
+            document_y: draft.documentY,
+            viewport_width: window.innerWidth,
+            viewport_height: window.innerHeight,
+            design_width: window.innerWidth,
+            design_height: window.innerHeight,
+            ...(environment ? { environment } : {}),
+            ...(appVersion ? { app_version: appVersion } : {}),
+            ...(activeIdentify || draftAuthorName.trim()
+                ? {
+                    ...(activeIdentify ? { author_id: activeIdentify.id } : {}),
+                    author_name: draftAuthorName.trim() || activeIdentify?.name,
+                }
+                : {}),
+        };
+    };
+    const finalizeDraftCreate = () => {
+        setDraft(null);
+        setSelectedTarget(null);
+        setHoveredTarget(null);
+        setErrorMessage("");
+        setMode("view");
+    };
+    const handleCreateSubmit = async () => {
+        const payload = buildCreatePayloadFromDraft();
+        if (!payload) {
+            return;
+        }
+        try {
+            const savedFeedback = await createFeedback(await signCreatePayload(payload));
+            await notifyFeedbackCreate(eventCallbacks, savedFeedback);
+            finalizeDraftCreate();
+        }
+        catch (nextError) {
+            setErrorMessage(nextError instanceof Error ? nextError.message : messages.errors.saveFeedbackFailed);
+        }
+    };
+    const handleCreateSubmitWithGitHubIssue = async () => {
+        if (!github?.onCreate || !canCreateGitHubIssueOnCreateValue || creatingGitHubIssueId || isCreating) {
+            return;
+        }
+        const payload = buildCreatePayloadFromDraft();
+        if (!payload) {
+            return;
+        }
+        setCreatingGitHubIssueId("draft");
+        setErrorMessage("");
+        try {
+            const savedFeedback = await createFeedback(await signCreatePayload(payload));
+            await notifyFeedbackCreate(eventCallbacks, savedFeedback);
+            const result = await github.onCreate(savedFeedback);
+            const updatedFeedback = await updateFeedback(savedFeedback.id, await signUpdatePayload(buildGitHubIssueUpdate(savedFeedback, result, messages.resolution.gitIssuedMessage)));
+            await notifyGitHubIssueCreated(eventCallbacks, {
+                feedback: updatedFeedback,
+                issueUrl: result.issueUrl,
+            });
+            finalizeDraftCreate();
+        }
+        catch (nextError) {
+            setErrorMessage(nextError instanceof Error ? nextError.message : messages.errors.createGitHubIssueFailed);
+        }
+        finally {
+            setCreatingGitHubIssueId(null);
+        }
+    };
+    const startEditing = (report) => {
+        if (report.status === "archived") {
+            setErrorMessage(messages.errors.archivedReadOnly);
+            setSelectedReportId(report.id);
+            return;
+        }
+        setEditingReportId(report.id);
+        setEditableDraft({
+            message: report.message,
+            status: report.status,
+            fieldValues: createInitialFieldValues(fields, report.field_values),
+        });
+        setSelectedReportId(report.id);
+    };
+    const handleUpdateSubmit = async () => {
+        if (!selectedReport || !editableDraft) {
+            return;
+        }
+        if (selectedReport.status === "archived") {
+            setErrorMessage(messages.errors.archivedNotEditable);
+            return;
+        }
+        const nextError = getFieldError(editableDraft.message, editableDraft.fieldValues, fields, messages.errors);
+        if (nextError) {
+            setErrorMessage(nextError);
+            return;
+        }
+        try {
+            const updatedFeedback = await updateFeedback(selectedReport.id, await signUpdatePayload({
+                message: editableDraft.message.trim(),
+                status: editableDraft.status,
+                field_values: editableDraft.fieldValues,
+            }));
+            await notifyFeedbackUpdate(eventCallbacks, updatedFeedback);
+            stopEditing();
+            setErrorMessage("");
+        }
+        catch (nextError) {
+            setErrorMessage(nextError instanceof Error ? nextError.message : messages.errors.updateFeedbackFailed);
+        }
+    };
+    const appendReply = async (report, reply) => {
+        const payload = await signUpdatePayload({
+            replies: [...report.replies, reply],
+        });
+        await updateFeedback(report.id, payload);
+        await notifyFeedbackReply(eventCallbacks, {
+            feedbackId: report.id,
+            message: reply.message,
+        });
+    };
+    const handleReplySubmit = async () => {
+        if (!activeReplyReport) {
+            return;
+        }
+        if (personalKeyRequired) {
+            setErrorMessage(messages.errors.personalKeyRequired);
+            return;
+        }
+        if (!replyDraft.trim()) {
+            setErrorMessage(messages.errors.replyContentRequired);
+            return;
+        }
+        if (!replyAuthorName.trim()) {
+            setErrorMessage(messages.errors.authorRequired);
+            return;
+        }
+        const replyMessage = replyDraft.trim();
+        const pendingType = pendingComposer?.type ?? null;
+        const reply = {
+            id: createReplyId(),
+            message: replyMessage,
+            created_at: new Date().toISOString(),
+            status: createReplyStatusForSubmit(pendingType),
+            author_type: "manager",
+            author_name: replyAuthorName.trim(),
+        };
+        try {
+            await appendReply(activeReplyReport, reply);
+            setErrorMessage("");
+            setReplyDraft("");
+            setPendingComposer(null);
+        }
+        catch (nextError) {
+            setErrorMessage(nextError instanceof Error ? nextError.message : messages.errors.saveReplyFailed);
+        }
+    };
+    const handleConfirmResolution = async () => {
+        if (!activeReplyReport) {
+            return;
+        }
+        const resolverName = confirmAuthorName.trim() || resolveOriginalFeedbackAuthorName(activeReplyReport);
+        if (!resolverName) {
+            setErrorMessage(messages.errors.reviewerRequired);
+            return;
+        }
+        const reply = {
+            id: createReplyId(),
+            message: messages.resolution.issueResolvedMessage,
+            created_at: new Date().toISOString(),
+            status: "resolved",
+            author_type: "user",
+            author_name: resolverName,
+        };
+        try {
+            const updatedFeedback = await updateFeedback(activeReplyReport.id, await signUpdatePayload({
+                status: "resolved",
+                replies: [...activeReplyReport.replies, reply],
+            }));
+            await notifyFeedbackUpdate(eventCallbacks, updatedFeedback);
+            setErrorMessage("");
+            setPendingComposer(null);
+            setReplyDraft("");
+            setShowConfirmAuthorSelect(false);
+        }
+        catch (nextError) {
+            setErrorMessage(nextError instanceof Error ? nextError.message : messages.errors.confirmResolutionFailed);
+        }
+    };
+    const handleCreateGitHubIssue = async (report) => {
+        if (!github?.onCreate || !canCreateGitHubIssueFromListValue || creatingGitHubIssueId) {
+            return;
+        }
+        if (isGitIssued(report)) {
+            return;
+        }
+        setCreatingGitHubIssueId(report.id);
+        setErrorMessage("");
+        try {
+            const result = await github.onCreate(report);
+            const updatedFeedback = await updateFeedback(report.id, await signUpdatePayload(buildGitHubIssueUpdate(report, result, messages.resolution.gitIssuedMessage)));
+            await notifyGitHubIssueCreated(eventCallbacks, {
+                feedback: updatedFeedback,
+                issueUrl: result.issueUrl,
+            });
+            setErrorMessage("");
+        }
+        catch (nextError) {
+            setErrorMessage(nextError instanceof Error ? nextError.message : messages.errors.createGitHubIssueFailed);
+        }
+        finally {
+            setCreatingGitHubIssueId(null);
+        }
+    };
+    const handleDelete = async (id) => {
+        if (personalKeyRequired) {
+            setErrorMessage(messages.errors.personalKeyRequired);
+            return;
+        }
+        try {
+            await deleteFeedback(id);
+            await notifyFeedbackDelete(eventCallbacks, id);
+            if (selectedReportId === id) {
+                setSelectedReportId(null);
+            }
+            if (editingReportId === id) {
+                stopEditing();
+            }
+            if (activeReplyReportId === id) {
+                closeReplyComposer();
+            }
+            setErrorMessage("");
+        }
+        catch (nextError) {
+            setErrorMessage(nextError instanceof Error ? nextError.message : messages.errors.deleteFeedbackFailed);
+        }
+    };
+    useReportShortcuts({
+        mode,
+        draft,
+        editingReportId,
+        panelTab,
+        showTargetPreview,
+        activeReplyReportId,
+        pendingComposer,
+        toggleReportMode,
+        toggleTargetPreview,
+        toggleIssueMode,
+        cancelDraft,
+        cancelPendingComposer,
+        closeReplyComposer,
+        handleCreateSubmit,
+        stopEditing,
+        handleUpdateSubmit,
+        focusSearchInput,
+        selectAdjacentReport,
+    });
+    return {
+        appearance: activeAppearance,
+        setAppearance,
+        locale,
+        setLocale,
+        messages,
+        fields,
+        authors: authorizedAuthors,
+        projectId,
+        environment,
+        appVersion,
+        currentPathname,
+        showFeedbackList,
+        panelTab,
+        routeDetailsStats,
+        canTransferFeedback,
+        personalKey,
+        publicKey,
+        personalKeyRequired,
+        personalKeyPendingRegistration,
+        personalKeyCandidates,
+        issuePersonalKey,
+        rotatePersonalKey,
+        insertPersonalKey,
+        canListAllFeedback,
+        visibleShortcutKeys,
+        searchInputRef,
+        resolvedAppearance,
+        isMobileViewport,
+        mode,
+        showTargetPreview,
+        selectableTargets,
+        filters,
+        setFilters,
+        listScope,
+        setListScope,
+        reports,
+        filteredReports,
+        isError,
+        isFetching,
+        hasNextPage,
+        isFetchingNextPage,
+        fetchNextPage,
+        isCreating,
+        isUpdating,
+        isDeleting,
+        queryErrorMessage,
+        refetch,
+        errorMessage,
+        setErrorMessage,
+        draft,
+        hoveredTarget,
+        selectedTarget,
+        markers,
+        selectedReport,
+        editingReportId,
+        editableDraft,
+        setEditableDraft,
+        overlayRef,
+        activeReplyReportId,
+        activeReplyReport,
+        tooltipReport,
+        tooltipAnchor,
+        tooltipFieldTags,
+        replyDraft,
+        setReplyDraft,
+        draftAuthorName,
+        setDraftAuthorName,
+        replyAuthorName,
+        setReplyAuthorName,
+        pendingComposer,
+        startDenyReview,
+        startCheckoutReview,
+        cancelPendingComposer,
+        confirmAuthorName,
+        setConfirmAuthorName,
+        showConfirmAuthorSelect,
+        toggleConfirmAuthorSelect,
+        handleConfirmResolution,
+        targetStats,
+        statusText,
+        toggleReportMode,
+        toggleTargetPreview,
+        toggleIssueMode,
+        openPanelTab,
+        togglePanelTab,
+        selectReport,
+        locateFeedback,
+        focusSearchInput,
+        selectAdjacentReport,
+        openReplyComposer,
+        closeReplyComposer,
+        clearHoverLeaveTimeout,
+        scheduleHoverLeave,
+        setHoveredMarkerId,
+        handleOverlayMove,
+        handleOverlayClick,
+        cancelDraft,
+        updateDraftMessage,
+        updateDraftField,
+        handleCreateSubmit,
+        startEditing,
+        stopEditing,
+        handleUpdateSubmit,
+        handleReplySubmit,
+        handleDelete,
+        canCreateGitHubIssueFromList: canCreateGitHubIssueFromListValue,
+        canCreateGitHubIssueOnCreate: canCreateGitHubIssueOnCreateValue,
+        creatingGitHubIssueId,
+        handleCreateGitHubIssue,
+        handleCreateSubmitWithGitHubIssue,
+        isDraftGitHubIssueSubmitting: creatingGitHubIssueId === "draft",
+    };
+}
+//# sourceMappingURL=useReportState.js.map