@fivepixels-js/react 0.1.6 → 0.2.0

package/dist/components/panel/feedback/PickTargetSnippet.d.ts

@@ -0,0 +1,7 @@
+type PickTargetSnippetProps = {
+    suggestedReportId: string;
+    reportType?: "group" | "item";
+};
+export declare function PickTargetSnippet({ suggestedReportId, reportType }: PickTargetSnippetProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PickTargetSnippet.d.ts.map

package/dist/components/panel/feedback/PickTargetSnippet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickTargetSnippet.d.ts","sourceRoot":"","sources":["../../../../src/components/panel/feedback/PickTargetSnippet.tsx"],"names":[],"mappings":"AAOA,KAAK,sBAAsB,GAAG;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACjC,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAAE,iBAAiB,EAAE,UAAmB,EAAE,EAAE,sBAAsB,2CAkEnG"}

package/dist/components/panel/feedback/PickTargetSnippet.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { CopyIcon, InfoIcon, StarIcon } from "../../../components/icons/Icons.js";
+import { HoverTooltip } from "../../../components/ui/HoverTooltip.js";
+import { useReport } from "../../../providers/reportContext.js";
+import { buildReportIdAttributeSnippet } from "../../../utils/targetSelector.js";
+import { Text } from "../../../components/ui/Text";
+export function PickTargetSnippet({ suggestedReportId, reportType = "item" }) {
+    const { messages, setErrorMessage } = useReport();
+    const [copied, setCopied] = useState(false);
+    const snippet = buildReportIdAttributeSnippet(suggestedReportId, reportType);
+    const infoTooltipContent = useMemo(() => `${messages.pickTarget.snippetTooltipIntro}\n${snippet}`, [messages.pickTarget.snippetTooltipIntro, snippet]);
+    const handleCopy = async () => {
+        try {
+            if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+                await navigator.clipboard.writeText(snippet);
+            }
+            else {
+                throw new Error("clipboard unavailable");
+            }
+            setCopied(true);
+            window.setTimeout(() => setCopied(false), 1500);
+        }
+        catch {
+            setErrorMessage(messages.errors.clipboardCopyFailed);
+        }
+    };
+    return (_jsxs("section", { className: "flex items-center justify-between gap-[6px] px-[12px] py-[4px]", children: [_jsxs("section", { className: "flex gap-[4px]", children: [_jsx(StarIcon, { className: "h-[12px] w-[12px] shrink-0 text-emerald-600 dark:text-emerald-300" }), _jsx("section", { className: "flex flex-col gap-[4px]", children: _jsx(Text.Shimmer, { className: "text-[12px]", color: { start: "#ffffff", end: "#000000" }, duration: 10, children: "\uD604\uC7AC \uC694\uC18C\uC5D0 ID\uB97C \uC124\uC815\uD558\uBA74 \uCD94\uC801\uC774 \uB354 \uC26C\uC6CC\uC9D1\uB2C8\uB2E4" }) })] }), _jsxs("section", { className: "flex", children: [_jsx(HoverTooltip, { multiline: true, content: infoTooltipContent, children: _jsx("button", { type: "button", "data-fivepixels-interactive": "", "aria-label": messages.pickTarget.snippetInfoAriaLabel, className: "flex h-[20px] w-[20px] shrink-0 items-center justify-center text-[var(--adaptive-black500)] hover:text-[var(--adaptive-black900)]", children: _jsx(InfoIcon, { className: "h-[14px] w-[14px]" }) }) }), _jsx(HoverTooltip, { label: copied ? messages.common.copied : messages.common.copy, children: _jsx("button", { type: "button", "data-fivepixels-interactive": "", onClick: () => void handleCopy(), "aria-label": messages.pickTarget.snippetCopyAriaLabel, className: "flex h-[20px] w-[20px] shrink-0 items-center justify-center text-[var(--adaptive-black500)] hover:text-[var(--adaptive-black900)]", children: copied ? _jsx("span", { className: "text-[9px] font-semibold", children: messages.common.ok }) : _jsx(CopyIcon, { className: "h-[12px] w-[12px]" }) }) })] })] }));
+}
+//# sourceMappingURL=PickTargetSnippet.js.map

package/dist/components/panel/feedback/PickTargetSnippet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickTargetSnippet.js","sourceRoot":"","sources":["../../../../src/components/panel/feedback/PickTargetSnippet.tsx"],"names":[],"mappings":"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"}

package/dist/components/panel/feedback/QuestionThreadGroup.d.ts

@@ -0,0 +1,9 @@
+import type { ReportReply } from "../../../types/report.js";
+type QuestionThreadGroupProps = {
+    questions: ReportReply[];
+    originalAuthorName: string;
+    forceExpanded?: boolean;
+};
+export declare function QuestionThreadGroup({ questions, originalAuthorName, forceExpanded }: QuestionThreadGroupProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=QuestionThreadGroup.d.ts.map

package/dist/components/panel/feedback/QuestionThreadGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuestionThreadGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/panel/feedback/QuestionThreadGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAMrD,KAAK,wBAAwB,GAAG;IAC5B,SAAS,EAAE,WAAW,EAAE,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,aAAqB,EAAE,EAAE,wBAAwB,kDAmDrH"}

package/dist/components/panel/feedback/QuestionThreadGroup.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useReport } from "../../../providers/reportContext.js";
+import { ChevronDownIcon } from "../../../components/icons/Icons.js";
+import { ThreadChildReply } from "./ThreadChildReply.js";
+import { ThreadTimelineRow } from "./ThreadTimelineRow.js";
+export function QuestionThreadGroup({ questions, originalAuthorName, forceExpanded = false }) {
+    const { messages, questionThreadDisplay } = useReport();
+    const [isExpanded, setIsExpanded] = useState(() => questionThreadDisplay === "expanded");
+    useEffect(() => {
+        setIsExpanded(questionThreadDisplay === "expanded");
+    }, [questionThreadDisplay]);
+    useEffect(() => {
+        if (forceExpanded) {
+            setIsExpanded(true);
+        }
+    }, [forceExpanded]);
+    if (questions.length === 0) {
+        return null;
+    }
+    const toggleLabel = isExpanded
+        ? forceExpanded
+            ? messages.thread.questionsPending(questions.length)
+            : messages.thread.questionsHide(questions.length)
+        : messages.thread.questionsShow(questions.length);
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsx(ThreadTimelineRow, { children: _jsxs("button", { type: "button", "data-fivepixels-interactive": "", "aria-expanded": isExpanded, "aria-label": messages.thread.questionsToggleAriaLabel(questions.length, isExpanded), onClick: () => setIsExpanded((current) => !current), className: "flex items-center gap-[4px] rounded-[6px] py-[2px] text-left text-[12px] text-[var(--adaptive-black500)] hover:opacity-80", children: [_jsx(ChevronDownIcon, { className: `h-[12px] w-[12px] shrink-0 text-[var(--adaptive-black400)] transition-transform ${isExpanded ? "rotate-180" : ""}` }), _jsx("span", { className: "text-[12px] text-[var(--adaptive-black500)] font-medium", children: toggleLabel })] }) }), isExpanded
+                ? questions.map((question) => (_jsx(ThreadChildReply, { reply: question, originalAuthorName: originalAuthorName }, question.id)))
+                : null] }));
+}
+//# sourceMappingURL=QuestionThreadGroup.js.map

package/dist/components/panel/feedback/QuestionThreadGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuestionThreadGroup.js","sourceRoot":"","sources":["../../../../src/components/panel/feedback/QuestionThreadGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAQ3D,MAAM,UAAU,mBAAmB,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,aAAa,GAAG,KAAK,EAA4B;IAClH,MAAM,EAAE,QAAQ,EAAE,qBAAqB,EAAE,GAAG,SAAS,EAAE,CAAC;IACxD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,qBAAqB,KAAK,UAAU,CAAC,CAAC;IAEzF,SAAS,CAAC,GAAG,EAAE;QACX,aAAa,CAAC,qBAAqB,KAAK,UAAU,CAAC,CAAC;IACxD,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAE5B,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,aAAa,EAAE,CAAC;YAChB,aAAa,CAAC,IAAI,CAAC,CAAC;QACxB,CAAC;IACL,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACzB,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM,WAAW,GAAG,UAAU;QAC1B,CAAC,CAAC,aAAa;YACX,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC,MAAM,CAAC;YACpD,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC;QACrD,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IAEtD,OAAO,CACH,eAAK,SAAS,EAAC,eAAe,aAC1B,KAAC,iBAAiB,cACd,kBACI,IAAI,EAAC,QAAQ,iCACe,EAAE,mBACf,UAAU,gBACb,QAAQ,CAAC,MAAM,CAAC,wBAAwB,CAAC,SAAS,CAAC,MAAM,EAAE,UAAU,CAAC,EAClF,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,EACnD,SAAS,EAAC,2HAA2H,aAErI,KAAC,eAAe,IAAC,SAAS,EAAE,mFAAmF,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,GAAI,EACnJ,eAAM,SAAS,EAAC,yDAAyD,YAAE,WAAW,GAAQ,IACzF,GACO,EAEnB,UAAU;gBACP,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACxB,KAAC,gBAAgB,IAEb,KAAK,EAAE,QAAQ,EACf,kBAAkB,EAAE,kBAAkB,IAFjC,QAAQ,CAAC,EAAE,CAGlB,CACL,CAAC;gBACJ,CAAC,CAAC,IAAI,IACR,CACT,CAAC;AACN,CAAC"}

package/dist/components/panel/feedback/ReplyHistoryControls.d.ts

@@ -0,0 +1,8 @@
+import type { ReplyHistoryState } from "../../../hooks/replyHistoryActions.js";
+type ReplyHistoryControlsProps = {
+    reportId: string;
+    history: ReplyHistoryState | undefined;
+};
+export declare function ReplyHistoryControls({ reportId, history }: ReplyHistoryControlsProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=ReplyHistoryControls.d.ts.map

package/dist/components/panel/feedback/ReplyHistoryControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReplyHistoryControls.d.ts","sourceRoot":"","sources":["../../../../src/components/panel/feedback/ReplyHistoryControls.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAExE,KAAK,yBAAyB,GAAG;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,iBAAiB,GAAG,SAAS,CAAC;CAC1C,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,yBAAyB,kDAkFpF"}

package/dist/components/panel/feedback/ReplyHistoryControls.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ProcessingDots } from "../../../components/ui/ProcessingDots.js";
+import { usesReplyInfiniteScroll, usesReplyLoadMoreButton, usesReplyPaginationMode } from "../../../constants/replyHistory.js";
+import { useReport } from "../../../providers/reportContext.js";
+export function ReplyHistoryControls({ reportId, history }) {
+    const { messages, replyHistory, loadOlderReplies, goToOlderPaginationPage, goToNewerPaginationPage } = useReport();
+    if (!history?.initialized) {
+        return history?.isLoadingOlder ? (_jsxs("div", { className: "flex items-center justify-center gap-[6px] py-[8px] text-[12px] text-[var(--adaptive-black500)]", children: [_jsx(ProcessingDots, {}), _jsx("span", { children: messages.feedbackList.loadingMore })] })) : null;
+    }
+    const showPagination = usesReplyPaginationMode(replyHistory.mode);
+    const showLoadMoreButton = usesReplyLoadMoreButton(replyHistory.mode);
+    const totalPages = Math.max(1, Math.ceil(history.totalCount / replyHistory.pageSize));
+    const currentPageNumber = totalPages - history.paginationPageIndex;
+    const handleLoadOlder = () => {
+        if (history.isLoadingOlder) {
+            return;
+        }
+        if (showPagination) {
+            void goToOlderPaginationPage(reportId, replyHistory);
+            return;
+        }
+        void loadOlderReplies(reportId, replyHistory);
+    };
+    return (_jsxs("div", { className: "flex flex-col items-center gap-[6px] py-[8px]", children: [history.isLoadingOlder ? (_jsxs("div", { className: "flex items-center justify-center gap-[6px] text-[12px] text-[var(--adaptive-black500)]", children: [_jsx(ProcessingDots, {}), _jsx("span", { children: messages.feedbackList.loadingMore })] })) : null, showPagination ? (_jsxs("div", { className: "flex items-center gap-[8px] text-[12px] text-[var(--adaptive-black600)]", children: [_jsx("button", { type: "button", "data-fivepixels-interactive": "", disabled: !history.hasNewerPage || history.isLoadingOlder, onClick: () => goToNewerPaginationPage(reportId, replyHistory), className: "rounded-[6px] px-[8px] py-[4px] font-semibold hover:bg-[var(--adaptive-black100)] disabled:cursor-not-allowed disabled:opacity-40", children: messages.thread.replyPaginationNewer }), _jsx("span", { className: "font-medium text-[var(--adaptive-black500)]", children: messages.thread.replyPaginationStatus(currentPageNumber, totalPages) }), _jsx("button", { type: "button", "data-fivepixels-interactive": "", disabled: !history.hasMoreOlder || history.isLoadingOlder, onClick: handleLoadOlder, className: "rounded-[6px] px-[8px] py-[4px] font-semibold hover:bg-[var(--adaptive-black100)] disabled:cursor-not-allowed disabled:opacity-40", children: messages.thread.replyPaginationOlder })] })) : null, showLoadMoreButton && history.hasMoreOlder ? (_jsx("button", { type: "button", "data-fivepixels-interactive": "", disabled: history.isLoadingOlder, onClick: handleLoadOlder, className: "rounded-[999px] border border-[var(--adaptive-border-subtle)] px-[12px] py-[4px] text-[12px] font-semibold text-[var(--adaptive-black600)] hover:bg-[var(--adaptive-black100)] disabled:cursor-not-allowed disabled:opacity-50", children: messages.thread.loadMoreReplies(replyHistory.pageSize) })) : null, !showPagination && !showLoadMoreButton && usesReplyInfiniteScroll(replyHistory.mode) && history.hasMoreOlder && !history.isLoadingOlder ? (_jsx("p", { className: "text-[12px] text-[var(--adaptive-black500)]", children: messages.thread.scrollHintUp })) : null] }));
+}
+//# sourceMappingURL=ReplyHistoryControls.js.map

package/dist/components/panel/feedback/ReplyHistoryControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReplyHistoryControls.js","sourceRoot":"","sources":["../../../../src/components/panel/feedback/ReplyHistoryControls.tsx"],"names":[],"mappings":"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"}

package/dist/components/panel/feedback/ThreadAuthorMeta.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+type ThreadAuthorMetaProps = {
+    authorName: string;
+    createdAt?: string;
+    showCreator?: boolean;
+    trailing?: ReactNode;
+};
+export declare function ThreadAuthorMeta({ authorName, createdAt, showCreator, trailing }: ThreadAuthorMetaProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=ThreadAuthorMeta.d.ts.map

package/dist/components/panel/feedback/ThreadAuthorMeta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadAuthorMeta.d.ts","sourceRoot":"","sources":["../../../../src/components/panel/feedback/ThreadAuthorMeta.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,KAAK,qBAAqB,GAAG;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,WAAmB,EAAE,QAAQ,EAAE,EAAE,qBAAqB,kDAe/G"}

package/dist/components/panel/feedback/ThreadAuthorMeta.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FeedbackCreatorBadge } from "./FeedbackCreatorBadge.js";
+export function ThreadAuthorMeta({ authorName, createdAt, showCreator = false, trailing }) {
+    if (!authorName.trim()) {
+        return null;
+    }
+    return (_jsx("div", { className: "flex items-center justify-between gap-[8px]", children: _jsxs("div", { className: "flex min-w-0 items-center gap-[6px]", children: [_jsx("p", { className: "truncate text-[12px] text-[var(--adaptive-black500)]", children: authorName }), showCreator ? _jsx(FeedbackCreatorBadge, {}) : null, trailing] }) }));
+}
+//# sourceMappingURL=ThreadAuthorMeta.js.map

package/dist/components/panel/feedback/ThreadAuthorMeta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadAuthorMeta.js","sourceRoot":"","sources":["../../../../src/components/panel/feedback/ThreadAuthorMeta.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AASjE,MAAM,UAAU,gBAAgB,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,GAAG,KAAK,EAAE,QAAQ,EAAyB;IAC5G,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,EAAE,CAAC;QACrB,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,CACH,cAAK,SAAS,EAAC,6CAA6C,YACxD,eAAK,SAAS,EAAC,qCAAqC,aAChD,YAAG,SAAS,EAAC,sDAAsD,YAAE,UAAU,GAAK,EACnF,WAAW,CAAC,CAAC,CAAC,KAAC,oBAAoB,KAAG,CAAC,CAAC,CAAC,IAAI,EAC7C,QAAQ,IACP,GAEJ,CACT,CAAC;AACN,CAAC"}

package/dist/components/panel/feedback/ThreadChildReply.d.ts

@@ -0,0 +1,8 @@
+import type { ReportReply } from "../../../types/report.js";
+type ThreadChildReplyProps = {
+    reply: ReportReply;
+    originalAuthorName: string;
+};
+export declare function ThreadChildReply({ reply, originalAuthorName }: ThreadChildReplyProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ThreadChildReply.d.ts.map

package/dist/components/panel/feedback/ThreadChildReply.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadChildReply.d.ts","sourceRoot":"","sources":["../../../../src/components/panel/feedback/ThreadChildReply.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD,KAAK,qBAAqB,GAAG;IACzB,KAAK,EAAE,WAAW,CAAC;IACnB,kBAAkB,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,kBAAkB,EAAE,EAAE,qBAAqB,2CAcpF"}

package/dist/components/panel/feedback/ThreadChildReply.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ThreadAuthorMeta } from "./ThreadAuthorMeta.js";
+import { ThreadTimelineRow } from "./ThreadTimelineRow.js";
+export function ThreadChildReply({ reply, originalAuthorName }) {
+    return (_jsxs(ThreadTimelineRow, { children: [_jsx("p", { className: "leading-[1.5] text-[13px] text-[var(--adaptive-text-primary)]", children: reply.message }), reply.author_name ? (_jsx(ThreadAuthorMeta, { authorName: reply.author_name, createdAt: reply.created_at, showCreator: reply.author_name.trim() === originalAuthorName })) : null] }));
+}
+//# sourceMappingURL=ThreadChildReply.js.map

package/dist/components/panel/feedback/ThreadChildReply.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadChildReply.js","sourceRoot":"","sources":["../../../../src/components/panel/feedback/ThreadChildReply.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAO3D,MAAM,UAAU,gBAAgB,CAAC,EAAE,KAAK,EAAE,kBAAkB,EAAyB;IACjF,OAAO,CACH,MAAC,iBAAiB,eACd,YAAG,SAAS,EAAC,+DAA+D,YAAE,KAAK,CAAC,OAAO,GAAK,EAE/F,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CACjB,KAAC,gBAAgB,IACb,UAAU,EAAE,KAAK,CAAC,WAAW,EAC7B,SAAS,EAAE,KAAK,CAAC,UAAU,EAC3B,WAAW,EAAE,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,kBAAkB,GAC9D,CACL,CAAC,CAAC,CAAC,IAAI,IACQ,CACvB,CAAC;AACN,CAAC"}

package/dist/components/panel/feedback/ThreadTimelineRow.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+/** Fixed width of the left time-rail column shared across every thread entry. */
+export declare const TIMELINE_RAIL_WIDTH = 46;
+type ThreadTimelineRowProps = {
+    time?: string;
+    children: ReactNode;
+    className?: string;
+};
+export declare function ThreadTimelineRow({ time, children, className }: ThreadTimelineRowProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ThreadTimelineRow.d.ts.map

package/dist/components/panel/feedback/ThreadTimelineRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadTimelineRow.d.ts","sourceRoot":"","sources":["../../../../src/components/panel/feedback/ThreadTimelineRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,iFAAiF;AACjF,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAEtC,KAAK,sBAAsB,GAAG;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAc,EAAE,EAAE,sBAAsB,2CAQ3F"}

package/dist/components/panel/feedback/ThreadTimelineRow.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Fixed width of the left time-rail column shared across every thread entry. */
+export const TIMELINE_RAIL_WIDTH = 46;
+export function ThreadTimelineRow({ time, children, className = "" }) {
+    return (_jsxs("div", { className: `grid grid-cols-[46px_minmax(0,1fr)] ${className}`, children: [_jsx("div", { children: time ? _jsx("p", { className: "rounded-full bg-[var(--adaptive-black900)] px-[4px] py-[2px] text-center text-[12px] text-[var(--adaptive-black200)]", children: time }) : null }), _jsx("div", { className: "min-w-0 pb-[16px] pl-[14px] flex flex-col gap-[4px]", children: children })] }));
+}
+//# sourceMappingURL=ThreadTimelineRow.js.map

package/dist/components/panel/feedback/ThreadTimelineRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadTimelineRow.js","sourceRoot":"","sources":["../../../../src/components/panel/feedback/ThreadTimelineRow.tsx"],"names":[],"mappings":";AAEA,iFAAiF;AACjF,MAAM,CAAC,MAAM,mBAAmB,GAAG,EAAE,CAAC;AAQtC,MAAM,UAAU,iBAAiB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EAA0B;IACxF,OAAO,CACH,eAAK,SAAS,EAAE,uCAAuC,SAAS,EAAE,aAE9D,wBAAM,IAAI,CAAC,CAAC,CAAC,YAAG,SAAS,EAAC,sHAAsH,YAAE,IAAI,GAAK,CAAC,CAAC,CAAC,IAAI,GAAO,EACzK,cAAK,SAAS,EAAC,qDAAqD,YAAE,QAAQ,GAAO,IACnF,CACT,CAAC;AACN,CAAC"}

package/dist/components/point/MarkerCaseSidebar.d.ts

@@ -0,0 +1,9 @@
+import type { ReportFeedback } from "../../types/report.js";
+type MarkerCaseSidebarProps = {
+    report: ReportFeedback;
+    focusedCaseId: string | null;
+    onSelectCase: (caseId: string) => void;
+};
+export declare function MarkerCaseSidebar({ report, focusedCaseId, onSelectCase }: MarkerCaseSidebarProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MarkerCaseSidebar.d.ts.map

package/dist/components/point/MarkerCaseSidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkerCaseSidebar.d.ts","sourceRoot":"","sources":["../../../src/components/point/MarkerCaseSidebar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAIxD,KAAK,sBAAsB,GAAG;IAC1B,MAAM,EAAE,cAAc,CAAC;IACvB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,CAAC;AAqCF,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,EAAE,sBAAsB,2CA4ChG"}

package/dist/components/point/MarkerCaseSidebar.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FEEDBACK_STATUS_COLOR } from "../../constants/feedbackStatus.js";
+import { CheckIcon } from "../../components/icons/Icons.js";
+import { useReport } from "../../providers/reportContext.js";
+import { getCaseLatestStatus } from "../../utils/feedbackThread.js";
+import { getReportCases } from "../../utils/reportCases.js";
+function CaseStatusIndicator({ caseStatus }) {
+    if (caseStatus === "resolved") {
+        return (_jsx("span", { "aria-hidden": true, className: "inline-flex h-[12px] w-[12px] shrink-0 items-center justify-center rounded-full", style: { backgroundColor: FEEDBACK_STATUS_COLOR.resolved }, children: _jsx(CheckIcon, { className: "h-[8px] w-[8px] text-white" }) }));
+    }
+    return (_jsx("span", { "aria-hidden": true, className: "inline-flex h-[12px] w-[12px] shrink-0 rounded-full border border-[var(--adaptive-black300)]" }));
+}
+function CaseStatusLabel({ status, isNeedGray }) {
+    const { messages } = useReport();
+    const color = FEEDBACK_STATUS_COLOR[status];
+    return (_jsx("span", { className: "shrink-0 whitespace-nowrap text-[11px] font-semibold leading-none", style: { color: isNeedGray ? "var(--adaptive-black500)" : color }, children: messages.status.feedback[status] }));
+}
+export function MarkerCaseSidebar({ report, focusedCaseId, onSelectCase }) {
+    const { messages } = useReport();
+    const cases = getReportCases(report);
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: [_jsx("p", { className: "shrink-0 px-[14px] pb-[8px] pt-[4px] text-[12px] font-semibold text-[var(--adaptive-black500)]", children: messages.cases.title }), _jsx("ul", { className: "flex min-h-0 flex-1 flex-col gap-[2px] overflow-auto px-[6px] pb-[10px]", children: cases.map((item) => {
+                    const isActive = item.id === focusedCaseId;
+                    const status = getCaseLatestStatus(report, item.id);
+                    return (_jsx("li", { children: _jsxs("button", { type: "button", "data-fivepixels-interactive": "", "aria-current": isActive, onClick: () => onSelectCase(item.id), className: `flex flex-col w-full items-start justify-center gap-[8px] rounded-[8px] px-[8px] py-[8px] text-left transition-colors ${isActive ? "bg-[var(--adaptive-neutralTintOpacity900)] text-[var(--adaptive-black900)]" : "text-[var(--adaptive-black700)] hover:bg-[var(--adaptive-tintOpacity100)]"}`, children: [_jsxs("section", { className: "flex items-center gap-[4px] w-full", children: [_jsx(CaseStatusIndicator, { caseStatus: item.status }), _jsx("span", { className: `min-w-0 flex-1 w-full truncate text-[14px] leading-[1] ${item.status === "resolved" ? "text-[var(--adaptive-black500)] line-through" : ""}`, title: item.text, children: item.text })] }), _jsx(CaseStatusLabel, { status: status, isNeedGray: true })] }) }, item.id));
+                }) })] }));
+}
+//# sourceMappingURL=MarkerCaseSidebar.js.map

package/dist/components/point/MarkerCaseSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkerCaseSidebar.js","sourceRoot":"","sources":["../../../src/components/point/MarkerCaseSidebar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,qBAAqB,EAA8B,MAAM,+BAA+B,CAAC;AAClG,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAQxD,SAAS,mBAAmB,CAAC,EAAE,UAAU,EAAoC;IACzE,IAAI,UAAU,KAAK,UAAU,EAAE,CAAC;QAC5B,OAAO,CACH,oCAEI,SAAS,EAAC,iFAAiF,EAC3F,KAAK,EAAE,EAAE,eAAe,EAAE,qBAAqB,CAAC,QAAQ,EAAE,YAE1D,KAAC,SAAS,IAAC,SAAS,EAAC,4BAA4B,GAAG,GACjD,CACV,CAAC;IACN,CAAC;IAED,OAAO,CACH,oCAEI,SAAS,EAAC,8FAA8F,GAC1G,CACL,CAAC;AACN,CAAC;AAED,SAAS,eAAe,CAAC,EAAE,MAAM,EAAE,UAAU,EAA2D;IACpG,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,CAAC;IACjC,MAAM,KAAK,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAC;IAE5C,OAAO,CACH,eACI,SAAS,EAAC,mEAAmE,EAC7E,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,KAAK,EAAE,YAEhE,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,GAC9B,CACV,CAAC;AACN,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,EAA0B;IAC7F,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,CAAC;IACjC,MAAM,KAAK,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;IAErC,OAAO,CACH,eAAK,SAAS,EAAC,8CAA8C,aACzD,YAAG,SAAS,EAAC,gGAAgG,YAAE,QAAQ,CAAC,KAAK,CAAC,KAAK,GAAK,EAExI,aAAI,SAAS,EAAC,yEAAyE,YAClF,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;oBAChB,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,KAAK,aAAa,CAAC;oBAC3C,MAAM,MAAM,GAAG,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;oBAEpD,OAAO,CACH,uBACI,kBACI,IAAI,EAAC,QAAQ,iCACe,EAAE,kBAChB,QAAQ,EACtB,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EACpC,SAAS,EAAE,yHACP,QAAQ,CAAC,CAAC,CAAC,4EAA4E,CAAC,CAAC,CAAC,2EAC9F,EAAE,aAEF,mBAAS,SAAS,EAAC,oCAAoC,aACnD,KAAC,mBAAmB,IAAC,UAAU,EAAE,IAAI,CAAC,MAAM,GAAI,EAChD,eACI,SAAS,EAAE,0DAA0D,IAAI,CAAC,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,8CAA8C,CAAC,CAAC,CAAC,EAAE,EAAE,EACvJ,KAAK,EAAE,IAAI,CAAC,IAAI,YAEf,IAAI,CAAC,IAAI,GACP,IACD,EACV,KAAC,eAAe,IACZ,MAAM,EAAE,MAAM,EACd,UAAU,SACZ,IACG,IAvBJ,IAAI,CAAC,EAAE,CAwBX,CACR,CAAC;gBACN,CAAC,CAAC,GACD,IACH,CACT,CAAC;AACN,CAAC"}

package/dist/components/point/MarkerFeedbackWindow.d.ts

@@ -0,0 +1,9 @@
+import type { Marker } from "../../types/report-ui.js";
+import type { ReportFeedback } from "../../types/report.js";
+type MarkerFeedbackWindowProps = {
+    report: ReportFeedback;
+    anchor: Pick<Marker, "left" | "top">;
+};
+export declare function MarkerFeedbackWindow({ report, anchor }: MarkerFeedbackWindowProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MarkerFeedbackWindow.d.ts.map

package/dist/components/point/MarkerFeedbackWindow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkerFeedbackWindow.d.ts","sourceRoot":"","sources":["../../../src/components/point/MarkerFeedbackWindow.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AA0GxD,KAAK,yBAAyB,GAAG;IAC7B,MAAM,EAAE,cAAc,CAAC;IACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,KAAK,CAAC,CAAC;CACxC,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,yBAAyB,2CA0ejF"}

package/dist/components/point/MarkerFeedbackWindow.js

@@ -0,0 +1,257 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, Fragment } from "react";
+import { getMarkerDotSize } from "../../utils/markerRuntime.js";
+import { useDraggableWindow, clampWindowPosition } from "../../hooks/useDraggableWindow.js";
+import { useGhostCornerResize } from "../../hooks/useGhostCornerResize.js";
+import { useNativeHover } from "../../hooks/useNativeHover.js";
+import { useReport } from "../../providers/reportContext.js";
+import { shouldShowCaseReplyComposer } from "../../utils/feedbackThread.js";
+import { getCaseAssigneeName, getCaseById } from "../../utils/reportCases.js";
+import { getFieldTags } from "../../utils/fields.js";
+import { copyTextToClipboard } from "../../utils/feedbackDataTransfer.js";
+import { buildFeedbackShareUrl } from "../../utils/feedbackDeepLink.js";
+import { CloseIcon, LinkIcon, MaximizeIcon, MinimizeIcon, RestoreIcon, SidePanelIcon } from "../../components/icons/Icons.js";
+import { FeedbackFieldTags } from "../../components/panel/feedback/FeedbackFieldTags.js";
+import { CornerResizeGhost } from "../../components/ui/CornerResizeGhost.js";
+import { CornerResizeHandle } from "../../components/ui/CornerResizeHandle.js";
+import { FeedbackComposer } from "../../components/panel/feedback/FeedbackComposer.js";
+import { CaseAssigneeInfo } from "../../components/panel/feedback/CaseAssigneeInfo.js";
+import { FeedbackThread } from "../../components/panel/feedback/FeedbackThread.js";
+import { MarkerCaseSidebar } from "./MarkerCaseSidebar.js";
+import { ProcessingDots } from "../../components/ui/ProcessingDots.js";
+import { Text } from "../../components/ui/Text/index.js";
+const WINDOW_MARGIN = 16;
+const DEFAULT_WINDOW_SIZE = { width: 600, height: 460 };
+const MIN_WINDOW_WIDTH = 420;
+const MIN_WINDOW_HEIGHT = 280;
+const DEFAULT_SIDEBAR_WIDTH = 208;
+const SIDEBAR_MIN_WIDTH = 150;
+const RIGHT_MIN_WIDTH = 280;
+const COLLAPSED_SIDEBAR_WIDTH = 46;
+const WINDOW_CLOSE_ANIMATION_MS = 220;
+const LEFT_SECTION_TRANSITION = "transition-[background-color,backdrop-filter] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)]";
+const LEFT_SECTION_FLAT_CLASS = `${LEFT_SECTION_TRANSITION} bg-[var(--adaptive-black50)]`;
+const LEFT_SECTION_BLUR_CLASS = `${LEFT_SECTION_TRANSITION} bg-[var(--adaptive-fillOpacity500)] backdrop-blur-[20px] shadow-[inset_0_20px_0_20px_var(--adaptive-black500)]]`;
+function getLeftSectionClass(phase) {
+    return phase === "idle" ? LEFT_SECTION_BLUR_CLASS : LEFT_SECTION_FLAT_CLASS;
+}
+const HEADER_BUTTON_CLASS = "flex h-[24px] w-[24px] items-center justify-center rounded-[6px] text-[var(--adaptive-black600)] transition-colors hover:bg-[var(--adaptive-tintOpacity200)] hover:text-[var(--adaptive-black900)]";
+function getViewportSize() {
+    if (typeof window === "undefined") {
+        return { width: DEFAULT_WINDOW_SIZE.width, height: DEFAULT_WINDOW_SIZE.height };
+    }
+    return { width: window.innerWidth, height: window.innerHeight };
+}
+function clampMarkerWindowSize(width, height) {
+    const viewport = getViewportSize();
+    const maxWidth = Math.max(MIN_WINDOW_WIDTH, viewport.width - WINDOW_MARGIN * 2);
+    const maxHeight = Math.max(MIN_WINDOW_HEIGHT, viewport.height - WINDOW_MARGIN * 2);
+    return {
+        width: Math.min(Math.max(width, MIN_WINDOW_WIDTH), maxWidth),
+        height: Math.min(Math.max(height, MIN_WINDOW_HEIGHT), maxHeight),
+    };
+}
+function clampSidebarWidth(width, windowWidth) {
+    const maxWidth = Math.max(SIDEBAR_MIN_WIDTH, windowWidth - RIGHT_MIN_WIDTH);
+    return Math.min(Math.max(width, SIDEBAR_MIN_WIDTH), maxWidth);
+}
+function WindowControlButton({ onClick, ariaLabel, title, className = "", children }) {
+    return (_jsx("button", { type: "button", "data-fivepixels-interactive": "", onPointerDown: (event) => event.stopPropagation(), onClick: onClick, "aria-label": ariaLabel, title: title, className: `${HEADER_BUTTON_CLASS} ${className}`, children: children }));
+}
+function MarkerWindowShareButton({ report, messages }) {
+    const [copied, setCopied] = useState(false);
+    const handleCopy = () => {
+        void copyTextToClipboard(buildFeedbackShareUrl(report))
+            .then(() => {
+            setCopied(true);
+            window.setTimeout(() => setCopied(false), 1500);
+        })
+            .catch(() => {
+            setCopied(false);
+        });
+    };
+    return (_jsx(WindowControlButton, { onClick: handleCopy, ariaLabel: messages.marker.shareLinkAriaLabel, title: copied ? messages.marker.shareLinkCopiedTitle : messages.marker.shareLinkTitle, children: _jsx(LinkIcon, { className: "h-[15px] w-[15px]" }) }));
+}
+export function MarkerFeedbackWindow({ report, anchor }) {
+    const { messages, fields, authors, pendingComposer, replyDraft, replyAuthorName, confirmAuthorName, showConfirmAuthorSelect, errorMessage, setErrorMessage, isUpdating, isSubmittingReply, isClaimingAssignee, focusedCaseId, selectCase, closeReplyComposer, clearHoverLeaveTimeout, scheduleHoverLeave, setHoveredMarkerId, setReplyDraft, setReplyAuthorName, setConfirmAuthorName, toggleConfirmAuthorSelect, handleReplySubmit, startDenyReview, startCheckoutReview, startAskQuestion, handleClaimAssignee, handleTransferAssignee, handleConfirmResolution, } = useReport();
+    const windowRef = useRef(null);
+    const surfaceRef = useRef(null);
+    const closeRequestedRef = useRef(false);
+    const closeFinishedRef = useRef(false);
+    const [windowMode, setWindowMode] = useState("normal");
+    const [windowSurfacePhase, setWindowSurfacePhase] = useState("entering");
+    const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+    const [size, setSize] = useState(DEFAULT_WINDOW_SIZE);
+    const [sidebarWidth, setSidebarWidth] = useState(DEFAULT_SIDEBAR_WIDTH);
+    const splitStateRef = useRef(null);
+    const splitListenersRef = useRef(null);
+    const hoverRef = useNativeHover({
+        onEnter: () => {
+            clearHoverLeaveTimeout();
+            setHoveredMarkerId(report.id);
+        },
+        onLeave: () => {
+            scheduleHoverLeave(report.id);
+        },
+    });
+    const bindWindowRef = useCallback((node) => {
+        windowRef.current = node;
+        hoverRef(node);
+    }, [hoverRef]);
+    const { position, handleDragHandlePointerDown } = useDraggableWindow({
+        enabled: windowMode !== "maximized",
+        windowRef,
+    });
+    const { isResizing, ghostRef, handleResizePointerDown } = useGhostCornerResize({
+        enabled: windowMode === "normal",
+        targetRef: surfaceRef,
+        handleCorner: "bottom-right",
+        clampSize: clampMarkerWindowSize,
+        onResizeComplete: setSize,
+    });
+    const finishClose = useCallback(() => {
+        if (closeFinishedRef.current) {
+            return;
+        }
+        closeFinishedRef.current = true;
+        clearHoverLeaveTimeout();
+        setHoveredMarkerId(null);
+        closeReplyComposer();
+    }, [clearHoverLeaveTimeout, closeReplyComposer, setHoveredMarkerId]);
+    const requestClose = useCallback(() => {
+        if (closeRequestedRef.current) {
+            return;
+        }
+        closeRequestedRef.current = true;
+        setWindowSurfacePhase("exiting");
+    }, []);
+    const handleWindowAnimationEnd = useCallback((event) => {
+        if (event.currentTarget !== event.target) {
+            return;
+        }
+        if (event.animationName.endsWith("fivepixels-marker-window-in")) {
+            setWindowSurfacePhase("idle");
+            return;
+        }
+        if (event.animationName.endsWith("fivepixels-marker-window-out") && closeRequestedRef.current) {
+            finishClose();
+        }
+    }, [finishClose]);
+    useEffect(() => {
+        if (windowSurfacePhase !== "exiting") {
+            return;
+        }
+        const fallbackId = window.setTimeout(finishClose, WINDOW_CLOSE_ANIMATION_MS + 60);
+        return () => {
+            window.clearTimeout(fallbackId);
+        };
+    }, [finishClose, windowSurfacePhase]);
+    useEffect(() => {
+        if (!focusedCaseId) {
+            return;
+        }
+        const handlePointerDown = (event) => {
+            if (closeRequestedRef.current) {
+                return;
+            }
+            const path = event.composedPath();
+            if (windowRef.current && path.includes(windowRef.current)) {
+                return;
+            }
+            const clickedMarker = path.find((node) => node instanceof Element && node.hasAttribute("data-marker-report-id"));
+            if (clickedMarker instanceof Element) {
+                return;
+            }
+            requestClose();
+        };
+        window.addEventListener("pointerdown", handlePointerDown);
+        return () => {
+            window.removeEventListener("pointerdown", handlePointerDown);
+        };
+    }, [focusedCaseId, requestClose]);
+    const detachSplitListeners = useCallback(() => {
+        const listeners = splitListenersRef.current;
+        if (!listeners) {
+            return;
+        }
+        window.removeEventListener("pointermove", listeners.move, true);
+        window.removeEventListener("pointerup", listeners.up, true);
+        window.removeEventListener("pointercancel", listeners.up, true);
+        splitListenersRef.current = null;
+    }, []);
+    useEffect(() => () => detachSplitListeners(), [detachSplitListeners]);
+    const isCreatorQuestionComposer = pendingComposer?.type === "question";
+    const showComposer = useMemo(() => {
+        if (!focusedCaseId) {
+            return false;
+        }
+        return shouldShowCaseReplyComposer(report, focusedCaseId, pendingComposer);
+    }, [focusedCaseId, pendingComposer, report]);
+    const focusedCase = focusedCaseId ? getCaseById(report, focusedCaseId) : undefined;
+    const focusedCaseAssigneeName = focusedCaseId ? getCaseAssigneeName(report, focusedCaseId) : null;
+    const showAssigneeAssigned = Boolean(focusedCaseAssigneeName) || isClaimingAssignee;
+    const fieldTags = useMemo(() => getFieldTags(fields, report.field_values), [fields, report.field_values]);
+    const viewport = getViewportSize();
+    const maximizedSize = {
+        width: Math.max(MIN_WINDOW_WIDTH, viewport.width - WINDOW_MARGIN * 2),
+        height: Math.max(MIN_WINDOW_HEIGHT, viewport.height - WINDOW_MARGIN * 2),
+    };
+    const isMinimized = windowMode === "minimized";
+    const isMaximized = windowMode === "maximized";
+    const effectiveSize = isMaximized ? maximizedSize : size;
+    const resolvedSidebarWidth = clampSidebarWidth(sidebarWidth, effectiveSize.width);
+    const initialPosition = useMemo(() => clampWindowPosition(anchor.left + getMarkerDotSize() / 2 - size.width / 2, anchor.top + getMarkerDotSize() / 2 - size.height / 2, size.width, size.height), [anchor.left, anchor.top, size.height, size.width]);
+    const resolvedPosition = isMaximized ? { left: WINDOW_MARGIN, top: WINDOW_MARGIN } : (position ?? initialPosition);
+    const leftSectionClass = getLeftSectionClass(windowSurfacePhase);
+    const windowAnimationClass = windowSurfacePhase === "exiting" ? "fivepixels-marker-window-exit" : windowSurfacePhase === "entering" ? "fivepixels-marker-window-enter pointer-events-auto" : "pointer-events-auto";
+    const handleSplitPointerDown = useCallback((event) => {
+        if (event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        detachSplitListeners();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        splitStateRef.current = { startX: event.clientX, startWidth: resolvedSidebarWidth, windowWidth: effectiveSize.width };
+        const handlePointerMove = (moveEvent) => {
+            const state = splitStateRef.current;
+            if (!state) {
+                return;
+            }
+            setSidebarWidth(clampSidebarWidth(state.startWidth + (moveEvent.clientX - state.startX), state.windowWidth));
+        };
+        const handlePointerUp = () => {
+            detachSplitListeners();
+            splitStateRef.current = null;
+        };
+        splitListenersRef.current = { move: handlePointerMove, up: handlePointerUp };
+        window.addEventListener("pointermove", handlePointerMove, true);
+        window.addEventListener("pointerup", handlePointerUp, true);
+        window.addEventListener("pointercancel", handlePointerUp, true);
+    }, [detachSplitListeners, effectiveSize.width, resolvedSidebarWidth]);
+    const handleToggleMinimize = () => {
+        setWindowMode((current) => (current === "minimized" ? "normal" : "minimized"));
+    };
+    const handleToggleMaximize = () => {
+        setWindowMode((current) => (current === "maximized" ? "normal" : "maximized"));
+    };
+    const leftControls = (_jsxs(_Fragment, { children: [_jsx(WindowControlButton, { onClick: requestClose, ariaLabel: messages.marker.windowCloseAriaLabel, children: _jsx(CloseIcon, { className: "h-[15px] w-[15px]" }) }), _jsx(WindowControlButton, { onClick: handleToggleMinimize, ariaLabel: isMinimized ? messages.marker.windowRestoreAriaLabel : messages.marker.windowMinimizeAriaLabel, children: _jsx(MinimizeIcon, { className: "h-[15px] w-[15px]" }) }), _jsx(WindowControlButton, { onClick: handleToggleMaximize, ariaLabel: isMaximized ? messages.marker.windowRestoreAriaLabel : messages.marker.windowMaximizeAriaLabel, children: isMaximized ? _jsx(RestoreIcon, { className: "h-[15px] w-[15px]" }) : _jsx(MaximizeIcon, { className: "h-[15px] w-[15px]" }) })] }));
+    const sidebarToggleButton = (_jsx(WindowControlButton, { onClick: () => setIsSidebarCollapsed((current) => !current), ariaLabel: isSidebarCollapsed ? messages.marker.sidebarExpandAriaLabel : messages.marker.sidebarCollapseAriaLabel, className: isSidebarCollapsed ? "" : "text-[var(--adaptive-blue500)]", children: _jsx(SidePanelIcon, { className: "h-[16px] w-[16px]" }) }));
+    const shareButton = (_jsx(MarkerWindowShareButton, { report: report, messages: messages }));
+    const rightSection = (_jsxs("div", { className: "flex min-w-0 flex-1 flex-col bg-[var(--adaptive-black50)]", children: [_jsx("div", { className: "shrink-0 border-b border-[var(--adaptive-border-subtle)] px-[16px] py-[8px]", children: focusedCase ? (_jsxs(Fragment, { children: [_jsx("p", { className: `truncate text-[15px] font-semibold leading-[1.4] text-[var(--adaptive-black900)] ${focusedCase.status === "resolved" ? "text-[var(--adaptive-black500)] line-through" : ""}`, title: focusedCase.text, children: focusedCase.text }), _jsxs("div", { className: "mt-[2px] flex min-w-0 items-center justify-between gap-[8px]", children: [_jsx("div", { className: "flex min-w-0 flex-1 items-center gap-[6px]", children: showAssigneeAssigned ? (_jsxs(_Fragment, { children: [_jsx(ProcessingDots, {}), _jsx(Text.Shimmer, { className: "min-w-0 truncate text-[12px] leading-[1.4]", color: {
+                                                    start: "var(--adaptive-black900)",
+                                                    end: "var(--adaptive-blue400)",
+                                                }, duration: 5, children: messages.marker.assigneeAssigned })] })) : (_jsx("p", { className: "min-w-0 truncate text-[12px] leading-[1.4] text-[var(--adaptive-black500)]", children: messages.marker.assigneeUnassigned })) }), _jsxs("div", { className: "flex min-w-0 shrink-0 items-center gap-[8px]", children: [_jsx(FeedbackFieldTags, { tags: fieldTags }), showAssigneeAssigned && focusedCase ? (_jsx(CaseAssigneeInfo, { caseItem: focusedCase, authors: authors })) : null] })] })] })) : (_jsx("p", { className: "text-[13px] text-[var(--adaptive-black500)]", children: messages.cases.selectToView })) }), _jsxs("div", { className: "flex min-h-0 flex-1 flex-col relative", children: [_jsx(FeedbackThread, { report: report, authors: authors, pendingComposer: pendingComposer, confirmAuthorName: confirmAuthorName, showConfirmAuthorSelect: showConfirmAuthorSelect, onConfirmAuthorNameChange: setConfirmAuthorName, onToggleConfirmAuthorSelect: toggleConfirmAuthorSelect, onStartDeny: startDenyReview, onStartCheckout: startCheckoutReview, onStartAskQuestion: startAskQuestion, onClaimAssignee: () => void handleClaimAssignee(), onTransferAssignee: () => void handleTransferAssignee(), onConfirm: () => void handleConfirmResolution(), isUpdating: isUpdating, isClaimingAssignee: isClaimingAssignee, hideCaseSelector: true }), showComposer ? (_jsx("section", { className: "relative shrink-0 overflow-visible p-[4px] absolute bottom-0 left-0 w-full", children: _jsx(FeedbackComposer, { message: replyDraft, onMessageChange: (value) => {
+                                setReplyDraft(value);
+                                if (errorMessage) {
+                                    setErrorMessage("");
+                                }
+                            }, authorName: replyAuthorName, onAuthorNameChange: setReplyAuthorName, authors: authors, fields: fields, fieldValues: report.field_values, onFieldChange: () => undefined, showTags: false, hideAuthorSelector: true, onSubmit: () => void handleReplySubmit(), isSubmitting: isSubmittingReply || isUpdating, autoFocus: pendingComposer !== null, askQuestionForced: isCreatorQuestionComposer, errorMessage: errorMessage }) })) : null] })] }));
+    return (_jsxs(_Fragment, { children: [isResizing ? _jsx(CornerResizeGhost, { ghostRef: ghostRef }) : null, _jsx("div", { ref: bindWindowRef, "data-fivepixels-interactive": "", onClick: (event) => event.stopPropagation(), onAnimationEnd: handleWindowAnimationEnd, className: `fixed z-[1000001] ${windowAnimationClass}`, style: {
+                    left: resolvedPosition.left,
+                    top: resolvedPosition.top,
+                    width: effectiveSize.width,
+                    ...(isMinimized ? null : { height: effectiveSize.height }),
+                }, children: isMinimized ? (_jsxs("div", { ref: surfaceRef, className: `flex items-center justify-between gap-[8px] overflow-hidden rounded-[16px] border border-[var(--adaptive-border-subtle)] px-[10px] py-[8px] shadow-[var(--adaptive-popup-shadow)] ${leftSectionClass}`, children: [_jsx("div", { onPointerDown: handleDragHandlePointerDown, className: "flex flex-1 cursor-move touch-none select-none items-center gap-[2px]", children: leftControls }), shareButton, sidebarToggleButton] })) : (_jsxs("div", { ref: surfaceRef, className: "flex h-full w-full flex-row overflow-hidden rounded-[16px] shadow-[var(--adaptive-popup-shadow)] border border-[var(--adaptive-border-subtle)]", children: [isSidebarCollapsed ? (_jsxs("div", { onPointerDown: handleDragHandlePointerDown, className: `flex shrink-0 cursor-move touch-none select-none flex-col items-center gap-[2px] py-[8px] ${leftSectionClass}`, style: { width: COLLAPSED_SIDEBAR_WIDTH }, children: [leftControls, shareButton, sidebarToggleButton] })) : (_jsxs("div", { className: `flex shrink-0 flex-col overflow-hidden ${leftSectionClass}`, style: { width: resolvedSidebarWidth }, children: [_jsxs("header", { onPointerDown: handleDragHandlePointerDown, className: "flex shrink-0 cursor-move touch-none select-none items-center justify-between gap-[8px] px-[10px] py-[8px]", children: [_jsx("div", { className: "flex items-center gap-[2px]", children: leftControls }), _jsxs("div", { className: "flex items-center gap-[2px]", children: [shareButton, sidebarToggleButton] })] }), _jsx(MarkerCaseSidebar, { report: report, focusedCaseId: focusedCaseId, onSelectCase: selectCase })] })), isSidebarCollapsed ? null : (_jsx("div", { role: "separator", "aria-orientation": "vertical", onPointerDown: handleSplitPointerDown, className: "group relative w-[1px] shrink-0 cursor-col-resize touch-none self-stretch bg-[var(--adaptive-black50)] group-hover:bg-[var(--adaptive-blue500)] transition-colors" })), rightSection, windowMode === "normal" ? (_jsx(CornerResizeHandle, { corner: "bottom-right", ariaLabel: messages.marker.resizeAriaLabel, onPointerDown: handleResizePointerDown })) : null] })) })] }));
+}
+//# sourceMappingURL=MarkerFeedbackWindow.js.map