@e-llm-studio/feedback-flow 0.0.0-stage → 0.1.32

package/dist/FeedbackModal.js

@@ -0,0 +1,659 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeedbackModal = FeedbackModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const lucide_react_1 = require("lucide-react");
+const types_1 = require("./types");
+const feedbackTheme_1 = require("./feedbackTheme");
+const FeedbackScreenshotThumbnail_1 = require("./FeedbackScreenshotThumbnail");
+const severities = ['critical', 'high', 'medium', 'low'];
+const wordCount = (value) => value.trim().split(/\s+/).filter(Boolean).length;
+function FeedbackModal(props) {
+    if (!props.flow)
+        return null;
+    return (0, jsx_runtime_1.jsx)(FeedbackModalContent, { ...props });
+}
+function FeedbackModalContent({ flow, copy: copyOverrides, theme, onSubmit, onProgress, onDismiss, saving = false, resolveScreenshotUrl, anchorRef, overlayHostRef, anchorKey, slots, className, style, styles, classNames, backdropClassName, backdropStyle, dialogClassName, dialogStyle, }) {
+    const copy = (0, types_1.createFeedbackCopy)(copyOverrides);
+    const mergedTheme = (0, types_1.createFeedbackTheme)(theme);
+    const [customTime, setCustomTime] = (0, react_1.useState)(false);
+    const [introDismissed, setIntroDismissed] = (0, react_1.useState)(false);
+    const [showUseful, setShowUseful] = (0, react_1.useState)(false);
+    const [showLowRatingTime, setShowLowRatingTime] = (0, react_1.useState)(false);
+    const [revealedGapCount, setRevealedGapCount] = (0, react_1.useState)(0);
+    const [activeGapIndex, setActiveGapIndex] = (0, react_1.useState)(0);
+    const [reviewPageIndex, setReviewPageIndex] = (0, react_1.useState)(0);
+    const [submitError, setSubmitError] = (0, react_1.useState)(false);
+    const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
+    const [screenshotPreview, setScreenshotPreview] = (0, react_1.useState)(null);
+    const [capturingScreenshot, setCapturingScreenshot] = (0, react_1.useState)(false);
+    const [captureError, setCaptureError] = (0, react_1.useState)('');
+    const submittingRef = (0, react_1.useRef)(false);
+    const [position, setPosition] = (0, react_1.useState)({ left: 12, top: 12, width: 480, maxHeight: 600 });
+    const dialogRef = (0, react_1.useRef)(null);
+    const screenshotPreviewRef = (0, react_1.useRef)(null);
+    const savingOverlayRef = (0, react_1.useRef)(null);
+    const dismissRef = (0, react_1.useRef)(() => undefined);
+    const wasOpenRef = (0, react_1.useRef)(false);
+    const isOpen = flow.step !== 'closed';
+    const dismiss = () => {
+        if (flow.step !== 'success' && flow.step !== 'closed' && flow.submission) {
+            void onDismiss?.(flow.submission, flow.step, flow.completed)
+                ?.catch((error) => console.error('Feedback draft could not be saved on dismiss', error));
+        }
+        flow.close();
+    };
+    dismissRef.current = dismiss;
+    const isGapFirstFlow = flow.rating !== null && (flow.completed ? flow.ratingBase < 4 : flow.rating < 4);
+    const isReview = flow.completed && isOpen && flow.step !== 'success';
+    const isLowRatingGap = flow.step === 'gap' && flow.ratingBase <= 3 && !isReview;
+    const showLowRatingIntro = isLowRatingGap && !introDismissed;
+    const showPositiveRatingIntro = flow.step === 'time' && flow.ratingBase >= 4 && !isReview && !showUseful && !introDismissed;
+    const reviewPages = flow.ratingBase >= 4
+        ? [...(flow.ratingBase === 4 ? ['rating'] : []), 'time', 'gap']
+        : [...(flow.ratingBase === 3 ? ['rating'] : []), 'gap', 'useful'];
+    const reviewPage = reviewPages[reviewPageIndex];
+    const canContinueReview = reviewPage === 'gap'
+        ? flow.gaps.every((gap) => Boolean(gap.description.trim()) && Boolean(gap.severity))
+        : reviewPage === 'useful' || reviewPage === 'time'
+            ? Boolean(flow.mostUseful.trim()) &&
+                (reviewPage !== 'useful' || flow.timeSavedMinutes !== undefined)
+            : true;
+    (0, react_1.useEffect)(() => {
+        setCustomTime(false);
+        setIntroDismissed(false);
+        setShowUseful(false);
+        setShowLowRatingTime(false);
+        setRevealedGapCount(0);
+        setActiveGapIndex(0);
+        setReviewPageIndex(0);
+        setSubmitError(false);
+    }, [flow.requestId, flow.featureId, flow.rating]);
+    (0, react_1.useEffect)(() => {
+        if (isOpen && !wasOpenRef.current) {
+            setShowUseful((flow.rating ?? 0) >= 4 && flow.timeSavedMinutes !== undefined);
+            setShowLowRatingTime((flow.rating ?? 0) < 4 && flow.timeSavedMinutes !== undefined);
+            const firstShortGap = flow.gaps.findIndex((gap) => !gap.description.trim() || (wordCount(gap.description) < copy.usefulMinimumWords && !gap.detailRequested));
+            setRevealedGapCount(firstShortGap < 0 ? flow.gaps.length : firstShortGap);
+            setReviewPageIndex(0);
+        }
+        wasOpenRef.current = isOpen;
+    }, [isOpen]);
+    (0, react_1.useEffect)(() => {
+        if (!isReview || !reviewPage)
+            return;
+        const step = reviewPage === 'time' && isGapFirstFlow ? 'useful' : reviewPage;
+        if (flow.step !== step)
+            flow.setStep(step);
+        setShowUseful(reviewPage === 'time' && !isGapFirstFlow);
+        setShowLowRatingTime(reviewPage === 'useful' && isGapFirstFlow);
+        if (reviewPage === 'gap')
+            setRevealedGapCount(flow.gaps.length);
+        if (reviewPage === 'time')
+            setCustomTime(flow.timeSavedMinutes !== undefined && !copy.timeOptions.some((option) => option.value === flow.timeSavedMinutes));
+    }, [isReview, reviewPageIndex, reviewPages.join('|')]);
+    (0, react_1.useEffect)(() => {
+        if (isReview)
+            setReviewPageIndex(0);
+    }, [flow.ratingBase]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (!isOpen)
+            return;
+        const updatePosition = () => {
+            const rect = anchorRef?.current?.getBoundingClientRect();
+            if (!rect)
+                return;
+            const panel = overlayHostRef?.current?.getBoundingClientRect() ?? anchorRef?.current
+                ?.closest('[data-feedback-chat-panel]')?.getBoundingClientRect();
+            const boundsTop = Math.max(0, panel?.top ?? 0);
+            const boundsBottom = Math.min(window.innerHeight, panel?.bottom ?? window.innerHeight);
+            const preferredWidth = flow.step === 'gap'
+                ? isLowRatingGap && flow.gaps.length === 1 && revealedGapCount === 0 ? 520 : 600
+                : flow.step === 'success' ? 620 : flow.step === 'time' ? 440 : 540;
+            const width = Math.min(preferredWidth, window.innerWidth - 24);
+            const above = Math.max(0, rect.top - boundsTop - 24);
+            const below = Math.max(0, boundsBottom - rect.bottom - 24);
+            const placeAbove = above >= below;
+            const placementMaxHeight = Math.max(80, placeAbove ? above : below);
+            const dialogHeight = Math.min(dialogRef.current?.scrollHeight ?? 340, placementMaxHeight);
+            const top = placeAbove
+                ? Math.max(boundsTop + 12, rect.top - dialogHeight - 12)
+                : Math.min(boundsBottom - dialogHeight - 12, rect.bottom + 12);
+            // Keep the dialog visually attached to the rating card that opened it.
+            // Clamp to the viewport, not the chat panel, so narrow panels can still show it fully.
+            const left = Math.max(12, Math.min(window.innerWidth - width - 12, rect.right - width));
+            setPosition((previous) => previous.left === left && previous.top === top && previous.width === width && previous.maxHeight === placementMaxHeight
+                ? previous
+                : { left, top, width, maxHeight: placementMaxHeight });
+        };
+        updatePosition();
+        window.addEventListener('resize', updatePosition);
+        window.addEventListener('scroll', updatePosition, true);
+        const panel = overlayHostRef?.current ?? anchorRef?.current?.closest('[data-feedback-chat-panel]');
+        const resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(updatePosition) : null;
+        if (panel)
+            resizeObserver?.observe(panel);
+        if (dialogRef.current)
+            resizeObserver?.observe(dialogRef.current);
+        if (anchorRef?.current)
+            resizeObserver?.observe(anchorRef?.current);
+        return () => {
+            window.removeEventListener('resize', updatePosition);
+            window.removeEventListener('scroll', updatePosition, true);
+            resizeObserver?.disconnect();
+        };
+    }, [anchorRef, overlayHostRef, anchorKey, isOpen, flow.step, flow.gaps.length, revealedGapCount, showLowRatingTime, showUseful, isLowRatingGap, showPositiveRatingIntro]);
+    (0, react_1.useEffect)(() => {
+        if (!isOpen)
+            return;
+        const onKeyDown = (event) => {
+            if (event.key !== 'Escape' || isSubmitting || saving || capturingScreenshot)
+                return;
+            if (screenshotPreview) {
+                event.preventDefault();
+                setScreenshotPreview(null);
+            }
+            else
+                dismissRef.current();
+        };
+        window.addEventListener('keydown', onKeyDown);
+        dialogRef.current?.focus();
+        return () => window.removeEventListener('keydown', onKeyDown);
+    }, [isOpen, flow.setStep, isSubmitting, saving, screenshotPreview, capturingScreenshot]);
+    (0, react_1.useEffect)(() => {
+        if (screenshotPreview)
+            screenshotPreviewRef.current?.focus();
+    }, [screenshotPreview]);
+    (0, react_1.useEffect)(() => {
+        if (isSubmitting || saving)
+            savingOverlayRef.current?.focus();
+    }, [isSubmitting, saving]);
+    if (!isOpen)
+        return null;
+    const busy = isSubmitting || saving;
+    const ratingBase = flow.ratingBase;
+    const decimalRatings = Array.from({ length: 6 }, (_, index) => Number((ratingBase + index * 0.2).toFixed(1)));
+    const updateGap = (index, patch) => {
+        flow.setGaps(flow.gaps.map((gap, gapIndex) => (gapIndex === index ? { ...gap, ...patch } : gap)));
+    };
+    const removeGap = (index) => {
+        if (flow.gaps.length < 2)
+            return;
+        flow.setGaps(flow.gaps.filter((_, gapIndex) => gapIndex !== index));
+        setRevealedGapCount((count) => Math.min(flow.gaps.length - 1, count - (index < count ? 1 : 0)));
+        setActiveGapIndex((current) => current === index
+            ? Math.max(0, Math.min(index, flow.gaps.length - 2))
+            : current > index ? current - 1 : current);
+    };
+    const canAdvanceGap = revealedGapCount >= flow.gaps.length && flow.gaps.every((gap) => Boolean(gap.severity) && Boolean(gap.description.trim()) &&
+        (wordCount(gap.description) >= copy.usefulMinimumWords || gap.detailRequested));
+    const persistAndAdvance = (nextStep, advance, submission = flow.submission) => {
+        if (!submission || submittingRef.current)
+            return;
+        setSubmitError(false);
+        advance();
+        // Progress saves are serialized by useFeedbackPersistence. Navigation must not
+        // wait for the network; the final submit waits for every queued save.
+        void Promise.resolve()
+            .then(() => onProgress?.(submission, nextStep))
+            .catch((error) => {
+            console.error('Feedback progress could not be saved', error);
+        });
+    };
+    const submitFeedback = async () => {
+        if (!flow.submission || submittingRef.current)
+            return;
+        if (!flow.mostUseful.trim() ||
+            (wordCount(flow.mostUseful) < copy.usefulMinimumWords && !flow.usefulDetailShown) ||
+            flow.gaps.some((gap) => !gap.description.trim() ||
+                (wordCount(gap.description) < copy.usefulMinimumWords && !gap.detailRequested)) ||
+            flow.timeSavedMinutes === undefined)
+            return;
+        submittingRef.current = true;
+        setIsSubmitting(true);
+        try {
+            setSubmitError(false);
+            await onSubmit?.(flow.submission);
+            flow.setCompleted(true);
+            flow.setStep('success');
+        }
+        catch (error) {
+            console.error('Feedback submission failed', error);
+            setSubmitError(true);
+        }
+        finally {
+            submittingRef.current = false;
+            setIsSubmitting(false);
+        }
+    };
+    const nextReviewPage = () => {
+        if (!canContinueReview)
+            return;
+        if (reviewPage === 'gap') {
+            const gaps = flow.gaps.map((gap) => wordCount(gap.description) < copy.usefulMinimumWords
+                ? { ...gap, detailRequested: true } : gap);
+            if (gaps.some((gap, index) => gap.detailRequested && !flow.gaps[index].detailRequested)) {
+                flow.setGaps(gaps);
+                return;
+            }
+        }
+        else if ((reviewPage === 'useful' || reviewPage === 'time') &&
+            wordCount(flow.mostUseful) < copy.usefulMinimumWords && !flow.usefulDetailShown) {
+            flow.setUsefulDetailShown(true);
+            return;
+        }
+        if (reviewPageIndex < reviewPages.length - 1) {
+            const nextPage = reviewPages[reviewPageIndex + 1];
+            void persistAndAdvance(nextPage, () => setReviewPageIndex(reviewPageIndex + 1));
+        }
+        else
+            void submitFeedback();
+    };
+    const previousReviewPage = () => {
+        if (reviewPageIndex > 0)
+            setReviewPageIndex(reviewPageIndex - 1);
+    };
+    const continueUseful = () => {
+        if (!flow.mostUseful.trim())
+            return;
+        if (wordCount(flow.mostUseful) < copy.usefulMinimumWords && !flow.usefulDetailShown) {
+            flow.setUsefulDetailShown(true);
+            return;
+        }
+        if (isReview) {
+            nextReviewPage();
+            return;
+        }
+        if (flow.timeSavedMinutes !== undefined)
+            void submitFeedback();
+    };
+    const continueTime = () => {
+        if (showUseful && !flow.mostUseful.trim())
+            return;
+        if (showUseful && wordCount(flow.mostUseful) < copy.usefulMinimumWords && !flow.usefulDetailShown) {
+            flow.setUsefulDetailShown(true);
+            return;
+        }
+        if (isReview) {
+            nextReviewPage();
+            return;
+        }
+        if (flow.timeSavedMinutes === undefined)
+            return;
+        if (showUseful) {
+            void persistAndAdvance('gap', () => flow.setStep('gap'));
+        }
+        else
+            void persistAndAdvance('time', () => setShowUseful(true));
+    };
+    const selectDecimalRating = (rating) => {
+        flow.setRating(rating);
+        const nextStep = rating < 4 ? 'gap' : 'time';
+        void persistAndAdvance(nextStep, () => flow.setStep(nextStep), {
+            requestId: flow.requestId,
+            featureId: flow.featureId,
+            rating,
+            gaps: [],
+            metadata: flow.submission?.metadata,
+        });
+    };
+    const selectTimeSaved = (minutes) => {
+        flow.setTimeSavedMinutes(minutes);
+        if (!flow.submission)
+            return;
+        void persistAndAdvance(isGapFirstFlow ? 'useful' : 'time', () => {
+            if (isGapFirstFlow)
+                setShowLowRatingTime(true);
+            else
+                setShowUseful(true);
+        }, { ...flow.submission, timeSavedMinutes: minutes });
+    };
+    const returnToRating = () => {
+        flow.setTimeSavedMinutes(undefined);
+        flow.setMostUseful('');
+        flow.setUsefulMoreDetail('');
+        flow.setUsefulDetailShown(false);
+        flow.setGaps([{ description: '', screenshots: [] }]);
+        setShowUseful(false);
+        setShowLowRatingTime(false);
+        setCustomTime(false);
+        setRevealedGapCount(0);
+        setActiveGapIndex(0);
+        flow.setStep('rating');
+    };
+    const back = () => {
+        if (flow.step === 'time') {
+            returnToRating();
+        }
+        else if (flow.step === 'gap') {
+            if (flow.rating !== null && flow.rating < 4)
+                returnToRating();
+            else {
+                setShowUseful(true);
+                flow.setStep('time');
+            }
+        }
+        else if (flow.step === 'useful' && isGapFirstFlow) {
+            if (showLowRatingTime)
+                setShowLowRatingTime(false);
+            else
+                flow.setStep('gap');
+        }
+    };
+    const captureTabScreenshot = async (gapIndex) => {
+        if (!navigator.mediaDevices?.getDisplayMedia) {
+            setCaptureError('Tab capture is not supported in this browser. Please attach a screenshot instead.');
+            return;
+        }
+        let stream;
+        let video;
+        try {
+            setCaptureError('');
+            // Call from the click itself: browsers require a user gesture for display capture.
+            const capturePromise = navigator.mediaDevices.getDisplayMedia({
+                video: { displaySurface: 'browser' },
+                audio: false,
+                preferCurrentTab: true,
+            });
+            (0, react_dom_1.flushSync)(() => setCapturingScreenshot(true));
+            document.body.classList.add('cw-feedback-capturing');
+            stream = await capturePromise;
+            const track = stream.getVideoTracks()[0];
+            const displaySurface = track?.getSettings().displaySurface;
+            if (!track || (displaySurface && displaySurface !== 'browser')) {
+                throw new Error('Please select a browser tab to capture.');
+            }
+            video = document.createElement('video');
+            video.srcObject = stream;
+            video.muted = true;
+            await video.play();
+            await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
+            const canvas = document.createElement('canvas');
+            canvas.width = video.videoWidth || track.getSettings().width || 0;
+            canvas.height = video.videoHeight || track.getSettings().height || 0;
+            if (!canvas.width || !canvas.height)
+                throw new Error('The selected tab did not provide a video frame.');
+            const context = canvas.getContext('2d');
+            if (!context)
+                throw new Error('Could not capture the selected tab.');
+            context.drawImage(video, 0, 0);
+            const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));
+            if (!blob)
+                throw new Error('Could not create the screenshot.');
+            const file = new File([blob], `feedback-screenshot-${Date.now()}.png`, { type: 'image/png' });
+            flow.setGaps((gaps) => gaps.map((gap, index) => index === gapIndex ? { ...gap, screenshots: [...gap.screenshots, file] } : gap));
+        }
+        catch (error) {
+            if (error instanceof Error && error.name !== 'NotAllowedError' && error.name !== 'AbortError') {
+                setCaptureError(error.message);
+            }
+        }
+        finally {
+            stream?.getTracks().forEach((track) => track.stop());
+            if (video)
+                video.srcObject = null;
+            document.body.classList.remove('cw-feedback-capturing');
+            setCapturingScreenshot(false);
+        }
+    };
+    const backdrop = ((0, jsx_runtime_1.jsx)("div", { onMouseDown: (event) => !busy && event.target === event.currentTarget && dismiss(), className: ['cw-feedback-backdrop', backdropClassName, classNames?.backdrop].filter(Boolean).join(' '), style: {
+            background: mergedTheme.overlay ?? '#11182755',
+            visibility: capturingScreenshot ? 'hidden' : undefined,
+            ...backdropStyle,
+            ...styles?.backdrop,
+        } }));
+    const dialog = ((0, jsx_runtime_1.jsxs)("div", { ref: dialogRef, style: {
+            ...position,
+            ...(0, feedbackTheme_1.feedbackThemeStyle)(theme),
+            visibility: capturingScreenshot ? 'hidden' : undefined,
+            ...style,
+            ...dialogStyle,
+            ...styles?.dialog,
+        }, className: [
+            'cw-feedback-dialog',
+            flow.step === 'gap' ? 'cw-feedback-dialog--wide' : '',
+            isLowRatingGap && flow.gaps.length === 1 && revealedGapCount === 0 ? 'cw-feedback-dialog--low-intro' : '',
+            flow.step === 'gap' && canAdvanceGap ? 'cw-feedback-dialog--has-action' : '',
+            flow.step === 'success' ? 'cw-feedback-dialog--success' : '',
+            className,
+            dialogClassName,
+            classNames?.dialog,
+        ]
+            .filter(Boolean)
+            .join(' '), role: "dialog", "aria-modal": "true", "aria-busy": busy, tabIndex: -1, onKeyDown: (event) => {
+            if (busy) {
+                event.preventDefault();
+                return;
+            }
+            if (event.target instanceof HTMLButtonElement)
+                return;
+            if (isReview && event.key === 'Enter' && !(event.target instanceof HTMLTextAreaElement) && !(event.target instanceof HTMLInputElement && event.target.type === 'number')) {
+                event.preventDefault();
+                nextReviewPage();
+                return;
+            }
+            if (event.key === 'Enter' && flow.step === 'rating' && flow.rating !== null) {
+                event.preventDefault();
+                selectDecimalRating(flow.rating);
+            }
+            if (event.key === 'Enter' &&
+                flow.step === 'time' &&
+                flow.timeSavedMinutes !== undefined &&
+                !showUseful &&
+                event.target instanceof HTMLElement &&
+                event.target.tagName !== 'TEXTAREA' &&
+                !(event.target instanceof HTMLInputElement && event.target.type === 'number')) {
+                event.preventDefault();
+                continueTime();
+            }
+            if (event.key === 'Enter' &&
+                flow.step === 'useful' &&
+                showLowRatingTime &&
+                flow.timeSavedMinutes !== undefined &&
+                event.target instanceof HTMLElement &&
+                event.target.tagName !== 'TEXTAREA') {
+                event.preventDefault();
+                continueUseful();
+            }
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { className: ['cw-feedback-dialog__content', classNames?.content].filter(Boolean).join(' '), style: styles?.content, children: [!isReview &&
+                        ((flow.step === 'time' && flow.ratingBase === 4) ||
+                            (flow.step === 'gap' && flow.rating !== null && flow.rating > 2) ||
+                            (flow.step === 'useful' && isGapFirstFlow) ||
+                            flow.step === 'success') && ((0, jsx_runtime_1.jsxs)("div", { className: ['cw-feedback-dialog__topbar', classNames?.topbar].filter(Boolean).join(' '), style: styles?.topbar, children: [flow.step === 'time' || flow.step === 'gap' || flow.step === 'useful' ? ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: back, "aria-label": copy.backLabel, className: classNames?.backButton, style: styles?.backButton, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { size: 19 }) })) : ((0, jsx_runtime_1.jsx)("span", {})), flow.step === 'success' && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: flow.close, "aria-label": copy.closeLabel, className: classNames?.closeButton, style: styles?.closeButton, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 19 }) }))] })), flow.step === 'rating' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: classNames?.title, style: styles?.title, children: copy.ratingTitle }), (0, jsx_runtime_1.jsxs)("p", { className: ['cw-feedback-subtitle', classNames?.subtitle].filter(Boolean).join(' '), style: styles?.subtitle, children: ["\u2728 ", copy.ratingSubtitle] }), (0, jsx_runtime_1.jsxs)("div", { className: ['cw-feedback-range', classNames?.rangeContainer].filter(Boolean).join(' '), style: styles?.rangeContainer, children: [flow.rating !== null && ((0, jsx_runtime_1.jsx)("div", { className: ['cw-feedback-range-tooltip', classNames?.rangeTooltip].filter(Boolean).join(' '), style: {
+                                            left: `clamp(150px, ${(flow.rating - ratingBase) * 100}%, calc(100% - 150px))`,
+                                            ...styles?.rangeTooltip,
+                                        }, children: copy.ratingValueLabel(flow.rating) })), (0, jsx_runtime_1.jsx)("input", { "aria-label": copy.ratingControlLabel, type: "range", min: ratingBase, max: ratingBase + 1, step: "0.1", value: flow.rating ?? ratingBase, className: classNames?.rangeInput, style: styles?.rangeInput, onChange: (e) => (isReview ? flow.setReviewRating : flow.setRating)(Number(e.target.value)), onPointerUp: (event) => selectDecimalRating(Number(event.currentTarget.value)), onKeyUp: (event) => {
+                                            if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
+                                                selectDecimalRating(Number(event.currentTarget.value));
+                                            }
+                                        }, onKeyDown: (event) => {
+                                            if (event.key === 'Enter') {
+                                                event.preventDefault();
+                                                event.stopPropagation();
+                                                selectDecimalRating(Number(event.currentTarget.value));
+                                            }
+                                        } })] }), (0, jsx_runtime_1.jsx)("div", { className: ['cw-feedback-rating-options', classNames?.ratingOptionsContainer].filter(Boolean).join(' '), style: styles?.ratingOptionsContainer, children: decimalRatings.map((value) => {
+                                    const isSelected = flow.rating === value;
+                                    return ((0, jsx_runtime_1.jsx)("button", { type: "button", className: [
+                                            isSelected ? 'is-selected' : '',
+                                            classNames?.ratingOptionButton,
+                                            isSelected ? classNames?.ratingOptionButtonSelected : '',
+                                        ]
+                                            .filter(Boolean)
+                                            .join(' '), style: {
+                                            ...styles?.ratingOptionButton,
+                                            ...(isSelected ? styles?.ratingOptionButtonSelected : {}),
+                                        }, onClick: () => selectDecimalRating(value), children: value.toFixed(1) }, value));
+                                }) }), (0, jsx_runtime_1.jsx)("p", { className: ['cw-feedback-hint', classNames?.hint].filter(Boolean).join(' '), style: styles?.hint, children: copy.ratingHint }), slots?.rating] })), flow.step === 'time' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showPositiveRatingIntro && ((0, jsx_runtime_1.jsxs)("div", { className: "cw-feedback-low-rating-intro", children: [(0, jsx_runtime_1.jsx)("div", { className: "cw-feedback-low-rating-intro__emoji", "aria-hidden": "true", children: "\uD83D\uDE0A\uD83E\uDD73" }), (0, jsx_runtime_1.jsx)("strong", { children: copy.positiveRatingIntroTitle }), (0, jsx_runtime_1.jsx)("p", { children: copy.positiveRatingIntroDescription })] })), (0, jsx_runtime_1.jsx)("h2", { className: classNames?.title, style: styles?.title, children: copy.timeSavedTitle }), (0, jsx_runtime_1.jsxs)("div", { className: ['cw-feedback-pills', 'cw-feedback-time-options', classNames?.timePillsContainer].filter(Boolean).join(' '), style: styles?.timePillsContainer, children: [copy.timeOptions.map(({ value, label }) => {
+                                        const isSelected = flow.timeSavedMinutes === value && !customTime;
+                                        return ((0, jsx_runtime_1.jsx)("button", { className: [
+                                                isSelected ? 'is-selected' : '',
+                                                classNames?.timePillButton,
+                                                isSelected ? classNames?.timePillButtonSelected : '',
+                                            ]
+                                                .filter(Boolean)
+                                                .join(' '), style: {
+                                                ...styles?.timePillButton,
+                                                ...(isSelected ? styles?.timePillButtonSelected : {}),
+                                            }, type: "button", onClick: () => {
+                                                setIntroDismissed(true);
+                                                setCustomTime(false);
+                                                selectTimeSaved(value);
+                                            }, children: label }, value));
+                                    }), (0, jsx_runtime_1.jsx)("button", { className: [
+                                            customTime ? 'is-selected' : '',
+                                            classNames?.timePillButton,
+                                            customTime ? classNames?.timePillButtonSelected : '',
+                                        ]
+                                            .filter(Boolean)
+                                            .join(' '), style: {
+                                            ...styles?.timePillButton,
+                                            ...(customTime ? styles?.timePillButtonSelected : {}),
+                                        }, type: "button", onClick: () => { setIntroDismissed(true); setCustomTime(true); }, children: copy.otherLabel }), customTime && ((0, jsx_runtime_1.jsxs)("label", { className: ['cw-feedback-number', 'cw-feedback-time-custom', classNames?.customTimeWrapper].filter(Boolean).join(' '), style: styles?.customTimeWrapper, children: [(0, jsx_runtime_1.jsx)("input", { autoFocus: true, type: "number", min: "0", value: flow.timeSavedMinutes ?? '', className: classNames?.customTimeInput, style: styles?.customTimeInput, onChange: (e) => flow.setTimeSavedMinutes(Number(e.target.value)), onKeyDown: (event) => {
+                                                    if (event.key !== 'Enter' || flow.timeSavedMinutes === undefined)
+                                                        return;
+                                                    event.preventDefault();
+                                                    event.stopPropagation();
+                                                    selectTimeSaved(flow.timeSavedMinutes);
+                                                } }), ' ', copy.minuteUnit] }))] }), !showUseful && flow.timeSavedMinutes === undefined && ((0, jsx_runtime_1.jsx)("p", { className: "cw-feedback-time-hint", children: copy.enterHint })), showUseful && ((0, jsx_runtime_1.jsxs)("label", { className: ['cw-feedback-field', classNames?.usefulField].filter(Boolean).join(' '), style: styles?.usefulField, children: [(0, jsx_runtime_1.jsx)("span", { children: copy.usefulTitle }), flow.usefulDetailShown && wordCount(flow.mostUseful) < copy.usefulMinimumWords && ((0, jsx_runtime_1.jsxs)("span", { className: "cw-feedback-inline-detail-prompt", children: ["*", copy.usefulMoreDetailPrompt] })), (0, jsx_runtime_1.jsx)("textarea", { autoFocus: true, value: flow.mostUseful, className: classNames?.usefulTextarea, style: styles?.usefulTextarea, onChange: (e) => flow.setMostUseful(e.target.value), placeholder: copy.usefulPlaceholder, onKeyDown: (e) => {
+                                            if (e.key === 'Enter' && !e.shiftKey && flow.mostUseful.trim()) {
+                                                e.preventDefault();
+                                                if (isReview)
+                                                    nextReviewPage();
+                                                else
+                                                    continueTime();
+                                            }
+                                        } })] })), !isReview && flow.timeSavedMinutes !== undefined &&
+                                (!showUseful || !flow.usefulDetailShown || Boolean(flow.mostUseful.trim())) && ((0, jsx_runtime_1.jsx)("div", { className: ['cw-feedback-footer', classNames?.footer].filter(Boolean).join(' '), style: styles?.footer, children: (0, jsx_runtime_1.jsx)("button", { className: ['cw-feedback-hint-action', classNames?.enterHintButton].filter(Boolean).join(' '), style: styles?.enterHintButton, type: "button", onClick: continueTime, children: copy.enterHint }) })), slots?.time] })), flow.step === 'useful' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: ['cw-feedback-time-title', classNames?.title].filter(Boolean).join(' '), style: styles?.title, children: copy.timeSavedTitle }), (0, jsx_runtime_1.jsxs)("div", { className: ['cw-feedback-pills', classNames?.timePillsContainer].filter(Boolean).join(' '), style: styles?.timePillsContainer, children: [copy.timeOptions.map(({ value, label }) => {
+                                        const isSelected = flow.timeSavedMinutes === value && !customTime;
+                                        return ((0, jsx_runtime_1.jsx)("button", { className: [
+                                                isSelected ? 'is-selected' : '',
+                                                classNames?.timePillButton,
+                                                isSelected ? classNames?.timePillButtonSelected : '',
+                                            ]
+                                                .filter(Boolean)
+                                                .join(' '), style: {
+                                                ...styles?.timePillButton,
+                                                ...(isSelected ? styles?.timePillButtonSelected : {}),
+                                            }, type: "button", onClick: () => {
+                                                setCustomTime(false);
+                                                selectTimeSaved(value);
+                                            }, children: label }, value));
+                                    }), (0, jsx_runtime_1.jsx)("button", { className: [
+                                            customTime ? 'is-selected' : '',
+                                            classNames?.timePillButton,
+                                            customTime ? classNames?.timePillButtonSelected : '',
+                                        ]
+                                            .filter(Boolean)
+                                            .join(' '), style: {
+                                            ...styles?.timePillButton,
+                                            ...(customTime ? styles?.timePillButtonSelected : {}),
+                                        }, type: "button", onClick: () => setCustomTime(true), children: copy.otherLabel })] }), customTime && ((0, jsx_runtime_1.jsxs)("label", { className: ['cw-feedback-number', classNames?.customTimeWrapper].filter(Boolean).join(' '), style: styles?.customTimeWrapper, children: [(0, jsx_runtime_1.jsx)("input", { autoFocus: true, type: "number", min: "0", value: flow.timeSavedMinutes ?? '', className: classNames?.customTimeInput, style: styles?.customTimeInput, onChange: (event) => flow.setTimeSavedMinutes(Number(event.target.value)), onKeyDown: (event) => {
+                                            if (event.key !== 'Enter' || flow.timeSavedMinutes === undefined)
+                                                return;
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            selectTimeSaved(flow.timeSavedMinutes);
+                                        } }), ' ', copy.minuteUnit] })), showLowRatingTime && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: ['cw-feedback-useful-title', classNames?.title, classNames?.usefulTitle].filter(Boolean).join(' '), style: { ...styles?.title, ...styles?.usefulTitle }, children: copy.lowRatingUsefulTitle }), flow.usefulDetailShown && wordCount(flow.mostUseful) < copy.usefulMinimumWords && ((0, jsx_runtime_1.jsxs)("p", { className: ['cw-feedback-useful-prompt', classNames?.usefulPrompt].filter(Boolean).join(' '), style: styles?.usefulPrompt, children: ["*", copy.usefulMoreDetailPrompt] })), (0, jsx_runtime_1.jsx)("label", { className: ['cw-feedback-field', 'cw-feedback-useful-field', classNames?.usefulField].filter(Boolean).join(' '), style: styles?.usefulField, children: (0, jsx_runtime_1.jsx)("textarea", { autoFocus: true, value: flow.mostUseful, className: classNames?.usefulTextarea, style: styles?.usefulTextarea, onChange: (event) => flow.setMostUseful(event.target.value), placeholder: copy.usefulPlaceholder, onKeyDown: (event) => {
+                                                if (event.key !== 'Enter' || event.shiftKey)
+                                                    return;
+                                                event.preventDefault();
+                                                continueUseful();
+                                            } }) })] }))] })), flow.step === 'gap' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showLowRatingIntro && ((0, jsx_runtime_1.jsxs)("div", { className: "cw-feedback-low-rating-intro", children: [(0, jsx_runtime_1.jsx)("div", { className: "cw-feedback-low-rating-intro__emoji", "aria-hidden": "true", children: "\uD83D\uDE14\uD83E\uDD7A" }), (0, jsx_runtime_1.jsx)("strong", { children: copy.lowRatingIntroTitle }), (0, jsx_runtime_1.jsx)("p", { children: copy.lowRatingIntroDescription })] })), (0, jsx_runtime_1.jsx)("h2", { className: classNames?.title, style: styles?.title, children: flow.rating === 5 ? copy.fiveStarGapTitle : copy.gapTitle }), copy.gapSubtitle && (!isLowRatingGap || (flow.gaps.length === 1 && flow.gaps[0].detailRequested)) && ((0, jsx_runtime_1.jsx)("p", { className: [
+                                    flow.gaps.length === 1 && flow.gaps[0].detailRequested && wordCount(flow.gaps[0].description) < copy.usefulMinimumWords
+                                        ? 'cw-feedback-inline-detail-prompt' : 'cw-feedback-subtitle',
+                                    classNames?.subtitle,
+                                ].filter(Boolean).join(' '), style: styles?.subtitle, children: flow.gaps.length === 1 && flow.gaps[0].detailRequested && wordCount(flow.gaps[0].description) < copy.usefulMinimumWords
+                                    ? `*${copy.gapMoreDetailPrompt}`
+                                    : `✨ ${copy.gapSubtitle}` })), (0, jsx_runtime_1.jsx)("div", { className: ['cw-feedback-gap-list', classNames?.gapList].filter(Boolean).join(' '), style: styles?.gapList, children: flow.gaps.map((gap, index) => ((0, jsx_runtime_1.jsxs)("section", { className: ['cw-feedback-gap', flow.gaps.length >= 2 && index !== activeGapIndex ? 'cw-feedback-gap--collapsed' : '', classNames?.gapItem].filter(Boolean).join(' '), style: styles?.gapItem, children: [flow.gaps.length >= 2 && ((0, jsx_runtime_1.jsxs)("div", { className: "cw-feedback-gap__header", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "cw-feedback-gap__toggle", onClick: () => setActiveGapIndex(index), "aria-expanded": index === activeGapIndex, children: ["Gap ", index + 1, gap.severity && (0, jsx_runtime_1.jsx)("span", { className: `cw-feedback-gap__severity ${gap.severity}`, children: copy.severityLabels[gap.severity] }), index !== activeGapIndex && ((0, jsx_runtime_1.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "m6 9 6 6 6-6" }) }))] }), index === activeGapIndex && (0, jsx_runtime_1.jsx)("button", { type: "button", className: "cw-feedback-gap__remove", onClick: () => removeGap(index), "aria-label": `Delete gap ${index + 1}`, title: `Delete gap ${index + 1}`, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, "aria-hidden": "true" }) })] })), (flow.gaps.length < 2 || index === activeGapIndex) && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [flow.gaps.length >= 2 && gap.detailRequested && wordCount(gap.description) < copy.usefulMinimumWords && ((0, jsx_runtime_1.jsxs)("p", { className: "cw-feedback-inline-detail-prompt cw-feedback-gap__detail-prompt", children: ["*", copy.gapMoreDetailPrompt] })), (0, jsx_runtime_1.jsx)("textarea", { autoFocus: index === 0 && !isLowRatingGap, value: gap.description, className: classNames?.gapTextarea, style: styles?.gapTextarea, onFocus: () => { if (isLowRatingGap)
+                                                        setIntroDismissed(true); }, onChange: (e) => updateGap(index, { description: e.target.value }), onKeyDown: (event) => {
+                                                        if (event.key === 'Enter' && !event.shiftKey && gap.description.trim()) {
+                                                            event.preventDefault();
+                                                            if (wordCount(gap.description) < copy.usefulMinimumWords && !gap.detailRequested) {
+                                                                updateGap(index, { detailRequested: true });
+                                                                return;
+                                                            }
+                                                            setRevealedGapCount(Math.max(revealedGapCount, index + 1));
+                                                        }
+                                                    }, placeholder: copy.gapPlaceholder }), index < revealedGapCount && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("strong", { className: classNames?.severityTitle, style: styles?.severityTitle, children: copy.severityQuestion }), (0, jsx_runtime_1.jsx)("div", { className: ['cw-feedback-severity', classNames?.severityContainer].filter(Boolean).join(' '), style: styles?.severityContainer, children: severities.map((severity) => {
+                                                                const isSelected = gap.severity === severity;
+                                                                return ((0, jsx_runtime_1.jsx)("button", { type: "button", className: [severity, isSelected ? 'is-selected' : '', classNames?.severityButton]
+                                                                        .filter(Boolean)
+                                                                        .join(' '), style: {
+                                                                        color: mergedTheme.severityColors?.[severity],
+                                                                        '--cw-feedback-severity-color': mergedTheme.severityColors?.[severity],
+                                                                        ...(isSelected
+                                                                            ? {
+                                                                                ...(mergedTheme.severityBackgrounds?.[severity]
+                                                                                    ? { backgroundColor: mergedTheme.severityBackgrounds[severity] }
+                                                                                    : {}),
+                                                                            }
+                                                                            : {}),
+                                                                        ...styles?.severityButton,
+                                                                    }, onClick: () => {
+                                                                        const gaps = flow.gaps.map((item, gapIndex) => gapIndex === index ? { ...item, severity } : item);
+                                                                        flow.setGaps(gaps);
+                                                                        if (flow.submission) {
+                                                                            void persistAndAdvance('gap', () => undefined, {
+                                                                                ...flow.submission,
+                                                                                gaps: gaps.filter((item) => item.description.trim() || item.screenshots.length),
+                                                                            });
+                                                                        }
+                                                                    }, children: copy.severityLabels[severity] }, severity));
+                                                            }) }), (0, jsx_runtime_1.jsxs)("div", { className: "cw-feedback-capture-actions", children: [(0, jsx_runtime_1.jsxs)("label", { className: ['cw-feedback-upload', classNames?.uploadButton].filter(Boolean).join(' '), style: styles?.uploadButton, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Paperclip, { size: 18 }), " ", copy.attachScreenshot, (0, jsx_runtime_1.jsx)("input", { type: "file", accept: "image/*", multiple: true, className: classNames?.uploadInput, style: styles?.uploadInput, onChange: (e) => {
+                                                                                const files = Array.from(e.target.files ?? []);
+                                                                                if (files.length)
+                                                                                    updateGap(index, { screenshots: [...gap.screenshots, ...files] });
+                                                                                e.target.value = '';
+                                                                            } })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "cw-feedback-upload", onClick: () => void captureTabScreenshot(index), children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: "\u25A3" }), " Take a screenshot"] })] }), captureError && (0, jsx_runtime_1.jsx)("p", { className: "cw-feedback-capture-error", role: "alert", children: captureError }), gap.screenshots.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: ['cw-feedback-files', classNames?.filesList].filter(Boolean).join(' '), style: styles?.filesList, children: gap.screenshots.map((file, fileIndex) => ((0, jsx_runtime_1.jsx)("div", { className: classNames?.fileTag, style: styles?.fileTag, children: (0, jsx_runtime_1.jsx)(FeedbackScreenshotThumbnail_1.FeedbackScreenshotThumbnail, { screenshot: file, resolveUrl: resolveScreenshotUrl, onOpen: (url, name) => setScreenshotPreview({ url, name }), onRemove: () => updateGap(index, { screenshots: gap.screenshots.filter((_, screenshotIndex) => screenshotIndex !== fileIndex) }) }) }, `${file.name}-${file.lastModified}-${fileIndex}`))) }))] }))] })] }, index))) }), revealedGapCount < flow.gaps.length &&
+                                (!isLowRatingGap || Boolean(flow.gaps[revealedGapCount]?.description.trim())) &&
+                                (!flow.gaps[revealedGapCount]?.detailRequested ||
+                                    Boolean(flow.gaps[revealedGapCount]?.description.trim())) && ((0, jsx_runtime_1.jsx)("button", { className: ['cw-feedback-hint', 'cw-feedback-hint-action', classNames?.hint, classNames?.enterHintButton]
+                                    .filter(Boolean)
+                                    .join(' '), style: {
+                                    ...styles?.hint,
+                                    ...styles?.enterHintButton,
+                                }, type: "button", onClick: () => {
+                                    const index = revealedGapCount;
+                                    const gap = flow.gaps[index];
+                                    if (!gap?.description.trim())
+                                        return;
+                                    if (wordCount(gap.description) < copy.usefulMinimumWords && !gap.detailRequested) {
+                                        updateGap(index, { detailRequested: true });
+                                        return;
+                                    }
+                                    setRevealedGapCount(index + 1);
+                                }, children: copy.enterHint })), canAdvanceGap && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("button", { className: ['cw-feedback-add', classNames?.addGapButton].filter(Boolean).join(' '), style: styles?.addGapButton, type: "button", onClick: () => {
+                                        setActiveGapIndex(flow.gaps.length);
+                                        flow.setGaps([...flow.gaps, { description: '', screenshots: [] }]);
+                                    }, children: ["\uFF0B ", copy.addAnotherGap] }) })), slots?.gap] })), flow.step === 'success' && ((0, jsx_runtime_1.jsxs)("div", { className: ['cw-feedback-success', classNames?.successContainer].filter(Boolean).join(' '), style: styles?.successContainer, children: [(0, jsx_runtime_1.jsx)("span", { className: ['cw-feedback-success__check', classNames?.successCheck].filter(Boolean).join(' '), style: styles?.successCheck, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 38 }) }), (0, jsx_runtime_1.jsx)("h2", { className: classNames?.successTitle, style: styles?.successTitle, children: copy.successTitle }), (0, jsx_runtime_1.jsx)("p", { className: classNames?.successDescription, style: styles?.successDescription, children: copy.successDescription }), (0, jsx_runtime_1.jsxs)("div", { className: ['cw-feedback-success__coming-soon', classNames?.successComingSoon].filter(Boolean).join(' '), style: styles?.successComingSoon, children: [(0, jsx_runtime_1.jsxs)("svg", { className: "cw-feedback-success__leaderboard-icon", viewBox: "0 0 64 64", fill: "none", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("path", { d: "M7 48h50M11 48V33h12v15m8 0V23h12v25m-16 0V38h-4v10m20 0V36h10v12", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "m37 7 1.8 4.2 4.5.4-3.4 3 1 4.4-3.9-2.3-3.9 2.3 1-4.4-3.4-3 4.5-.4L37 7Z", fill: "currentColor" })] }), (0, jsx_runtime_1.jsx)("span", { className: "cw-feedback-success__leaderboard-title", children: "Leaderboard" }), (0, jsx_runtime_1.jsx)("span", { className: "cw-feedback-success__leaderboard-status", children: copy.successComingSoon })] }), slots?.success] })), submitError && flow.step !== 'success' && ((0, jsx_runtime_1.jsx)("p", { role: "alert", className: ['cw-feedback-submit-error', classNames?.submitError].filter(Boolean).join(' '), style: styles?.submitError, children: copy.submitErrorLabel }))] }), !isReview && flow.step === 'gap' && canAdvanceGap && ((0, jsx_runtime_1.jsx)("div", { className: ['cw-feedback-dialog__action', classNames?.actionBar].filter(Boolean).join(' '), style: styles?.actionBar, children: (0, jsx_runtime_1.jsx)("button", { className: ['cw-feedback-primary', classNames?.primaryButton].filter(Boolean).join(' '), style: styles?.primaryButton, type: "button", onClick: isGapFirstFlow
+                        ? () => { void persistAndAdvance('useful', () => flow.setStep('useful')); }
+                        : submitFeedback, children: isGapFirstFlow ? copy.nextLabel : copy.doneLabel }) })), !isReview && flow.step === 'useful' && ((0, jsx_runtime_1.jsxs)("div", { className: ['cw-feedback-dialog__action', classNames?.actionBar].filter(Boolean).join(' '), style: styles?.actionBar, children: [showLowRatingTime &&
+                        (!flow.usefulDetailShown || Boolean(flow.mostUseful.trim())) && ((0, jsx_runtime_1.jsx)("button", { className: ['cw-feedback-hint', 'cw-feedback-hint-action', classNames?.hint, classNames?.enterHintButton]
+                            .filter(Boolean)
+                            .join(' '), style: {
+                            ...styles?.hint,
+                            ...styles?.enterHintButton,
+                        }, type: "button", onClick: continueUseful, children: copy.enterHint })), showLowRatingTime && flow.timeSavedMinutes !== undefined &&
+                        Boolean(flow.mostUseful.trim()) &&
+                        (wordCount(flow.mostUseful) >= copy.usefulMinimumWords || flow.usefulDetailShown) && ((0, jsx_runtime_1.jsx)("button", { className: ['cw-feedback-primary', classNames?.primaryButton].filter(Boolean).join(' '), style: styles?.primaryButton, type: "button", onClick: submitFeedback, children: copy.doneLabel }))] })), isReview && ((0, jsx_runtime_1.jsxs)("div", { className: ['cw-feedback-review-nav', classNames?.reviewNav].filter(Boolean).join(' '), style: styles?.reviewNav, children: [(0, jsx_runtime_1.jsx)("button", { className: ['cw-feedback-review-nav__button', classNames?.reviewNavButton].filter(Boolean).join(' '), style: styles?.reviewNavButton, type: "button", onClick: previousReviewPage, disabled: reviewPageIndex === 0, "aria-label": copy.backLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { size: 18 }) }), (0, jsx_runtime_1.jsxs)("button", { className: [
+                            'cw-feedback-review-nav__button',
+                            'cw-feedback-review-nav__button--next',
+                            classNames?.reviewNavButton,
+                            classNames?.reviewNavNextButton,
+                        ]
+                            .filter(Boolean)
+                            .join(' '), style: {
+                            ...styles?.reviewNavButton,
+                            ...styles?.reviewNavNextButton,
+                        }, type: "button", onClick: nextReviewPage, disabled: !canContinueReview, "aria-label": reviewPageIndex === reviewPages.length - 1 ? copy.saveChangesLabel : copy.nextLabel, children: [reviewPageIndex === reviewPages.length - 1 && (0, jsx_runtime_1.jsx)("span", { children: copy.saveChangesLabel }), (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { size: 18 })] })] })), busy && ((0, jsx_runtime_1.jsx)("div", { ref: savingOverlayRef, className: "cw-feedback-saving-overlay", role: "status", "aria-live": "polite", tabIndex: -1, onKeyDown: (event) => { event.preventDefault(); event.stopPropagation(); }, children: (0, jsx_runtime_1.jsxs)("div", { className: "cw-feedback-saving-overlay__card", children: [(0, jsx_runtime_1.jsx)("span", { className: "cw-feedback-saving__spinner", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { children: copy.savingLabel })] }) }))] }));
+    const previewDialog = screenshotPreview && ((0, jsx_runtime_1.jsx)("div", { className: "cw-feedback-image-preview-backdrop", onMouseDown: (event) => {
+            if (event.target === event.currentTarget)
+                setScreenshotPreview(null);
+        }, children: (0, jsx_runtime_1.jsxs)("div", { ref: screenshotPreviewRef, className: "cw-feedback-image-preview-dialog", role: "dialog", "aria-modal": "true", "aria-label": `Screenshot preview: ${screenshotPreview.name}`, tabIndex: -1, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "cw-feedback-image-preview-close", onClick: () => setScreenshotPreview(null), "aria-label": "Close screenshot preview", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 22 }) }), (0, jsx_runtime_1.jsx)("img", { src: screenshotPreview.url, alt: screenshotPreview.name })] }) }));
+    return typeof document !== 'undefined'
+        ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, react_dom_1.createPortal)(backdrop, document.body), (0, react_dom_1.createPortal)(dialog, document.body), previewDialog && (0, react_dom_1.createPortal)(previewDialog, document.body)] })
+        : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [backdrop, dialog, previewDialog] });
+}