@embeddables/cli 0.15.0 → 0.15.1-beta.1

package/dist/workbench/FeedbackPanel.js

@@ -0,0 +1,1146 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Feedback Panel for collecting and reviewing design feedback on embeddable components.
+ * Supports session-based feedback collection, screenshots, and shareable review URLs.
+ */
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowLeft, faBan, faCamera, faCheck, faChevronRight, faCircleExclamation, faCircleXmark, faCloudArrowUp, faCopy, faLink, faComments, faCrosshairs, faFile, faFileLines, faFolderOpen, faImage, faMessage, faPaperclip, faPenToSquare, faPlus, faSpinner, faTrashCan, faUserGroup, faXmark, } from '@fortawesome/free-solid-svg-icons';
+import html2canvas from 'html2canvas';
+import { getSupabaseBrowserClient } from './supabase-browser.js';
+import { useComponentSelection } from './useComponentSelection.js';
+import { SUPABASE_URL } from '../constants.js';
+import { pascalCaseToTitleCase } from './stringUtils.js';
+import { appendMyFeedbackSession, appendSharedFeedbackSession, readMyFeedbackSessionRefs, readSharedFeedbackSessionRefs, removeMyFeedbackSession, removeSharedFeedbackSession, } from './feedbackSessionsStorage.js';
+import { MediaLightbox } from './MediaLightbox.js';
+import { WorkbenchModalOverlay } from './WorkbenchModalOverlay.js';
+const FEEDBACK_BUCKET = 'feedback_reviews';
+/** Generate shareable URL with feedbackReview and feedbackProject params. */
+function buildShareableUrl(reviewId, projectId) {
+    const url = new URL(window.location.href);
+    url.searchParams.set('feedbackReview', reviewId);
+    url.searchParams.set('feedbackProject', projectId);
+    return url.toString();
+}
+function isImageAttachmentData(data) {
+    return data.startsWith('data:image');
+}
+/** Runtime-parse untrusted storage JSON into FeedbackComment, or null if shape is invalid. */
+function parseFeedbackComment(raw) {
+    if (typeof raw !== 'object' || raw === null)
+        return null;
+    const c = raw;
+    if (typeof c.id !== 'string')
+        return null;
+    if (typeof c.pageKey !== 'string')
+        return null;
+    if (typeof c.pageId !== 'string')
+        return null;
+    if (typeof c.comment !== 'string')
+        return null;
+    if (!Array.isArray(c.attachments))
+        return null;
+    const attachments = [];
+    for (const rawAtt of c.attachments) {
+        if (typeof rawAtt !== 'object' || rawAtt === null)
+            return null;
+        const a = rawAtt;
+        if (a.type !== 'file' && a.type !== 'screenshot')
+            return null;
+        if (typeof a.data !== 'string')
+            return null;
+        if (a.filename !== undefined && typeof a.filename !== 'string')
+            return null;
+        attachments.push(a.filename !== undefined
+            ? { type: a.type, data: a.data, filename: a.filename }
+            : { type: a.type, data: a.data });
+    }
+    if (typeof c.metadata !== 'object' || c.metadata === null)
+        return null;
+    const m = c.metadata;
+    if (typeof m.timestamp !== 'string')
+        return null;
+    if (typeof m.viewportWidth !== 'number' || typeof m.viewportHeight !== 'number')
+        return null;
+    if (m.author !== undefined && typeof m.author !== 'string')
+        return null;
+    const optionalStringOk = (v) => v === undefined || v === null || typeof v === 'string';
+    if (!optionalStringOk(c.componentKey))
+        return null;
+    if (!optionalStringOk(c.componentId))
+        return null;
+    if (!optionalStringOk(c.componentType))
+        return null;
+    if (!optionalStringOk(c.feedbackTag))
+        return null;
+    if (c.userData !== undefined) {
+        if (typeof c.userData !== 'object' || c.userData === null || Array.isArray(c.userData)) {
+            return null;
+        }
+    }
+    const comment = {
+        id: c.id,
+        pageKey: c.pageKey,
+        pageId: c.pageId,
+        comment: c.comment,
+        attachments,
+        metadata: {
+            timestamp: m.timestamp,
+            viewportWidth: m.viewportWidth,
+            viewportHeight: m.viewportHeight,
+            ...(m.author !== undefined ? { author: m.author } : {}),
+        },
+    };
+    if (c.componentKey != null)
+        comment.componentKey = c.componentKey;
+    if (c.componentId != null)
+        comment.componentId = c.componentId;
+    if (c.componentType != null)
+        comment.componentType = c.componentType;
+    if (c.feedbackTag != null)
+        comment.feedbackTag = c.feedbackTag;
+    if (c.userData !== undefined)
+        comment.userData = c.userData;
+    return comment;
+}
+/** Runtime-parse untrusted storage JSON into FeedbackReview, or null if shape is invalid. */
+function parseFeedbackReviewFromJson(raw) {
+    if (typeof raw !== 'object' || raw === null)
+        return null;
+    const o = raw;
+    if (typeof o.id !== 'string')
+        return null;
+    if (typeof o.embeddableId !== 'string')
+        return null;
+    if (typeof o.baseUrl !== 'string')
+        return null;
+    if (typeof o.createdAt !== 'string')
+        return null;
+    if (o.projectId !== undefined && typeof o.projectId !== 'string')
+        return null;
+    if (o.title !== undefined && typeof o.title !== 'string')
+        return null;
+    if (!Array.isArray(o.comments))
+        return null;
+    const comments = [];
+    for (const item of o.comments) {
+        const parsed = parseFeedbackComment(item);
+        if (!parsed)
+            return null;
+        comments.push(parsed);
+    }
+    const review = {
+        id: o.id,
+        embeddableId: o.embeddableId,
+        baseUrl: o.baseUrl,
+        comments,
+        createdAt: o.createdAt,
+    };
+    if (o.projectId !== undefined)
+        review.projectId = o.projectId;
+    if (o.title !== undefined)
+        review.title = o.title;
+    return review;
+}
+/** Fetch review JSON from Supabase storage. Path: feedback_reviews/{projectId}/{reviewId}.json */
+async function fetchReview(reviewId, projectId) {
+    try {
+        const base = SUPABASE_URL.replace(/\/$/, '');
+        const url = `${base}/storage/v1/object/public/${FEEDBACK_BUCKET}/${projectId}/${reviewId}.json`;
+        const res = await fetch(url);
+        if (!res.ok)
+            return null;
+        const json = await res.json();
+        return parseFeedbackReviewFromJson(json);
+    }
+    catch {
+        return null;
+    }
+}
+function readActiveReviewFromUrl() {
+    if (typeof window === 'undefined')
+        return null;
+    const params = new URLSearchParams(window.location.search);
+    const r = params.get('feedbackReview');
+    const p = params.get('feedbackProject');
+    return r && p ? { reviewId: r, projectId: p } : null;
+}
+function feedbackBackDismissKey(embeddableId) {
+    return `embeddables:feedback:back:${embeddableId}`;
+}
+function readFeedbackDismissedPair(embeddableId) {
+    if (typeof window === 'undefined')
+        return null;
+    try {
+        return window.sessionStorage.getItem(feedbackBackDismissKey(embeddableId));
+    }
+    catch {
+        return null;
+    }
+}
+function clearFeedbackDismissed(embeddableId) {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        window.sessionStorage.removeItem(feedbackBackDismissKey(embeddableId));
+    }
+    catch {
+        // ignore
+    }
+}
+/** URL wins; else Workbench props. Respects session dismiss after Back (stale props). */
+function resolveActiveReview(embeddableId, feedbackReviewId, feedbackProjectId) {
+    const fromUrl = readActiveReviewFromUrl();
+    if (fromUrl) {
+        clearFeedbackDismissed(embeddableId);
+        return fromUrl;
+    }
+    if (feedbackReviewId && feedbackProjectId) {
+        const pair = `${feedbackReviewId}:${feedbackProjectId}`;
+        if (readFeedbackDismissedPair(embeddableId) === pair)
+            return null;
+        return { reviewId: feedbackReviewId, projectId: feedbackProjectId };
+    }
+    return null;
+}
+function stripFeedbackParamsFromUrl() {
+    if (typeof window === 'undefined')
+        return;
+    const url = new URL(window.location.href);
+    if (!url.searchParams.has('feedbackReview') && !url.searchParams.has('feedbackProject'))
+        return;
+    url.searchParams.delete('feedbackReview');
+    url.searchParams.delete('feedbackProject');
+    window.history.replaceState({}, '', url.toString());
+}
+function formatReviewDate(iso) {
+    return new Date(iso).toLocaleString(undefined, {
+        dateStyle: 'medium',
+        timeStyle: 'short',
+    });
+}
+/** Page key as stored (snake_case); use with `font-mono` in the UI. */
+function displayFeedbackPageKey(pageKey) {
+    if (!pageKey || pageKey === 'unknown')
+        return 'unknown';
+    return pageKey;
+}
+/** Stable key for grouping consecutive comments under one page heading. */
+function feedbackPageGroupKey(c) {
+    if (c.pageId && c.pageId !== 'unknown')
+        return `id:${c.pageId}`;
+    return `key:${c.pageKey}`;
+}
+function feedbackPageOrderIndex(flow, c) {
+    if (!flow?.pages?.length)
+        return 9999;
+    const byId = flow.pages.findIndex((p) => p.id === c.pageId);
+    if (byId >= 0)
+        return byId;
+    const byKey = flow.pages.findIndex((p) => p.key === c.pageKey);
+    if (byKey >= 0)
+        return byKey;
+    return 9999;
+}
+/** 1-based index in `flow.pages`, matching `PageNavigator` (`absolutePageIndex + 1`). */
+function feedbackPageOneBasedIndex(flow, c) {
+    const idx = feedbackPageOrderIndex(flow, c);
+    if (idx >= 9999)
+        return null;
+    return idx + 1;
+}
+function feedbackComponentSortKey(c) {
+    return (c.componentKey ?? c.componentId ?? '').toLowerCase();
+}
+/** Order comments by flow page order, then component key/id, then time. */
+function sortFeedbackCommentsForDisplay(list, flow) {
+    return list.sort((a, b) => {
+        const pa = feedbackPageOrderIndex(flow, a);
+        const pb = feedbackPageOrderIndex(flow, b);
+        if (pa !== pb)
+            return pa - pb;
+        const ca = feedbackComponentSortKey(a);
+        const cb = feedbackComponentSortKey(b);
+        if (ca !== cb)
+            return ca.localeCompare(cb);
+        return a.metadata.timestamp.localeCompare(b.metadata.timestamp);
+    });
+}
+/** Totals and first-page info for the shared-session welcome modal (same ordering as jump-to-first-comment). */
+function computeSharedSessionWelcomeStats(comments, flow) {
+    const totalComments = comments.length;
+    if (totalComments === 0) {
+        return { totalComments: 0, pageCount: 0, firstPageKey: '', commentsOnFirstPage: 0 };
+    }
+    const pageKeySet = new Set();
+    for (const c of comments) {
+        pageKeySet.add(feedbackPageGroupKey(c));
+    }
+    const pageCount = pageKeySet.size;
+    const sorted = sortFeedbackCommentsForDisplay([...comments], flow);
+    const first = sorted[0];
+    const firstGroup = feedbackPageGroupKey(first);
+    const commentsOnFirstPage = comments.filter((c) => feedbackPageGroupKey(c) === firstGroup).length;
+    const firstPageKey = displayFeedbackPageKey(first.pageKey);
+    return { totalComments, pageCount, firstPageKey, commentsOnFirstPage };
+}
+function formatAttachmentLineForPrompt(a, index) {
+    const name = a.filename?.trim() || (a.type === 'screenshot' ? 'screenshot' : 'file');
+    const kind = isImageAttachmentData(a.data) ? 'image' : 'non-image';
+    return `${index}. ${a.type} (${kind}): ${name} — binary not included in this paste; open the item in workbench feedback to view`;
+}
+/** Single clipboard-ready prompt: all comments with targeting + metadata (images summarized only). */
+function buildFeedbackAiPrompt(opts) {
+    const { embeddableId, loadedReview, comments, flow } = opts;
+    const sorted = sortFeedbackCommentsForDisplay([...comments], flow);
+    const lines = [];
+    lines.push('You are assisting with an Embeddables embeddable. Implement ALL feedback items below in the project source (pages, styles, computed fields, actions) so the running embeddable matches the requested changes.');
+    lines.push("The User Data properties show the User Data as it was captured when that particular comment was submitted, in case that's relevant to figuring out why the UI looked/behaved as it did.");
+    lines.push('When an item lists **feedback_scope_tag** on the target component, that value is one of the component’s Embeddables tags: use it to control how widely to apply the change. Propagate updates to every appropriate part of the project that shares that tag—not only visual styling but also copy, layout, computed fields, actions, and any other change that should stay consistent across the tagged group.');
+    lines.push('');
+    lines.push('## Context');
+    lines.push(`- **Embeddable ID**: \`${embeddableId}\``);
+    if (loadedReview?.title)
+        lines.push(`- **Review title**: ${loadedReview.title}`);
+    if (loadedReview?.createdAt) {
+        lines.push(`- **Review created**: ${formatReviewDate(loadedReview.createdAt)}`);
+    }
+    if (loadedReview?.baseUrl)
+        lines.push(`- **Captured from base URL**: ${loadedReview.baseUrl}`);
+    if (loadedReview?.projectId)
+        lines.push(`- **Project ID**: \`${loadedReview.projectId}\``);
+    lines.push('');
+    lines.push('## Feedback items (complete every numbered item)');
+    sorted.forEach((c, i) => {
+        const pageNum = feedbackPageOneBasedIndex(flow, c);
+        const heading = pageNum != null
+            ? `### ${i + 1}. Page ${pageNum} — ${displayFeedbackPageKey(c.pageKey)}`
+            : `### ${i + 1}. ${displayFeedbackPageKey(c.pageKey)}`;
+        lines.push('');
+        lines.push(heading);
+        lines.push('');
+        lines.push(`- **comment_id**: \`${c.id}\``);
+        lines.push('');
+        lines.push('**Change requested**');
+        lines.push(c.comment.trim() ||
+            '(No written description — use component context and screenshots or files attached in workbench feedback.)');
+        lines.push('');
+        lines.push('**Target**');
+        lines.push(`- page_key: \`${displayFeedbackPageKey(c.pageKey)}\``);
+        lines.push(`- page_id: \`${c.pageId}\``);
+        if (c.componentKey != null || c.componentId) {
+            lines.push(`- component_type: \`${c.componentType ?? 'unknown'}\``);
+            if (c.componentKey != null)
+                lines.push(`- component_key: \`${c.componentKey}\``);
+            if (c.componentId)
+                lines.push(`- component_id: \`${c.componentId}\``);
+            if (c.feedbackTag) {
+                lines.push(`- feedback_scope_tag: \`${c.feedbackTag}\``);
+            }
+        }
+        else {
+            lines.push('- component: (none — page-level or general note)');
+        }
+        lines.push('');
+        lines.push('**Metadata**');
+        if (c.metadata.author)
+            lines.push(`- author: ${c.metadata.author}`);
+        lines.push(`- timestamp: ${c.metadata.timestamp}`);
+        lines.push(`- viewport: ${c.metadata.viewportWidth}×${c.metadata.viewportHeight}`);
+        if (c.userData && Object.keys(c.userData).length > 0) {
+            lines.push(`- userData: \`${JSON.stringify(c.userData)}\``);
+        }
+        if (c.attachments?.length) {
+            lines.push('');
+            lines.push('**Attachments**');
+            c.attachments.forEach((a, ai) => {
+                lines.push(formatAttachmentLineForPrompt(a, ai + 1));
+            });
+        }
+    });
+    lines.push('');
+    lines.push('---');
+    lines.push('Verify in the workbench preview that every item is addressed.');
+    return lines.join('\n');
+}
+/** After `goToPage`, the target node may not exist until the embeddable finishes rendering. */
+function scrollToComponentWithRetry(componentId) {
+    let attempts = 0;
+    const maxAttempts = 72;
+    const step = () => {
+        const el = document.querySelector(`.cid-${componentId}`);
+        if (el) {
+            scrollToComponent(componentId);
+            return;
+        }
+        attempts++;
+        if (attempts < maxAttempts)
+            requestAnimationFrame(step);
+    };
+    requestAnimationFrame(step);
+}
+function defaultFeedbackReviewTitle() {
+    return `Feedback · ${formatReviewDate(new Date().toISOString())}`;
+}
+// Track last highlighted element so we can clear its outline when switching comments
+let lastHighlightedEl = null;
+/** Scroll to and highlight a component by ID. Clears previous highlight immediately. */
+function scrollToComponent(componentId) {
+    if (lastHighlightedEl) {
+        lastHighlightedEl.style.outline = '';
+        lastHighlightedEl = null;
+    }
+    const el = document.querySelector(`.cid-${componentId}`);
+    if (el) {
+        el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        el.style.outline = '2px solid rgba(59, 130, 246, 0.8)';
+        lastHighlightedEl = el;
+        setTimeout(() => {
+            if (lastHighlightedEl === el) {
+                el.style.outline = '';
+                lastHighlightedEl = null;
+            }
+        }, 2000);
+    }
+}
+export function FeedbackPanel({ embeddableId, feedbackReviewId, feedbackProjectId, projectId: injectedProjectId, }) {
+    const [sessionActive, setSessionActive] = useState(false);
+    const [comments, setComments] = useState([]);
+    const [commentText, setCommentText] = useState('');
+    /** '' = scope tag off (not sent); otherwise one of the selected component’s `tags`. Off by default until Add Tag. */
+    const [selectedFeedbackTag, setSelectedFeedbackTag] = useState('');
+    const [attachments, setAttachments] = useState([]);
+    const [includeViewportScreenshot, setIncludeViewportScreenshot] = useState(true);
+    const [includeComponentScreenshot, setIncludeComponentScreenshot] = useState(true);
+    const [activeReview, setActiveReview] = useState(() => resolveActiveReview(embeddableId, feedbackReviewId, feedbackProjectId));
+    const shareLinkLaunchRef = useRef(typeof window !== 'undefined' &&
+        new URLSearchParams(window.location.search).has('feedbackReview'));
+    /** Full share URL (`feedbackReview` + `feedbackProject`): jump embeddable to first comment's page once. */
+    const jumpToFirstShareCommentRef = useRef(typeof window !== 'undefined' &&
+        (() => {
+            const p = new URLSearchParams(window.location.search);
+            return p.has('feedbackReview') && p.has('feedbackProject');
+        })());
+    /** Same share URL: show a one-time welcome modal with session title + date after the review loads. */
+    const sharedLinkWelcomePendingRef = useRef(typeof window !== 'undefined' &&
+        (() => {
+            const p = new URLSearchParams(window.location.search);
+            return p.has('feedbackReview') && p.has('feedbackProject');
+        })());
+    const [loadingReview, setLoadingReview] = useState(() => resolveActiveReview(embeddableId, feedbackReviewId, feedbackProjectId) != null);
+    const [loadedReview, setLoadedReview] = useState(null);
+    const [completeError, setCompleteError] = useState(null);
+    const [copiedUrl, setCopiedUrl] = useState(false);
+    const [copiedPrompt, setCopiedPrompt] = useState(false);
+    const [copiedShareUrl, setCopiedShareUrl] = useState(false);
+    /** After a successful upload in the current panel; cleared when starting/discarding a session or opening another review. */
+    const [savedToBucketPair, setSavedToBucketPair] = useState(null);
+    /** After upload: stay in-panel with comments but hide inspector/form and block re-upload. */
+    const [sessionUploadComplete, setSessionUploadComplete] = useState(false);
+    const [isUploading, setIsUploading] = useState(false);
+    const [loadError, setLoadError] = useState(null);
+    const [submitError, setSubmitError] = useState(null);
+    const [isSubmittingComment, setIsSubmittingComment] = useState(false);
+    const isSubmittingCommentRef = useRef(false);
+    const [mySessionRows, setMySessionRows] = useState([]);
+    const [sharedSessionRows, setSharedSessionRows] = useState([]);
+    const [storedSessionsNonce, setStoredSessionsNonce] = useState(0);
+    const [mediaLightbox, setMediaLightbox] = useState(null);
+    const [confirmDialog, setConfirmDialog] = useState(null);
+    const [reviewTitleModalOpen, setReviewTitleModalOpen] = useState(false);
+    const [reviewTitleInput, setReviewTitleInput] = useState('');
+    const [reviewTitleError, setReviewTitleError] = useState(null);
+    const reviewTitleInputRef = useRef(null);
+    const [sharedSessionWelcomeOpen, setSharedSessionWelcomeOpen] = useState(false);
+    const sharedSessionWelcomeDismissRef = useRef(null);
+    const { state, selectedComponent, selectedComponentId, error, startInspecting, stopInspecting, clearSelection, inspectAnother, } = useComponentSelection(embeddableId);
+    useEffect(() => {
+        setSelectedFeedbackTag('');
+    }, [selectedComponentId]);
+    const descriptionRef = useRef(null);
+    const savvy = window.Savvy;
+    const isReviewMode = !!(activeReview?.reviewId && activeReview?.projectId);
+    /** Inspector + form share the row with comments; review-only / post-upload view uses full width for the list. */
+    const feedbackSplitLayout = sessionActive && !isReviewMode && !sessionUploadComplete;
+    const displayedComments = useMemo(() => {
+        const flow = window.Savvy?.getFlowJson?.(embeddableId);
+        return sortFeedbackCommentsForDisplay([...comments], flow);
+    }, [comments, embeddableId]);
+    const feedbackFlowJson = useMemo(() => window.Savvy?.getFlowJson?.(embeddableId), [embeddableId, comments]);
+    const sharedSessionWelcomeStats = useMemo(() => {
+        const flow = window.Savvy?.getFlowJson?.(embeddableId);
+        return computeSharedSessionWelcomeStats(comments, flow);
+    }, [comments, embeddableId]);
+    const shareableBucketPair = useMemo(() => {
+        if (activeReview?.reviewId && activeReview?.projectId) {
+            return { reviewId: activeReview.reviewId, projectId: activeReview.projectId };
+        }
+        return savedToBucketPair;
+    }, [activeReview, savedToBucketPair]);
+    // When switching embeddable / workbench props, re-resolve (URL overrides props)
+    useEffect(() => {
+        shareLinkLaunchRef.current =
+            typeof window !== 'undefined' &&
+                new URLSearchParams(window.location.search).has('feedbackReview');
+        const fromUrl = readActiveReviewFromUrl();
+        if (fromUrl) {
+            clearFeedbackDismissed(embeddableId);
+            setActiveReview(fromUrl);
+            return;
+        }
+        setActiveReview(resolveActiveReview(embeddableId, feedbackReviewId, feedbackProjectId));
+    }, [embeddableId, feedbackReviewId, feedbackProjectId]);
+    useEffect(() => {
+        setSavedToBucketPair(null);
+        setSessionUploadComplete(false);
+    }, [embeddableId]);
+    // After selecting a component, move focus to the description field
+    useEffect(() => {
+        if (!sessionActive || isReviewMode || sessionUploadComplete)
+            return;
+        if (state === 'selected' && selectedComponentId) {
+            descriptionRef.current?.focus();
+        }
+    }, [sessionActive, isReviewMode, sessionUploadComplete, state, selectedComponentId]);
+    useEffect(() => {
+        if (reviewTitleModalOpen) {
+            requestAnimationFrame(() => reviewTitleInputRef.current?.focus());
+        }
+    }, [reviewTitleModalOpen]);
+    useEffect(() => {
+        if (sharedSessionWelcomeOpen) {
+            requestAnimationFrame(() => sharedSessionWelcomeDismissRef.current?.focus());
+        }
+    }, [sharedSessionWelcomeOpen]);
+    // Load review JSON when a review is selected (URL or in-panel)
+    useEffect(() => {
+        if (!activeReview?.reviewId || !activeReview?.projectId) {
+            setLoadingReview(false);
+            setLoadedReview(null);
+            setComments([]);
+            setLoadError(null);
+            return;
+        }
+        let cancelled = false;
+        setLoadError(null);
+        setLoadingReview(true);
+        fetchReview(activeReview.reviewId, activeReview.projectId)
+            .then((review) => {
+            if (!cancelled && review) {
+                setLoadedReview(review);
+                setComments(review.comments);
+            }
+            else if (!cancelled && !review) {
+                setLoadError('Feedback review not found or could not be loaded.');
+            }
+        })
+            .finally(() => {
+            if (!cancelled)
+                setLoadingReview(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [activeReview?.reviewId, activeReview?.projectId]);
+    // Remember share-link opens (initial URL with feedbackReview) for Shared With Me
+    useEffect(() => {
+        if (!activeReview || !loadedReview)
+            return;
+        if (!shareLinkLaunchRef.current)
+            return;
+        appendSharedFeedbackSession({
+            reviewId: activeReview.reviewId,
+            projectId: activeReview.projectId,
+            embeddableId: loadedReview.embeddableId,
+        });
+        shareLinkLaunchRef.current = false;
+    }, [activeReview, loadedReview]);
+    // Shared feedback URL: move the preview to the first comment's page (same order as the comment list).
+    useEffect(() => {
+        if (!jumpToFirstShareCommentRef.current || !loadedReview || comments.length === 0) {
+            if (loadedReview && comments.length === 0)
+                jumpToFirstShareCommentRef.current = false;
+            return;
+        }
+        if (loadedReview.embeddableId !== embeddableId) {
+            jumpToFirstShareCommentRef.current = false;
+            return;
+        }
+        const flow = window.Savvy?.getFlowJson?.(embeddableId);
+        const sorted = sortFeedbackCommentsForDisplay([...comments], flow);
+        const first = sorted[0];
+        if (!first?.pageId || first.pageId === 'unknown') {
+            jumpToFirstShareCommentRef.current = false;
+            return;
+        }
+        let cancelled = false;
+        let attempts = 0;
+        const tryNav = () => {
+            if (cancelled || !jumpToFirstShareCommentRef.current)
+                return;
+            const s = window.Savvy;
+            if (!s?.goToPage) {
+                attempts++;
+                if (attempts < 40)
+                    setTimeout(tryNav, 100);
+                else
+                    jumpToFirstShareCommentRef.current = false;
+                return;
+            }
+            const already = s.getUserData?.(embeddableId)?.current_page_id;
+            if (already === first.pageId) {
+                jumpToFirstShareCommentRef.current = false;
+                return;
+            }
+            s.goToPage(embeddableId, first.pageId);
+            jumpToFirstShareCommentRef.current = false;
+        };
+        tryNav();
+        return () => {
+            cancelled = true;
+        };
+    }, [loadedReview, comments, embeddableId]);
+    // Full share URL: show a one-time modal explaining the session + title + recorded date.
+    useEffect(() => {
+        if (!sharedLinkWelcomePendingRef.current || !loadedReview)
+            return;
+        if (loadedReview.embeddableId !== embeddableId) {
+            sharedLinkWelcomePendingRef.current = false;
+            return;
+        }
+        setSharedSessionWelcomeOpen(true);
+        sharedLinkWelcomePendingRef.current = false;
+    }, [loadedReview, embeddableId]);
+    const closeSharedSessionWelcome = useCallback(() => {
+        setSharedSessionWelcomeOpen(false);
+    }, []);
+    // Load saved / shared session refs from localStorage and hydrate from the storage bucket
+    useEffect(() => {
+        if (isReviewMode)
+            return;
+        let cancelled = false;
+        const myRefs = readMyFeedbackSessionRefs().filter((r) => r.embeddableId === embeddableId);
+        const sharedRefs = readSharedFeedbackSessionRefs().filter((r) => r.embeddableId === embeddableId);
+        setMySessionRows(myRefs.map((ref) => ({ ref, review: null, status: 'loading' })));
+        setSharedSessionRows(sharedRefs.map((ref) => ({ ref, review: null, status: 'loading' })));
+        void (async () => {
+            const loadRows = async (refs) => Promise.all(refs.map(async (ref) => {
+                const review = await fetchReview(ref.reviewId, ref.projectId);
+                return {
+                    ref,
+                    review,
+                    status: review ? 'ok' : 'error',
+                };
+            }));
+            const [myLoaded, sharedLoaded] = await Promise.all([loadRows(myRefs), loadRows(sharedRefs)]);
+            if (!cancelled) {
+                setMySessionRows(myLoaded);
+                setSharedSessionRows(sharedLoaded);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [isReviewMode, embeddableId, storedSessionsNonce]);
+    const handleStartSession = useCallback(() => {
+        setSavedToBucketPair(null);
+        setSessionUploadComplete(false);
+        setSessionActive(true);
+        setComments([]);
+        startInspecting();
+    }, [startInspecting]);
+    /** Capture screenshots at submit time based on toggles. */
+    const captureScreenshots = useCallback(async () => {
+        const screenshots = [];
+        if (includeViewportScreenshot) {
+            try {
+                const canvas = await html2canvas(document.body, {
+                    useCORS: true,
+                    allowTaint: true,
+                    logging: false,
+                    // Exclude workbench panel from viewport screenshot
+                    ignoreElements: (el) => el.id === '__embeddables_workbench_root' ||
+                        !!el.closest('#__embeddables_workbench_root'),
+                });
+                screenshots.push({
+                    type: 'screenshot',
+                    data: canvas.toDataURL('image/png'),
+                    filename: 'viewport.png',
+                });
+            }
+            catch (err) {
+                console.error('[Feedback] Viewport screenshot failed:', err);
+            }
+        }
+        if (includeComponentScreenshot && selectedComponentId) {
+            const el = document.querySelector(`.cid-${selectedComponentId}`);
+            if (el) {
+                try {
+                    const canvas = await html2canvas(el, {
+                        useCORS: true,
+                        allowTaint: true,
+                        logging: false,
+                    });
+                    screenshots.push({
+                        type: 'screenshot',
+                        data: canvas.toDataURL('image/png'),
+                        filename: `component-${selectedComponentId}.png`,
+                    });
+                }
+                catch (err) {
+                    console.error('[Feedback] Component screenshot failed:', err);
+                }
+            }
+        }
+        return screenshots;
+    }, [includeViewportScreenshot, includeComponentScreenshot, selectedComponentId]);
+    const handleFileAttach = useCallback((e) => {
+        const files = e.target.files;
+        if (!files?.length)
+            return;
+        const file = files[0];
+        const reader = new FileReader();
+        reader.onload = () => {
+            const data = reader.result;
+            setAttachments((prev) => [...prev, { type: 'file', data, filename: file.name }]);
+        };
+        reader.readAsDataURL(file);
+        e.target.value = '';
+    }, []);
+    const removeAttachment = useCallback((index) => {
+        setAttachments((prev) => prev.filter((_, i) => i !== index));
+    }, []);
+    const handleSubmitComment = useCallback(async () => {
+        if (sessionUploadComplete)
+            return;
+        const blocked = !commentText.trim() &&
+            attachments.length === 0 &&
+            !includeViewportScreenshot &&
+            !(includeComponentScreenshot && !!selectedComponentId);
+        if (blocked || isSubmittingCommentRef.current)
+            return;
+        isSubmittingCommentRef.current = true;
+        setIsSubmittingComment(true);
+        try {
+            const screenshotAttachments = await captureScreenshots();
+            const allAttachments = [...attachments, ...screenshotAttachments];
+            if (!commentText.trim() && allAttachments.length === 0)
+                return;
+            if (!savvy?.getUserData || !savvy?.getFlowJson) {
+                setSubmitError('Embeddable runtime is not ready. Please wait for the page to load.');
+                return;
+            }
+            setSubmitError(null);
+            const userData = savvy.getUserData(embeddableId);
+            const flowJson = savvy.getFlowJson(embeddableId);
+            const pageKey = userData?.current_page_key ?? 'unknown';
+            const pageId = userData?.current_page_id ?? 'unknown';
+            const tag = selectedComponentId &&
+                selectedComponent?.tags &&
+                selectedComponent.tags.length > 0 &&
+                selectedFeedbackTag.trim()
+                ? selectedFeedbackTag.trim()
+                : undefined;
+            const comment = {
+                id: crypto.randomUUID(),
+                pageKey,
+                pageId,
+                componentKey: selectedComponent?.key,
+                componentId: selectedComponentId ?? undefined,
+                componentType: selectedComponent?.type,
+                feedbackTag: tag,
+                comment: commentText.trim(),
+                attachments: allAttachments,
+                userData: userData,
+                metadata: {
+                    timestamp: new Date().toISOString(),
+                    viewportWidth: window.innerWidth,
+                    viewportHeight: window.innerHeight,
+                },
+            };
+            setComments((prev) => [...prev, comment]);
+            setCommentText('');
+            setAttachments([]);
+            setIncludeViewportScreenshot(true);
+            setIncludeComponentScreenshot(true);
+            clearSelection();
+            startInspecting();
+        }
+        finally {
+            isSubmittingCommentRef.current = false;
+            setIsSubmittingComment(false);
+        }
+    }, [
+        commentText,
+        attachments,
+        selectedComponent,
+        selectedComponentId,
+        embeddableId,
+        savvy,
+        clearSelection,
+        startInspecting,
+        captureScreenshots,
+        includeViewportScreenshot,
+        includeComponentScreenshot,
+        selectedFeedbackTag,
+        sessionUploadComplete,
+    ]);
+    const performCompleteReviewUpload = useCallback(async (title) => {
+        if (comments.length === 0)
+            return;
+        if (!savvy?.getFlowJson)
+            return;
+        setCompleteError(null);
+        setIsUploading(true);
+        const flowJson = savvy.getFlowJson(embeddableId);
+        // Prefer injected projectId (from embeddables.json in dev), then flow, else fallback
+        const projectId = injectedProjectId ?? flowJson?.project_id ?? '_unknown';
+        const reviewId = crypto.randomUUID();
+        const baseUrl = window.location.href.split('?')[0];
+        const review = {
+            id: reviewId,
+            embeddableId,
+            projectId,
+            baseUrl,
+            comments,
+            createdAt: new Date().toISOString(),
+            title,
+        };
+        try {
+            const supabase = getSupabaseBrowserClient();
+            // Store in project_id folder: feedback_reviews/{projectId}/{reviewId}.json
+            const storagePath = `${projectId}/${reviewId}.json`;
+            const { error: uploadError } = await supabase.storage
+                .from(FEEDBACK_BUCKET)
+                .upload(storagePath, JSON.stringify(review), {
+                contentType: 'application/json',
+                upsert: false,
+            });
+            if (uploadError) {
+                setCompleteError(uploadError.message);
+                return;
+            }
+            appendMyFeedbackSession({ reviewId, projectId, embeddableId });
+            setStoredSessionsNonce((n) => n + 1);
+            setSavedToBucketPair({ reviewId, projectId });
+            setSessionUploadComplete(true);
+            clearSelection();
+            stopInspecting();
+            const shareUrl = buildShareableUrl(reviewId, projectId);
+            try {
+                await navigator.clipboard.writeText(shareUrl);
+                setCopiedUrl(true);
+                setTimeout(() => setCopiedUrl(false), 3000);
+            }
+            catch {
+                setCompleteError(`Review saved! Copy this URL: ${shareUrl}`);
+            }
+        }
+        catch (err) {
+            setCompleteError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setIsUploading(false);
+        }
+    }, [comments, embeddableId, savvy, injectedProjectId, clearSelection, stopInspecting]);
+    const openCompleteReviewModal = useCallback(() => {
+        if (sessionUploadComplete)
+            return;
+        if (comments.length === 0)
+            return;
+        if (!savvy?.getFlowJson)
+            return;
+        setReviewTitleError(null);
+        setReviewTitleInput(defaultFeedbackReviewTitle());
+        setReviewTitleModalOpen(true);
+    }, [sessionUploadComplete, comments.length, savvy, embeddableId]);
+    const closeReviewTitleModal = useCallback(() => {
+        setReviewTitleModalOpen(false);
+        setReviewTitleError(null);
+    }, []);
+    const submitReviewTitleModal = useCallback(() => {
+        const trimmed = reviewTitleInput.trim();
+        if (!trimmed) {
+            setReviewTitleError('Please enter a title for this feedback session.');
+            return;
+        }
+        setReviewTitleModalOpen(false);
+        setReviewTitleError(null);
+        void performCompleteReviewUpload(trimmed);
+    }, [reviewTitleInput, performCompleteReviewUpload]);
+    const handleCopyAiPrompt = useCallback(async () => {
+        if (comments.length === 0)
+            return;
+        setSubmitError(null);
+        const text = buildFeedbackAiPrompt({
+            embeddableId,
+            loadedReview,
+            comments,
+            flow: feedbackFlowJson,
+        });
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopiedPrompt(true);
+            setTimeout(() => setCopiedPrompt(false), 2500);
+        }
+        catch {
+            setSubmitError('Could not copy prompt to clipboard.');
+        }
+    }, [comments, embeddableId, loadedReview, feedbackFlowJson]);
+    const handleCopyShareableUrl = useCallback(async () => {
+        if (!shareableBucketPair)
+            return;
+        setSubmitError(null);
+        const shareUrl = buildShareableUrl(shareableBucketPair.reviewId, shareableBucketPair.projectId);
+        try {
+            await navigator.clipboard.writeText(shareUrl);
+            setCopiedShareUrl(true);
+            setTimeout(() => setCopiedShareUrl(false), 2500);
+        }
+        catch {
+            setSubmitError('Could not copy share link to clipboard.');
+        }
+    }, [shareableBucketPair]);
+    const handleJumpToComment = useCallback((c) => {
+        const w = window;
+        const s = w.Savvy;
+        const userData = s?.getUserData?.(embeddableId);
+        const currentPageId = userData?.current_page_id ?? '';
+        const targetPageId = c.pageId && c.pageId !== 'unknown' ? c.pageId : '';
+        const needsPageChange = Boolean(targetPageId && targetPageId !== currentPageId);
+        if (needsPageChange && s?.goToPage) {
+            s.goToPage(embeddableId, targetPageId);
+            if (c.componentId)
+                scrollToComponentWithRetry(c.componentId);
+            return;
+        }
+        if (c.componentId) {
+            scrollToComponent(c.componentId);
+        }
+    }, [embeddableId]);
+    const openFeedbackAttachmentLightbox = useCallback((comment, attachmentIndex) => {
+        const imageEntries = comment.attachments
+            .map((a, i) => ({ attachment: a, index: i }))
+            .filter(({ attachment }) => isImageAttachmentData(attachment.data));
+        const pos = imageEntries.findIndex(({ index }) => index === attachmentIndex);
+        if (pos < 0)
+            return;
+        setMediaLightbox({
+            items: imageEntries.map(({ attachment }) => ({
+                src: attachment.data,
+                alt: attachment.filename ?? 'Attachment',
+                caption: attachment.filename,
+            })),
+            initialIndex: pos,
+        });
+    }, []);
+    const handleDiscardSession = useCallback(() => {
+        const finishDiscard = () => {
+            setSavedToBucketPair(null);
+            setSessionUploadComplete(false);
+            setSessionActive(false);
+            setComments([]);
+            setCommentText('');
+            setAttachments([]);
+            setSelectedFeedbackTag('');
+            setSubmitError(null);
+            clearSelection();
+            stopInspecting();
+        };
+        if (sessionUploadComplete) {
+            finishDiscard();
+            return;
+        }
+        if (comments.length > 0) {
+            setConfirmDialog({
+                title: 'Discard session?',
+                message: 'All comments in this session will be removed. Nothing is saved to the cloud until you complete a review.',
+                confirmLabel: 'Discard',
+                variant: 'danger',
+                onConfirm: () => {
+                    setConfirmDialog(null);
+                    finishDiscard();
+                },
+            });
+            return;
+        }
+        finishDiscard();
+    }, [comments.length, sessionUploadComplete, clearSelection, stopInspecting]);
+    const openReviewInPanel = useCallback((reviewId, projectId) => {
+        setLoadError(null);
+        shareLinkLaunchRef.current = false;
+        clearFeedbackDismissed(embeddableId);
+        setSavedToBucketPair(null);
+        setActiveReview({ reviewId, projectId });
+    }, [embeddableId]);
+    const handleRemoveMySessionFromList = useCallback((reviewId, projectId) => {
+        setConfirmDialog({
+            title: 'Remove from list?',
+            message: 'Remove this session from your list? The review file in cloud storage is not deleted.',
+            confirmLabel: 'Remove',
+            variant: 'danger',
+            onConfirm: () => {
+                setConfirmDialog(null);
+                removeMyFeedbackSession(reviewId, projectId);
+                setStoredSessionsNonce((n) => n + 1);
+            },
+        });
+    }, []);
+    const handleRemoveSharedSessionFromList = useCallback((reviewId, projectId) => {
+        setConfirmDialog({
+            title: 'Remove from list?',
+            message: 'Remove this session from your shared list? The review file in cloud storage is not deleted.',
+            confirmLabel: 'Remove',
+            variant: 'danger',
+            onConfirm: () => {
+                setConfirmDialog(null);
+                removeSharedFeedbackSession(reviewId, projectId);
+                setStoredSessionsNonce((n) => n + 1);
+            },
+        });
+    }, []);
+    const handleBackFromReview = useCallback(() => {
+        const dirty = loadedReview != null && JSON.stringify(comments) !== JSON.stringify(loadedReview.comments);
+        const proceedBack = () => {
+            if (activeReview) {
+                try {
+                    window.sessionStorage.setItem(feedbackBackDismissKey(embeddableId), `${activeReview.reviewId}:${activeReview.projectId}`);
+                }
+                catch {
+                    // ignore
+                }
+            }
+            setActiveReview(null);
+            setLoadedReview(null);
+            setComments([]);
+            setLoadError(null);
+            setSavedToBucketPair(null);
+            stripFeedbackParamsFromUrl();
+        };
+        if (dirty) {
+            setConfirmDialog({
+                title: 'Leave review?',
+                message: 'You have unsaved changes. Leave this review?',
+                confirmLabel: 'Leave',
+                variant: 'danger',
+                onConfirm: () => {
+                    setConfirmDialog(null);
+                    proceedBack();
+                },
+            });
+            return;
+        }
+        proceedBack();
+    }, [loadedReview, comments, activeReview, embeddableId]);
+    const isAddCommentDisabled = isSubmittingComment ||
+        (!commentText.trim() &&
+            attachments.length === 0 &&
+            !includeViewportScreenshot &&
+            !(includeComponentScreenshot && !!selectedComponentId));
+    const handleDescriptionKeyDown = useCallback((e) => {
+        if (e.key !== 'Enter' || e.shiftKey)
+            return;
+        if (e.nativeEvent.isComposing)
+            return;
+        e.preventDefault();
+        if (isAddCommentDisabled)
+            return;
+        void handleSubmitComment();
+    }, [handleSubmitComment, isAddCommentDisabled]);
+    const handleDescriptionPaste = useCallback((e) => {
+        if (isSubmittingComment)
+            return;
+        const items = e.clipboardData?.items;
+        if (!items?.length)
+            return;
+        const imageFiles = [];
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            if (item.kind === 'file' && item.type.startsWith('image/')) {
+                const f = item.getAsFile();
+                if (f)
+                    imageFiles.push(f);
+            }
+        }
+        if (imageFiles.length === 0)
+            return;
+        e.preventDefault();
+        const readAsDataUrl = (file) => new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = () => reject(reader.error);
+            reader.readAsDataURL(file);
+        });
+        const extForMime = (mime) => {
+            if (mime === 'image/jpeg')
+                return 'jpg';
+            if (mime === 'image/png')
+                return 'png';
+            if (mime === 'image/gif')
+                return 'gif';
+            if (mime === 'image/webp')
+                return 'webp';
+            if (mime === 'image/svg+xml')
+                return 'svg';
+            return 'png';
+        };
+        void (async () => {
+            const next = [];
+            for (let i = 0; i < imageFiles.length; i++) {
+                const file = imageFiles[i];
+                const data = await readAsDataUrl(file);
+                const ext = extForMime(file.type);
+                const filename = imageFiles.length > 1 ? `pasted-image-${i + 1}.${ext}` : `pasted-image.${ext}`;
+                next.push({ type: 'file', data, filename });
+            }
+            setAttachments((prev) => [...prev, ...next]);
+        })();
+    }, [isSubmittingComment]);
+    if (loadingReview) {
+        return (_jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm text-slate-300", children: [_jsx(FontAwesomeIcon, { icon: faSpinner, spin: true, className: "h-4 w-4 text-sky-400" }), "Loading feedback review\u2026"] }), _jsxs("button", { type: "button", onClick: handleBackFromReview, className: "inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-white/5 px-3 py-1.5 text-xs font-semibold text-slate-200 ring-1 ring-inset ring-white/15 transition-colors hover:bg-white/10", children: [_jsx(FontAwesomeIcon, { icon: faArrowLeft, className: "h-3 w-3" }), "Back"] })] }));
+    }
+    if (loadError && isReviewMode) {
+        return (_jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-3", children: [_jsxs("div", { className: "flex max-w-md items-start gap-2 rounded-xl bg-rose-500/10 px-4 py-3 text-sm text-rose-200 ring-1 ring-inset ring-rose-500/20", children: [_jsx(FontAwesomeIcon, { icon: faCircleExclamation, className: "mt-0.5 h-4 w-4 shrink-0 text-rose-300" }), _jsx("span", { children: loadError })] }), _jsxs("button", { type: "button", onClick: handleBackFromReview, className: "inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-white/5 px-3 py-1.5 text-xs font-semibold text-slate-200 ring-1 ring-inset ring-white/15 transition-colors hover:bg-white/10", children: [_jsx(FontAwesomeIcon, { icon: faArrowLeft, className: "h-3 w-3" }), "Back"] })] }));
+    }
+    return (_jsxs("div", { className: "mx-auto flex h-full min-h-0 w-full max-w-6xl flex-col gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [(sessionActive || isReviewMode) && (_jsxs("button", { type: "button", onClick: isReviewMode ? handleBackFromReview : handleDiscardSession, disabled: sessionActive && !isReviewMode && isUploading, className: "inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-white/5 px-2.5 py-1.5 text-xs font-semibold text-slate-200 ring-1 ring-inset ring-white/15 transition-colors hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-50", children: [_jsx(FontAwesomeIcon, { icon: faArrowLeft, className: "h-3 w-3" }), "Back"] })), _jsxs("div", { className: "inline-flex items-center gap-1.5 text-xs font-semibold tracking-wide text-slate-100", children: [_jsx(FontAwesomeIcon, { icon: faComments, className: "h-3.5 w-3.5 text-sky-400/90" }), isReviewMode ? 'Feedback Review' : 'Feedback'] })] }), _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [(sessionActive || isReviewMode) && comments.length > 0 && (_jsx("button", { type: "button", onClick: () => void handleCopyAiPrompt(), className: "inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-white/5 px-2.5 py-1.5 text-xs font-semibold text-slate-200 ring-1 ring-inset ring-white/15 transition-colors hover:bg-white/10", children: copiedPrompt ? (_jsxs(_Fragment, { children: [_jsx(FontAwesomeIcon, { icon: faCheck, className: "h-3.5 w-3.5 text-emerald-400" }), "Prompt copied"] })) : (_jsxs(_Fragment, { children: [_jsx(FontAwesomeIcon, { icon: faCopy, className: "h-3.5 w-3.5 opacity-80" }), "Copy prompt for AI"] })) })), shareableBucketPair && (_jsx("button", { type: "button", onClick: () => void handleCopyShareableUrl(), className: "inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-white/5 px-2.5 py-1.5 text-xs font-semibold text-slate-200 ring-1 ring-inset ring-white/15 transition-colors hover:bg-white/10", children: copiedShareUrl ? (_jsxs(_Fragment, { children: [_jsx(FontAwesomeIcon, { icon: faCheck, className: "h-3.5 w-3.5 text-emerald-400" }), "Link copied"] })) : (_jsxs(_Fragment, { children: [_jsx(FontAwesomeIcon, { icon: faLink, className: "h-3.5 w-3.5 opacity-80" }), "Copy shareable URL"] })) })), !isReviewMode && (_jsx(_Fragment, { children: !sessionActive ? (_jsxs("button", { type: "button", onClick: handleStartSession, className: "inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-emerald-600 px-2.5 py-1.5 text-xs font-semibold text-white ring-1 ring-inset ring-emerald-500 transition-colors hover:bg-emerald-500", children: [_jsx(FontAwesomeIcon, { icon: faPlus, className: "h-3.5 w-3.5" }), "Start feedback session"] })) : (comments.length > 0 &&
+                                    (sessionUploadComplete ? (_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-lg bg-emerald-500/15 px-2.5 py-1.5 text-xs font-semibold text-emerald-200 ring-1 ring-inset ring-emerald-500/30", children: [_jsx(FontAwesomeIcon, { icon: faCheck, className: "h-3.5 w-3.5 text-emerald-400" }), "Review saved"] })) : (_jsx("button", { type: "button", onClick: openCompleteReviewModal, disabled: isUploading, className: "inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-sky-600 px-2.5 py-1.5 text-xs font-semibold text-white ring-1 ring-inset ring-sky-500 transition-colors hover:bg-sky-500 disabled:opacity-50 disabled:cursor-not-allowed", children: isUploading ? (_jsxs(_Fragment, { children: [_jsx(FontAwesomeIcon, { icon: faSpinner, spin: true, className: "h-3.5 w-3.5" }), "Uploading\u2026"] })) : copiedUrl ? (_jsxs(_Fragment, { children: [_jsx(FontAwesomeIcon, { icon: faCheck, className: "h-3.5 w-3.5" }), "Copied!"] })) : (_jsxs(_Fragment, { children: [_jsx(FontAwesomeIcon, { icon: faCloudArrowUp, className: "h-3.5 w-3.5" }), "Complete feedback review"] })) })))) }))] })] }), isReviewMode && loadedReview?.title && (_jsx("div", { className: "-mt-1 text-[11px] font-medium text-slate-300", children: loadedReview.title })), sessionUploadComplete && !isReviewMode && (_jsx("div", { className: "-mt-1 text-[11px] font-medium text-emerald-300/90", children: "Review saved \u2014 view only" })), (completeError || submitError) && (_jsxs("div", { className: "flex items-start gap-2 rounded-xl bg-rose-500/10 px-3 py-2 text-xs text-rose-200 ring-1 ring-inset ring-rose-500/20", children: [_jsx(FontAwesomeIcon, { icon: faCircleExclamation, className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-rose-300" }), _jsx("span", { children: completeError ?? submitError })] })), !sessionActive && !isReviewMode && (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-4 overflow-auto", children: [_jsxs("section", { className: "min-w-0", children: [_jsxs("h2", { className: "mb-2 inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-sky-400", children: [_jsx(FontAwesomeIcon, { icon: faFolderOpen, className: "h-3 w-3" }), "My Feedback Sessions"] }), _jsx("div", { className: "flex flex-col gap-1.5", children: mySessionRows.length === 0 ? (_jsx("div", { className: "text-[11px] text-slate-300 italic", children: "No saved sessions yet." })) : (mySessionRows.map((row) => (_jsxs("div", { className: "flex min-w-0 items-stretch gap-1 rounded-lg bg-white/5 ring-1 ring-inset ring-white/10", children: [_jsxs("button", { type: "button", disabled: row.status !== 'ok', onClick: () => openReviewInPanel(row.ref.reviewId, row.ref.projectId), className: "flex min-w-0 flex-1 flex-wrap items-center justify-between gap-2 rounded-l-lg px-2.5 py-2 text-left transition-colors hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent cursor-pointer", children: [_jsx("div", { className: "min-w-0 flex-1 text-[11px]", children: row.status === 'loading' ? (_jsx("span", { className: "text-slate-400", children: "Loading\u2026" })) : row.status === 'error' ? (_jsx("span", { className: "text-rose-300", children: "Could not load this review from storage." })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "font-medium text-slate-100", children: row.review.title || formatReviewDate(row.review.createdAt) }), _jsxs("div", { className: "text-slate-300", children: [row.review.title
+                                                                        ? `${formatReviewDate(row.review.createdAt)} · `
+                                                                        : '', row.review.comments.length, " comment", row.review.comments.length === 1 ? '' : 's', row.ref.projectId ? ` · ${row.ref.projectId}` : ''] })] })) }), row.status === 'ok' && (_jsxs("span", { className: "inline-flex shrink-0 items-center gap-0.5 text-[10px] font-semibold text-sky-400", children: ["Open", _jsx(FontAwesomeIcon, { icon: faChevronRight, className: "h-2.5 w-2.5" })] }))] }), _jsxs("button", { type: "button", onClick: () => handleRemoveMySessionFromList(row.ref.reviewId, row.ref.projectId), className: "inline-flex shrink-0 cursor-pointer items-center justify-center gap-1 self-stretch rounded-r-lg border-l border-white/10 px-2.5 py-2 text-[10px] font-semibold text-rose-300 transition-colors hover:bg-rose-500/10 hover:text-rose-200", "aria-label": "Remove from my list", children: [_jsx(FontAwesomeIcon, { icon: faTrashCan, className: "h-3 w-3" }), _jsx("span", { className: "hidden sm:inline", children: "Delete" })] })] }, `${row.ref.reviewId}-${row.ref.projectId}`)))) })] }), _jsxs("section", { className: "min-w-0", children: [_jsxs("h2", { className: "mb-2 inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-purple-300", children: [_jsx(FontAwesomeIcon, { icon: faUserGroup, className: "h-3 w-3" }), "Feedback Sessions Shared With Me"] }), _jsx("div", { className: "flex flex-col gap-1.5", children: sharedSessionRows.length === 0 ? (_jsx("div", { className: "text-[11px] text-slate-300 italic", children: "Open a share link to save it here for later." })) : (sharedSessionRows.map((row) => (_jsxs("div", { className: "flex min-w-0 items-stretch gap-1 rounded-lg bg-white/5 ring-1 ring-inset ring-white/10", children: [_jsxs("button", { type: "button", disabled: row.status !== 'ok', onClick: () => openReviewInPanel(row.ref.reviewId, row.ref.projectId), className: "flex min-w-0 flex-1 flex-wrap items-center justify-between gap-2 rounded-l-lg px-2.5 py-2 text-left transition-colors hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent cursor-pointer", children: [_jsx("div", { className: "min-w-0 flex-1 text-[11px]", children: row.status === 'loading' ? (_jsx("span", { className: "text-slate-400", children: "Loading\u2026" })) : row.status === 'error' ? (_jsx("span", { className: "text-rose-300", children: "Could not load this review from storage." })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "font-medium text-slate-100", children: row.review.title || formatReviewDate(row.review.createdAt) }), _jsxs("div", { className: "text-slate-300", children: [row.review.title
+                                                                        ? `${formatReviewDate(row.review.createdAt)} · `
+                                                                        : '', row.review.comments.length, " comment", row.review.comments.length === 1 ? '' : 's', row.ref.projectId ? ` · ${row.ref.projectId}` : ''] })] })) }), row.status === 'ok' && (_jsxs("span", { className: "inline-flex shrink-0 items-center gap-0.5 text-[10px] font-semibold text-sky-400", children: ["Open", _jsx(FontAwesomeIcon, { icon: faChevronRight, className: "h-2.5 w-2.5" })] }))] }), _jsxs("button", { type: "button", onClick: () => handleRemoveSharedSessionFromList(row.ref.reviewId, row.ref.projectId), className: "inline-flex shrink-0 cursor-pointer items-center justify-center gap-1 self-stretch rounded-r-lg border-l border-white/10 px-2.5 py-2 text-[10px] font-semibold text-amber-300 transition-colors hover:bg-amber-500/10 hover:text-amber-200", "aria-label": "Remove from shared list", children: [_jsx(FontAwesomeIcon, { icon: faXmark, className: "h-3 w-3" }), _jsx("span", { className: "hidden sm:inline", children: "Remove" })] })] }, `${row.ref.reviewId}-${row.ref.projectId}-shared`)))) })] })] })), (sessionActive || isReviewMode) && (_jsxs("div", { className: `grid min-h-0 flex-1 gap-4 overflow-hidden ${feedbackSplitLayout ? 'grid-cols-2' : 'grid-cols-1'}`, children: [feedbackSplitLayout && (_jsxs("div", { className: "flex min-h-0 min-w-0 flex-col gap-3 overflow-auto", children: [!isReviewMode && (_jsxs("div", { className: "rounded-xl bg-white/5 p-3 ring-1 ring-inset ring-white/10", children: [_jsxs("div", { className: "mb-2 inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-slate-300", children: [_jsx(FontAwesomeIcon, { icon: faCrosshairs, className: "h-3 w-3 text-sky-400/90" }), "Select element"] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [state === 'idle' && (_jsxs("button", { type: "button", onClick: startInspecting, className: "inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-sky-600 px-2.5 py-1.5 text-xs font-semibold text-white ring-1 ring-inset ring-sky-500 transition-colors hover:bg-sky-500", children: [_jsx(FontAwesomeIcon, { icon: faCrosshairs, className: "h-3.5 w-3.5" }), "Select element"] })), state === 'inspecting' && (_jsxs("button", { type: "button", onClick: stopInspecting, className: "inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-rose-600 px-2.5 py-1.5 text-xs font-semibold text-white ring-1 ring-inset ring-rose-500 transition-colors hover:bg-rose-500", children: [_jsx(FontAwesomeIcon, { icon: faBan, className: "h-3.5 w-3.5" }), "Stop selecting"] })), state === 'selected' && selectedComponent && (_jsxs(_Fragment, { children: [_jsxs("span", { className: "text-sm text-slate-300", children: [_jsxs("span", { className: "mr-2 font-medium text-sky-400", children: [pascalCaseToTitleCase(selectedComponent.type), ":"] }), _jsx("span", { className: "font-mono text-white", children: selectedComponent.key })] }), _jsxs("button", { type: "button", onClick: inspectAnother, className: "inline-flex cursor-pointer items-center gap-1 rounded-lg bg-sky-600 px-2.5 py-1.5 text-xs font-semibold text-white transition-colors hover:bg-sky-500", children: [_jsx(FontAwesomeIcon, { icon: faPenToSquare, className: "h-3 w-3" }), "Change"] }), _jsxs("button", { type: "button", onClick: clearSelection, className: "inline-flex cursor-pointer items-center gap-1 rounded-lg bg-slate-700 px-2.5 py-1.5 text-xs font-semibold text-slate-200 transition-colors hover:bg-slate-600", children: [_jsx(FontAwesomeIcon, { icon: faCircleXmark, className: "h-3 w-3" }), "Clear"] }), selectedComponent.tags && selectedComponent.tags.length > 0 && (_jsx(_Fragment, { children: selectedFeedbackTag ? (_jsxs("button", { type: "button", onClick: () => setSelectedFeedbackTag(''), disabled: isSubmittingComment, className: "inline-flex cursor-pointer items-center gap-1 rounded-lg bg-slate-700 px-2.5 py-1.5 text-xs font-semibold text-slate-200 ring-1 ring-inset ring-white/10 transition-colors hover:bg-slate-600 disabled:cursor-not-allowed disabled:opacity-50", children: [_jsx(FontAwesomeIcon, { icon: faXmark, className: "h-3 w-3" }), "Remove tag"] })) : (_jsxs("button", { type: "button", onClick: () => setSelectedFeedbackTag(selectedComponent.tags[0]), disabled: isSubmittingComment, className: "inline-flex cursor-pointer items-center gap-1 rounded-lg bg-slate-700 px-2.5 py-1.5 text-xs font-semibold text-slate-200 ring-1 ring-inset ring-white/10 transition-colors hover:bg-slate-600 disabled:cursor-not-allowed disabled:opacity-50", children: [_jsx(FontAwesomeIcon, { icon: faPlus, className: "h-3 w-3" }), "Add Tag"] })) }))] }))] }), state === 'selected' &&
+                                        selectedComponent &&
+                                        selectedComponent.tags &&
+                                        selectedComponent.tags.length > 0 &&
+                                        selectedFeedbackTag && (_jsxs("div", { className: "mt-2 flex min-w-0 max-w-md flex-col gap-1", children: [_jsx("label", { htmlFor: "embeddables-feedback-scope-tag", className: "text-[10px] font-semibold uppercase tracking-wide text-slate-400", children: "Scope tag" }), _jsx("select", { id: "embeddables-feedback-scope-tag", value: selectedFeedbackTag, onChange: (e) => setSelectedFeedbackTag(e.target.value), disabled: isSubmittingComment, className: "w-full cursor-pointer rounded-lg bg-slate-900/80 px-2.5 py-1.5 text-xs text-slate-100 ring-1 ring-inset ring-slate-600 focus:outline-none focus:ring-2 focus:ring-sky-500/60 disabled:cursor-not-allowed disabled:opacity-50", children: selectedComponent.tags.map((t, ti) => (_jsx("option", { value: t, children: t }, `${t}-${ti}`))) })] })), error && _jsx("div", { className: "mt-2 text-xs text-rose-300", children: error })] })), sessionActive && !isReviewMode && !sessionUploadComplete && (_jsxs("div", { className: "flex flex-col gap-2 rounded-xl bg-white/5 p-3 ring-1 ring-inset ring-white/10", children: [_jsxs("div", { className: "inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-slate-300", children: [_jsx(FontAwesomeIcon, { icon: faMessage, className: "h-3 w-3 text-slate-400" }), "Describe the change you want"] }), _jsx("textarea", { ref: descriptionRef, value: commentText, onChange: (e) => setCommentText(e.target.value), onPaste: handleDescriptionPaste, onKeyDown: handleDescriptionKeyDown, disabled: isSubmittingComment, placeholder: `e.g. Make this button larger, change the color to blue...\n\nOr paste an image from the clipboard.`, className: "min-h-[80px] w-full rounded-lg bg-slate-900/60 px-3 py-2 text-xs text-slate-100 ring-1 ring-inset ring-slate-600 placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-sky-500/60 disabled:cursor-not-allowed disabled:opacity-60", rows: 3 }), _jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2", children: [_jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs font-medium text-slate-300", children: [_jsx(FontAwesomeIcon, { icon: faImage, className: "h-3 w-3 text-slate-500" }), "Include screenshots:"] }), _jsxs("label", { className: "flex cursor-pointer items-center gap-1.5 rounded-lg px-2 py-1 text-xs font-medium text-slate-200 transition-colors hover:bg-slate-700/50", children: [_jsx("input", { type: "checkbox", checked: includeViewportScreenshot, disabled: isSubmittingComment, onChange: (e) => setIncludeViewportScreenshot(e.target.checked), className: "rounded border-slate-600 bg-slate-800 text-sky-500 focus:ring-sky-500 disabled:opacity-50" }), "Page"] }), _jsxs("label", { className: `flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs font-medium transition-colors hover:bg-slate-700/50 ${selectedComponentId
+                                                    ? 'cursor-pointer text-slate-200'
+                                                    : 'cursor-not-allowed text-slate-500'}`, children: [_jsx("input", { type: "checkbox", checked: includeComponentScreenshot, disabled: !selectedComponentId || isSubmittingComment, onChange: (e) => setIncludeComponentScreenshot(e.target.checked), className: "rounded border-slate-600 bg-slate-800 text-sky-500 focus:ring-sky-500 disabled:opacity-50" }), "Component"] }), _jsxs("label", { className: `inline-flex items-center gap-1.5 rounded-lg bg-slate-700 px-2.5 py-1.5 text-xs font-medium text-slate-200 ${isSubmittingComment
+                                                    ? 'cursor-not-allowed opacity-50'
+                                                    : 'cursor-pointer transition-colors hover:bg-slate-600'}`, children: [_jsx(FontAwesomeIcon, { icon: faPaperclip, className: "h-3 w-3 opacity-80" }), "Attach file", _jsx("input", { type: "file", accept: "image/*,.pdf", className: "hidden", disabled: isSubmittingComment, onChange: handleFileAttach })] })] }), attachments.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: attachments.map((a, i) => (_jsxs("div", { className: "flex items-center gap-1 rounded bg-slate-800 px-2 py-1 text-[10px]", children: [_jsx(FontAwesomeIcon, { icon: a.type === 'screenshot' ? faCamera : faPaperclip, className: "h-3 w-3 text-slate-400" }), a.filename ?? 'file', _jsx("button", { type: "button", onClick: () => removeAttachment(i), disabled: isSubmittingComment, className: "cursor-pointer p-0.5 text-rose-400 transition-colors hover:text-rose-300 disabled:pointer-events-none disabled:opacity-50", "aria-label": "Remove attachment", children: _jsx(FontAwesomeIcon, { icon: faXmark, className: "h-3 w-3" }) })] }, i))) })), _jsxs("div", { className: "flex flex-col items-start gap-0.5 self-start", children: [_jsx("button", { type: "button", onClick: handleSubmitComment, disabled: isAddCommentDisabled, className: "inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white ring-1 ring-inset ring-emerald-500 transition-colors hover:bg-emerald-500 disabled:cursor-not-allowed disabled:opacity-50", children: isSubmittingComment ? (_jsxs(_Fragment, { children: [_jsx(FontAwesomeIcon, { icon: faSpinner, spin: true, className: "h-3.5 w-3.5" }), "Adding\u2026"] })) : (_jsxs(_Fragment, { children: [_jsx(FontAwesomeIcon, { icon: faPlus, className: "h-3.5 w-3.5" }), "Add comment"] })) }), !isSubmittingComment && (_jsx("span", { className: "pl-0.5 text-[9px] font-semibold uppercase tracking-wide text-slate-500", children: "Press enter" }))] })] }))] })), _jsxs("div", { className: "flex min-h-0 min-w-0 flex-col pr-2", children: [_jsxs("div", { className: "mb-2 inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-slate-300", children: [_jsx(FontAwesomeIcon, { icon: faComments, className: "h-3 w-3 text-slate-500" }), "Comments (", comments.length, ")"] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto rounded-xl bg-slate-950/60 p-3 ring-1 ring-inset ring-white/10", children: comments.length === 0 ? (_jsx("div", { className: "text-[11px] text-slate-300 italic", children: "No comments yet." })) : (_jsx("div", { className: "flex flex-col gap-2", children: displayedComments.map((c, index) => {
+                                        const showPageHeading = index === 0 ||
+                                            feedbackPageGroupKey(displayedComments[index - 1]) !==
+                                                feedbackPageGroupKey(c);
+                                        const pageNum = feedbackPageOneBasedIndex(feedbackFlowJson, c);
+                                        return (_jsxs(Fragment, { children: [showPageHeading && (_jsxs("div", { className: `flex min-w-0 flex-wrap items-center gap-1 font-mono text-[10px] font-semibold ${index > 0 ? 'mt-3 border-t border-white/10 pt-3' : ''}`, children: [pageNum != null ? (_jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 text-slate-400", children: [_jsx(FontAwesomeIcon, { icon: faFileLines, className: "h-2.5 w-2.5 shrink-0" }), pageNum, "."] })) : null, _jsx("span", { className: "min-w-0 truncate text-slate-300", children: displayFeedbackPageKey(c.pageKey) })] })), _jsxs("div", { className: "relative flex gap-2 rounded-lg bg-white/5 p-2 text-xs text-slate-200 ring-1 ring-inset ring-white/10 transition-colors hover:bg-white/15 has-[.feedback-comment-thumb:hover]:bg-white/5! has-[.feedback-comment-thumb:focus-visible]:bg-white/5!", children: [_jsx("button", { type: "button", "aria-label": `Jump to comment: ${(c.comment || '(No description)').slice(0, 120)}`, onClick: () => handleJumpToComment(c), className: "absolute inset-0 z-0 cursor-pointer rounded-lg border-0 bg-transparent p-0 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-sky-500/80" }), _jsxs("div", { className: "pointer-events-none relative z-1 min-w-0 flex-1 text-left text-inherit", children: [_jsx("div", { className: "font-medium text-slate-100 line-clamp-2", children: c.comment || '(No description)' }), _jsxs("div", { className: "mt-1 space-y-0.5 text-[10px] text-slate-400", children: [_jsxs("div", { children: [_jsx("span", { className: "font-medium text-slate-500", children: "Page" }), ' ', _jsx("span", { className: "font-mono text-slate-300", children: displayFeedbackPageKey(c.pageKey) })] }), (c.componentKey != null || c.componentId) && (_jsx("div", { children: c.componentKey != null ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "mr-2 font-medium text-sky-400", children: [pascalCaseToTitleCase(c.componentType ?? 'Component'), ":"] }), _jsx("span", { className: "font-mono text-white", children: c.componentKey })] })) : (_jsx("span", { className: "font-mono text-white", children: c.componentId })) })), c.feedbackTag ? (_jsxs("div", { children: [_jsx("span", { className: "font-medium text-slate-500", children: "Scope tag" }), ' ', _jsx("span", { className: "font-mono text-amber-200/90", children: c.feedbackTag })] })) : null] })] }), c.attachments && c.attachments.length > 0 && (_jsx("div", { className: "relative z-1 flex shrink-0 flex-row flex-wrap items-start justify-end gap-1.5 self-start", children: c.attachments.map((a, i) => isImageAttachmentData(a.data) ? (_jsx("button", { type: "button", onClick: (e) => {
+                                                                    e.stopPropagation();
+                                                                    openFeedbackAttachmentLightbox(c, i);
+                                                                }, className: "feedback-comment-thumb relative z-10 h-14 max-w-32 shrink-0 cursor-pointer overflow-hidden rounded border-0 p-0 ring-1 ring-inset ring-white/10 transition-opacity duration-150 hover:opacity-70 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/80", title: a.filename ? `View ${a.filename}` : 'View image', children: _jsx("img", { src: a.data, alt: a.filename ?? 'Attachment', className: "h-full w-full object-contain" }) }, i)) : (_jsx("div", { className: "pointer-events-none flex h-14 w-14 max-w-32 shrink-0 items-center justify-center rounded border border-white/10 bg-slate-800 text-slate-300", title: a.filename ?? 'File', children: _jsx(FontAwesomeIcon, { icon: a.type === 'screenshot' ? faCamera : faFile, className: "h-6 w-6" }) }, i))) }))] })] }, c.id));
+                                    }) })) })] })] })), confirmDialog && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", onClick: () => setConfirmDialog(null), onKeyDown: (e) => {
+                    if (e.key === 'Escape')
+                        setConfirmDialog(null);
+                }, children: _jsxs("div", { className: "w-full max-w-sm rounded-xl bg-slate-800 p-5 shadow-xl ring-1 ring-inset ring-white/10", onClick: (e) => e.stopPropagation(), children: [_jsx("h3", { className: "text-sm font-semibold text-slate-100", children: confirmDialog.title }), _jsx("p", { className: "mt-1 text-[11px] text-slate-400", children: confirmDialog.message }), _jsxs("div", { className: "mt-4 flex items-center justify-end gap-2", children: [_jsx("button", { type: "button", onClick: () => setConfirmDialog(null), className: "cursor-pointer rounded-lg bg-slate-700 px-3 py-1.5 text-xs font-semibold text-slate-300 ring-1 ring-inset ring-slate-600 hover:bg-slate-600 hover:text-white", children: "Cancel" }), _jsx("button", { type: "button", onClick: () => confirmDialog.onConfirm(), className: confirmDialog.variant === 'danger'
+                                        ? 'cursor-pointer rounded-lg bg-rose-600 px-3 py-1.5 text-xs font-semibold text-white ring-1 ring-inset ring-rose-500 hover:bg-rose-500'
+                                        : 'cursor-pointer rounded-lg bg-sky-600 px-3 py-1.5 text-xs font-semibold text-white ring-1 ring-inset ring-sky-500 hover:bg-sky-500', children: confirmDialog.confirmLabel })] })] }) })), _jsx(WorkbenchModalOverlay, { open: sharedSessionWelcomeOpen && !!loadedReview, onClose: closeSharedSessionWelcome, portalToWorkbenchShadow: true, "aria-labelledby": "shared-session-welcome-title", children: loadedReview && (_jsxs("div", { className: "w-full max-w-lg rounded-xl bg-slate-800 p-7 shadow-xl ring-1 ring-inset ring-white/10 sm:max-w-xl sm:p-8", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "flex items-start gap-4 sm:gap-5", children: [_jsx("div", { className: "grid h-11 w-11 shrink-0 place-items-center rounded-lg bg-purple-500/15 text-purple-300 ring-1 ring-inset ring-purple-400/25", children: _jsx(FontAwesomeIcon, { icon: faUserGroup, className: "h-5 w-5" }) }), _jsxs("div", { className: "min-w-0 flex-1 space-y-5", children: [_jsxs("div", { children: [_jsx("h3", { id: "shared-session-welcome-title", className: "text-sm font-semibold leading-snug text-slate-100 sm:text-base", children: "You're viewing a shared feedback session" }), _jsx("p", { className: "mt-3 max-w-prose text-[12px] leading-relaxed text-slate-400 sm:text-sm", children: "You've opened a link shared from some feedback that someone else left on this Embeddable." }), sharedSessionWelcomeStats.totalComments > 0 && (_jsxs(_Fragment, { children: [_jsxs("p", { className: "mt-3 max-w-prose text-[12px] leading-relaxed text-slate-400 sm:text-sm", children: ["This session has", ' ', _jsx("span", { className: "font-semibold text-slate-200", children: sharedSessionWelcomeStats.totalComments }), ' ', sharedSessionWelcomeStats.totalComments === 1 ? 'comment' : 'comments', ' ', "across", ' ', _jsx("span", { className: "font-semibold text-slate-200", children: sharedSessionWelcomeStats.pageCount }), ' ', sharedSessionWelcomeStats.pageCount === 1 ? 'page' : 'pages', "."] }), _jsxs("p", { className: "mt-2 max-w-prose text-[12px] leading-relaxed text-slate-400 sm:text-sm", children: ["We've started you on the first page with feedback \u2014", ' ', _jsx("code", { className: "rounded bg-slate-950/80 px-1.5 py-0.5 font-mono text-[11px] text-sky-200 sm:text-xs", children: sharedSessionWelcomeStats.firstPageKey }), ' ', "\u2014 which has", ' ', _jsx("span", { className: "font-semibold text-slate-200", children: sharedSessionWelcomeStats.commentsOnFirstPage }), ' ', sharedSessionWelcomeStats.commentsOnFirstPage === 1 ? 'comment' : 'comments', "."] })] }))] }), _jsxs("div", { className: "rounded-lg bg-slate-900/80 px-4 py-4 ring-1 ring-inset ring-white/10 sm:px-5 sm:py-5", children: [_jsx("div", { className: "text-[11px] font-medium uppercase tracking-wide text-slate-500", children: "Feedback Session" }), _jsx("div", { className: "mt-2 text-sm font-semibold text-slate-100 sm:text-base", children: loadedReview.title?.trim() ? loadedReview.title.trim() : 'Untitled session' }), _jsx("div", { className: "mt-2 text-[11px] text-slate-400 sm:text-xs", children: formatReviewDate(loadedReview.createdAt) })] })] })] }), _jsx("div", { className: "mt-8 flex justify-end sm:mt-9", children: _jsx("button", { ref: sharedSessionWelcomeDismissRef, type: "button", onClick: closeSharedSessionWelcome, className: "min-w-32 cursor-pointer rounded-lg bg-sky-600 px-6 py-2.5 text-sm font-semibold text-white ring-1 ring-inset ring-sky-500 transition-colors hover:bg-sky-500 sm:px-7 sm:py-3", children: "Got it" }) })] })) }), reviewTitleModalOpen && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", onClick: closeReviewTitleModal, onKeyDown: (e) => {
+                    if (e.key === 'Escape')
+                        closeReviewTitleModal();
+                }, children: _jsxs("div", { className: "w-full max-w-sm rounded-xl bg-slate-800 p-5 shadow-xl ring-1 ring-inset ring-white/10", onClick: (e) => e.stopPropagation(), children: [_jsx("h3", { className: "text-sm font-semibold text-slate-100", children: "Complete feedback review" }), _jsx("p", { className: "mt-1 text-[11px] text-slate-400", children: "Give this feedback session a title. It will be stored with the uploaded review." }), _jsx("input", { ref: reviewTitleInputRef, type: "text", value: reviewTitleInput, onChange: (e) => {
+                                setReviewTitleInput(e.target.value);
+                                if (reviewTitleError)
+                                    setReviewTitleError(null);
+                            }, onKeyDown: (e) => {
+                                if (e.key === 'Enter')
+                                    submitReviewTitleModal();
+                                if (e.key === 'Escape')
+                                    closeReviewTitleModal();
+                            }, placeholder: "Review title\u2026", className: "mt-3 w-full rounded-lg bg-slate-900 px-3 py-2 text-xs text-slate-100 ring-1 ring-inset ring-slate-600 placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-sky-500/60" }), reviewTitleError && (_jsx("div", { className: "mt-2 text-xs text-rose-300", children: reviewTitleError })), _jsxs("div", { className: "mt-4 flex items-center justify-end gap-2", children: [_jsx("button", { type: "button", onClick: closeReviewTitleModal, className: "cursor-pointer rounded-lg bg-slate-700 px-3 py-1.5 text-xs font-semibold text-slate-300 ring-1 ring-inset ring-slate-600 hover:bg-slate-600 hover:text-white", children: "Cancel" }), _jsx("button", { type: "button", onClick: submitReviewTitleModal, className: "cursor-pointer rounded-lg bg-sky-600 px-3 py-1.5 text-xs font-semibold text-white ring-1 ring-inset ring-sky-500 hover:bg-sky-500", children: "Complete review" })] })] }) })), _jsx(MediaLightbox, { open: mediaLightbox != null, onClose: () => setMediaLightbox(null), items: mediaLightbox?.items ?? [], initialIndex: mediaLightbox?.initialIndex ?? 0 })] }));
+}
+//# sourceMappingURL=FeedbackPanel.js.map