@sirendesign/markup 1.0.9 → 1.0.12

package/dist/index.esm.js

@@ -846,6 +846,7 @@ const initialState = {
     config: defaultConfig,
     currentUser: null,
     isAuthenticated: false,
+    viewportMode: null,
 };
 const useMarkupStore = create()(persist((set, get) => ({
     ...initialState,
@@ -853,6 +854,7 @@ const useMarkupStore = create()(persist((set, get) => ({
     setIsCapturing: (isCapturing) => set({ isCapturing }),
     setIsAnnotating: (isAnnotating) => set({ isAnnotating }),
     setCurrentScreenshot: (screenshot) => set({ currentScreenshot: screenshot }),
+    setAnnotations: (annotations) => set({ annotations }),
     addAnnotation: (annotation) => set((state) => ({
         annotations: [...state.annotations, annotation],
     })),
@@ -891,6 +893,7 @@ const useMarkupStore = create()(persist((set, get) => ({
         console.log('Store: Setting authenticated:', isAuthenticated);
         set({ isAuthenticated });
     },
+    setViewportMode: (mode) => set({ viewportMode: mode }),
     addComment: (feedbackId, comment) => set((state) => ({
         feedbackItems: state.feedbackItems.map((f) => f.id === feedbackId
             ? { ...f, comments: [...f.comments, comment], updatedAt: new Date().toISOString() }
@@ -8736,7 +8739,65 @@ var parseBackgroundColor = function (context, element, backgroundColorOverride)
         : defaultBackgroundColor;
 };
 
-async function captureScreenshot() {
+const identifyComponent = (element) => {
+    var _a, _b;
+    if (!element)
+        return undefined;
+    let current = element;
+    const depth = 5; // Search up 5 levels
+    for (let i = 0; i < depth; i++) {
+        if (!current)
+            break;
+        // 1. Check for data-component attribute (common pattern)
+        if (current.getAttribute('data-component')) {
+            return current.getAttribute('data-component') || undefined;
+        }
+        // 2. Check for data-testid
+        if (current.getAttribute('data-testid')) {
+            return current.getAttribute('data-testid') || undefined;
+        }
+        // 3. React DevTools internals (brittle, but sometimes works)
+        // @ts-ignore
+        const key = Object.keys(current).find(k => k.startsWith('__reactFiber$'));
+        if (key) {
+            // @ts-ignore
+            const fiber = current[key];
+            if ((_a = fiber === null || fiber === void 0 ? void 0 : fiber.type) === null || _a === void 0 ? void 0 : _a.displayName) {
+                return fiber.type.displayName;
+            }
+            if ((_b = fiber === null || fiber === void 0 ? void 0 : fiber.type) === null || _b === void 0 ? void 0 : _b.name) {
+                return fiber.type.name;
+            }
+        }
+        // 4. ID or specific classes
+        if (current.id)
+            return `#${current.id}`;
+        if (current.parentElement) {
+            current = current.parentElement;
+        }
+        else {
+            break;
+        }
+    }
+    return undefined;
+};
+const getElementInfo = (element) => {
+    if (!element)
+        return undefined;
+    const tagName = element.tagName.toLowerCase();
+    const classes = element.className && typeof element.className === 'string'
+        ? element.className.split(' ').filter(c => c.trim()).slice(0, 3).join(' ')
+        : '';
+    let info = `<${tagName}`;
+    if (element.id)
+        info += ` id="${element.id}"`;
+    if (classes)
+        info += ` class="${classes}"`;
+    info += '>';
+    return info;
+};
+
+async function captureScreenshot(clickElement) {
     try {
         // Hide the markup widget before capturing
         const widget = document.querySelector('[data-markup-widget]');
@@ -8749,6 +8810,12 @@ async function captureScreenshot() {
             scale: window.devicePixelRatio,
             logging: false,
             backgroundColor: null,
+            width: window.innerWidth,
+            height: window.innerHeight,
+            x: window.scrollX,
+            y: window.scrollY,
+            windowWidth: window.innerWidth,
+            windowHeight: window.innerHeight,
             ignoreElements: (element) => {
                 return element.hasAttribute('data-markup-widget');
             },
@@ -8764,7 +8831,20 @@ async function captureScreenshot() {
         throw error;
     }
 }
-function getPageMetadata() {
+const detectDeviceType = () => {
+    const width = window.innerWidth;
+    const userAgent = navigator.userAgent.toLowerCase();
+    // Check user agent for mobile/tablet indicators
+    const isMobileUA = /mobile|android|iphone|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
+    const isTabletUA = /tablet|ipad|playbook|silk|kindle/i.test(userAgent);
+    // Prioritize user agent, then fall back to screen width
+    if (isMobileUA && width < 768)
+        return 'mobile';
+    if (isTabletUA || (width >= 768 && width < 1024))
+        return 'tablet';
+    return 'desktop';
+};
+function getPageMetadata(clickElement) {
     return {
         url: window.location.href,
         title: document.title,
@@ -8773,6 +8853,9 @@ function getPageMetadata() {
         devicePixelRatio: window.devicePixelRatio,
         userAgent: navigator.userAgent,
         timestamp: new Date().toISOString(),
+        deviceType: detectDeviceType(),
+        componentName: clickElement ? identifyComponent(clickElement) : undefined,
+        elementInfo: clickElement ? getElementInfo(clickElement) : undefined,
     };
 }
 function getElementSelector(element) {
@@ -11442,6 +11525,7 @@ const UndoIcon = ({ className, ...props }) => (jsxs("svg", { className: classNam
 const CheckIcon = ({ className, ...props }) => (jsx("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: jsx("polyline", { points: "20 6 9 17 4 12" }) }));
 const TrashIcon = ({ className, ...props }) => (jsxs("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [jsx("polyline", { points: "3 6 5 6 21 6" }), jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })] }));
 const EditIcon = ({ className, ...props }) => (jsxs("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [jsx("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }), jsx("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })] }));
+const CopyIcon = ({ className, ...props }) => (jsxs("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] }));
 const InboxIcon = ({ className, ...props }) => (jsxs("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [jsx("polyline", { points: "22 12 16 12 14 15 10 15 8 12 2 12" }), jsx("path", { d: "M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" })] }));
 const SendIcon = ({ className, ...props }) => (jsxs("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })] }));
 const PlusIcon = ({ className, ...props }) => (jsxs("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }), jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })] }));
@@ -11454,6 +11538,9 @@ const UserIcon = ({ className, ...props }) => (jsxs("svg", { className: classNam
 const ZoomInIcon = ({ className, ...props }) => (jsxs("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [jsx("circle", { cx: "11", cy: "11", r: "8" }), jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }), jsx("line", { x1: "11", y1: "8", x2: "11", y2: "14" }), jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11" })] }));
 const CalendarIcon = ({ className, ...props }) => (jsxs("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10" })] }));
 const ChevronRightIcon = ({ className, ...props }) => (jsx("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: jsx("polyline", { points: "9 18 15 12 9 6" }) }));
+const DesktopIcon = ({ className, ...props }) => (jsxs("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }), jsx("line", { x1: "8", y1: "21", x2: "16", y2: "21" }), jsx("line", { x1: "12", y1: "17", x2: "12", y2: "21" })] }));
+const TabletIcon = ({ className, ...props }) => (jsxs("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", ry: "2" }), jsx("line", { x1: "12", y1: "18", x2: "12.01", y2: "18" })] }));
+const MobileIcon = ({ className, ...props }) => (jsxs("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [jsx("rect", { x: "7", y: "2", width: "10", height: "20", rx: "2", ry: "2" }), jsx("line", { x1: "12", y1: "18", x2: "12.01", y2: "18" })] }));
 
 const tools = [
     { id: 'pen', icon: PencilIcon, label: 'Draw' },
@@ -11770,22 +11857,43 @@ const AnnotationOverlay = ({ screenshot, onComplete, onCancel, }) => {
                     : 'Click and drag to annotate • Use tools above to switch modes' })] }), document.body);
 };
 
-const FeedbackForm = ({ onSubmit, onCancel, }) => {
+const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastClickedElement, lastClickedText, }) => {
     var _a, _b;
-    const { config, currentScreenshot, setCurrentScreenshot, annotations, clearAnnotations, setIsCapturing, isCapturing, currentUser, } = useMarkupStore();
-    const [title, setTitle] = useState("");
-    const [description, setDescription] = useState("");
-    const [priority, setPriority] = useState("medium");
-    const [feedbackType, setFeedbackType] = useState("general");
-    const [currentCopy, setCurrentCopy] = useState("");
-    const [newCopy, setNewCopy] = useState("");
-    const [selectedTags, setSelectedTags] = useState([]);
+    const { config, currentScreenshot, setCurrentScreenshot, annotations, setAnnotations, clearAnnotations, setIsCapturing, isCapturing, currentUser, } = useMarkupStore();
+    const [title, setTitle] = useState((initialData === null || initialData === void 0 ? void 0 : initialData.title) || "");
+    const [description, setDescription] = useState((initialData === null || initialData === void 0 ? void 0 : initialData.description) || "");
+    const [priority, setPriority] = useState((initialData === null || initialData === void 0 ? void 0 : initialData.priority) || "medium");
+    const [feedbackType, setFeedbackType] = useState((initialData === null || initialData === void 0 ? void 0 : initialData.type) || "general");
+    const [currentCopy, setCurrentCopy] = useState((initialData === null || initialData === void 0 ? void 0 : initialData.currentCopy) || "");
+    const [newCopy, setNewCopy] = useState((initialData === null || initialData === void 0 ? void 0 : initialData.newCopy) || "");
+    const [designMockup, setDesignMockup] = useState(initialData === null || initialData === void 0 ? void 0 : initialData.designMockup);
+    const [selectedTags, setSelectedTags] = useState((initialData === null || initialData === void 0 ? void 0 : initialData.tags) || []);
     const [isAnnotating, setIsAnnotating] = useState(false);
     const [isSubmitting, setIsSubmitting] = useState(false);
-    const [annotatedScreenshot, setAnnotatedScreenshot] = useState(null);
-    // Auto-capture selected text when component mounts
+    const [annotatedScreenshot, setAnnotatedScreenshot] = useState((initialData === null || initialData === void 0 ? void 0 : initialData.screenshot) || null);
+    // Screen recording states
+    const [isRecording, setIsRecording] = useState(false);
+    const [recordedVideo, setRecordedVideo] = useState(initialData === null || initialData === void 0 ? void 0 : initialData.screenRecording);
+    const [mediaRecorder, setMediaRecorder] = useState(null);
+    const [recordingStream, setRecordingStream] = useState(null);
+    // Load initial annotations into store if editing
+    useEffect(() => {
+        if (initialData === null || initialData === void 0 ? void 0 : initialData.annotations) {
+            setAnnotations(initialData.annotations);
+        }
+    }, [initialData, setAnnotations]);
+    // Auto-capture selected text when component mounts (only if creating new)
     useEffect(() => {
         var _a;
+        if (initialData)
+            return;
+        // First check if user clicked on text element
+        if (lastClickedText && lastClickedText.length > 0) {
+            setCurrentCopy(lastClickedText);
+            setFeedbackType("copy-amendment");
+            return;
+        }
+        // Fallback to selected text
         const selectedText = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString().trim();
         if (selectedText &&
             selectedText.length > 0 &&
@@ -11793,7 +11901,7 @@ const FeedbackForm = ({ onSubmit, onCancel, }) => {
             setCurrentCopy(selectedText);
             setFeedbackType("copy-amendment");
         }
-    }, []);
+    }, [initialData, lastClickedText]);
     const handleCaptureScreenshot = async () => {
         try {
             setIsCapturing(true);
@@ -11808,6 +11916,57 @@ const FeedbackForm = ({ onSubmit, onCancel, }) => {
             setIsCapturing(false);
         }
     };
+    const handleStartRecording = async () => {
+        try {
+            const stream = await navigator.mediaDevices.getDisplayMedia({
+                video: { mediaSource: 'screen' },
+                audio: false,
+            });
+            setRecordingStream(stream);
+            const recorder = new MediaRecorder(stream, {
+                mimeType: 'video/webm;codecs=vp8',
+            });
+            const chunks = [];
+            recorder.ondataavailable = (e) => {
+                if (e.data.size > 0) {
+                    chunks.push(e.data);
+                }
+            };
+            recorder.onstop = () => {
+                const blob = new Blob(chunks, { type: 'video/webm' });
+                // Convert blob to base64 data URL for storage
+                const reader = new FileReader();
+                reader.onloadend = () => {
+                    const base64data = reader.result;
+                    setRecordedVideo(base64data);
+                };
+                reader.readAsDataURL(blob);
+                // Stop all tracks
+                stream.getTracks().forEach(track => track.stop());
+                setRecordingStream(null);
+            };
+            recorder.start();
+            setMediaRecorder(recorder);
+            setIsRecording(true);
+        }
+        catch (error) {
+            console.error('Failed to start recording:', error);
+            alert('Screen recording is not supported or permission was denied.');
+        }
+    };
+    const handleStopRecording = () => {
+        if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+            mediaRecorder.stop();
+            setIsRecording(false);
+        }
+    };
+    const handleDeleteRecording = () => {
+        setRecordedVideo(undefined);
+        if (recordingStream) {
+            recordingStream.getTracks().forEach(track => track.stop());
+            setRecordingStream(null);
+        }
+    };
     const handleAnnotationComplete = (newAnnotations, screenshot) => {
         setAnnotatedScreenshot(screenshot);
         setIsAnnotating(false);
@@ -11830,6 +11989,23 @@ const FeedbackForm = ({ onSubmit, onCancel, }) => {
     const toggleTag = (tag) => {
         setSelectedTags((prev) => prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]);
     };
+    const priorityColors = {
+        low: "bg-brand-green/30 text-gray-700",
+        medium: "bg-brand-blue/50 text-gray-800",
+        high: "bg-brand-pink/30 text-gray-800",
+        critical: "bg-brand-pink text-gray-800",
+    };
+    const handleMockupUpload = (e) => {
+        var _a;
+        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                setDesignMockup(reader.result);
+            };
+            reader.readAsDataURL(file);
+        }
+    };
     const handleSubmit = async (e) => {
         var _a, _b, _c, _d;
         e.preventDefault();
@@ -11839,7 +12015,7 @@ const FeedbackForm = ({ onSubmit, onCancel, }) => {
             return;
         setIsSubmitting(true);
         const feedback = {
-            id: generateId(),
+            id: (initialData === null || initialData === void 0 ? void 0 : initialData.id) || generateId(),
             type: feedbackType,
             title: title.trim() || (feedbackType === "copy-amendment" ? "Copy Amendment" : ""),
             description: description.trim(),
@@ -11849,19 +12025,22 @@ const FeedbackForm = ({ onSubmit, onCancel, }) => {
             newCopy: feedbackType === "copy-amendment" ? newCopy.trim() : undefined,
             screenshot: annotatedScreenshot || currentScreenshot || undefined,
             annotations: annotations,
-            status: "open",
+            status: (initialData === null || initialData === void 0 ? void 0 : initialData.status) || "open",
             priority,
-            pageMetadata: getPageMetadata(),
-            createdAt: new Date().toISOString(),
+            pageMetadata: (initialData === null || initialData === void 0 ? void 0 : initialData.pageMetadata) || getPageMetadata(lastClickedElement || undefined),
+            createdAt: (initialData === null || initialData === void 0 ? void 0 : initialData.createdAt) || new Date().toISOString(),
             updatedAt: new Date().toISOString(),
-            createdBy: currentUser || {
+            createdBy: (initialData === null || initialData === void 0 ? void 0 : initialData.createdBy) || currentUser || {
                 id: ((_a = config.user) === null || _a === void 0 ? void 0 : _a.id) || "anonymous",
                 name: ((_b = config.user) === null || _b === void 0 ? void 0 : _b.name) || "Anonymous",
                 email: ((_c = config.user) === null || _c === void 0 ? void 0 : _c.email) || "",
                 role: ((_d = config.user) === null || _d === void 0 ? void 0 : _d.role) || "default",
             },
-            comments: [],
+            comments: (initialData === null || initialData === void 0 ? void 0 : initialData.comments) || [],
             tags: selectedTags,
+            sessionEvents: getSessionEvents ? getSessionEvents() : undefined,
+            designMockup,
+            screenRecording: recordedVideo,
         };
         try {
             if (config.onSubmit) {
@@ -11891,7 +12070,9 @@ const FeedbackForm = ({ onSubmit, onCancel, }) => {
                             { id: "copy-amendment", label: "Copy Change" },
                         ].map((type) => (jsx("div", { onClick: () => setFeedbackType(type.id), className: cn("flex-1 py-2 px-3 rounded-xl text-xs font-medium cursor-pointer transition-all text-center", feedbackType === type.id
                                 ? "bg-[#C2D1D9] text-black shadow-md shadow-[#C2D1D9]/30"
-                                : "bg-gray-100 text-gray-700 hover:bg-gray-200 hover:shadow-sm"), children: type.label }, type.id))) })] }), feedbackType === "copy-amendment" && (jsxs(Fragment, { children: [jsxs("div", { className: "mb-5", children: [jsx("label", { className: "block text-sm font-semibold mb-2 text-gray-800", children: "Current Copy" }), jsx("textarea", { placeholder: "Select text on page or paste current copy here...", value: currentCopy, onChange: (e) => setCurrentCopy(e.target.value), className: "w-full px-4 py-3 bg-red-50 border border-red-200 rounded-xl text-sm min-h-[80px] resize-y focus:outline-none focus:bg-white focus:border-red-500 focus:shadow-lg focus:shadow-red-500/10 transition-all" })] }), jsxs("div", { className: "mb-5", children: [jsx("label", { className: "block text-sm font-semibold mb-2 text-gray-800", children: "New Copy *" }), jsx("textarea", { placeholder: "Enter the replacement text...", value: newCopy, onChange: (e) => setNewCopy(e.target.value), required: feedbackType === "copy-amendment", className: "w-full px-4 py-3 bg-green-50 border border-green-200 rounded-xl text-sm min-h-[80px] resize-y focus:outline-none focus:bg-white focus:border-green-500 focus:shadow-lg focus:shadow-green-500/10 transition-all" })] })] })), feedbackType !== "copy-amendment" && (jsxs("div", { className: "mb-5", children: [jsx("label", { className: "block text-sm font-semibold mb-2 text-gray-800", children: "Title *" }), jsx("input", { type: "text", placeholder: "Brief description of the issue", value: title, onChange: (e) => setTitle(e.target.value), required: true, className: "w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:bg-white focus:border-[#C2D1D9] focus:shadow-lg focus:shadow-[#C2D1D9]/10 transition-all" })] })), feedbackType !== "copy-amendment" && (jsxs("div", { className: "mb-5", children: [jsx("label", { className: "block text-sm font-semibold mb-2 text-gray-800", children: "Description" }), jsx("textarea", { placeholder: "Provide more details about the issue...", value: description, onChange: (e) => setDescription(e.target.value), className: "w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm min-h-[100px] resize-y focus:outline-none focus:bg-white focus:border-[#C2D1D9] focus:shadow-lg focus:shadow-[#C2D1D9]/10 transition-all" })] })), annotatedScreenshot || currentScreenshot ? (jsxs("div", { className: "relative rounded-xl overflow-hidden shadow-md mb-5 group", children: [jsx("img", { src: annotatedScreenshot || currentScreenshot || "", alt: "Screenshot", className: "w-full block" }), jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" }), jsxs("div", { className: "absolute top-3 right-3 flex gap-2", children: [jsxs("button", { type: "button", onClick: handleEditScreenshot, className: "bg-white text-gray-700 border-none px-3 py-1.5 rounded-lg cursor-pointer text-xs font-medium flex items-center gap-1.5 hover:bg-gray-100 shadow-lg transition-all", children: [jsx(EditIcon, { className: "w-3.5 h-3.5" }), " Edit"] }), jsxs("button", { type: "button", onClick: handleRemoveScreenshot, className: "bg-white text-red-600 border-none px-3 py-1.5 rounded-lg cursor-pointer text-xs font-medium flex items-center gap-1.5 hover:bg-red-50 shadow-lg transition-all", children: [jsx(TrashIcon, { className: "w-3.5 h-3.5" }), " Remove"] })] })] })) : (jsx("div", { onClick: handleCaptureScreenshot, className: "w-full p-4 bg-white border-2 border-dashed border-gray-300 rounded-xl cursor-pointer flex items-center justify-center gap-2.5 text-gray-600 text-sm font-medium mb-5 hover:border-indigo-400 hover:text-indigo-600 hover:bg-indigo-50 hover:shadow-md transition-all disabled:opacity-50 disabled:cursor-not-allowed", children: isCapturing ? (jsxs(Fragment, { children: [jsx("span", { className: "w-5 h-5 border-2 border-indigo-200 border-t-indigo-600 rounded-full animate-spin" }), "Capturing..."] })) : (jsxs(Fragment, { children: [jsx(CameraIcon, { className: "w-5 h-5" }), " Capture Screenshot"] })) })), config.availableTags && config.availableTags.length > 0 && (jsxs("div", { className: "mb-5", children: [jsx("label", { className: "block text-sm font-semibold mb-2 text-gray-800", children: "Tags" }), jsx("div", { className: "flex flex-wrap gap-2", children: config.availableTags.map((tag) => (jsx("div", { onClick: () => toggleTag(tag), className: cn("px-3 py-1.5 rounded-full text-xs font-medium cursor-pointer transition-all", selectedTags.includes(tag)
+                                : "bg-gray-100 text-gray-700 hover:bg-gray-200 hover:shadow-sm"), children: type.label }, type.id))) })] }), feedbackType === "copy-amendment" && (jsxs(Fragment, { children: [jsxs("div", { className: "mb-5", children: [jsx("label", { className: "block text-sm font-semibold mb-2 text-gray-800", children: "Current Copy" }), jsx("textarea", { placeholder: "Select text on page or paste current copy here...", value: currentCopy, onChange: (e) => setCurrentCopy(e.target.value), className: "w-full px-4 py-3 bg-red-50 border border-red-200 rounded-xl text-sm min-h-[80px] resize-y focus:outline-none focus:bg-white focus:border-red-500 focus:shadow-lg focus:shadow-red-500/10 transition-all" })] }), jsxs("div", { className: "mb-5", children: [jsx("label", { className: "block text-sm font-semibold mb-2 text-gray-800", children: "New Copy *" }), jsx("textarea", { placeholder: "Enter the replacement text...", value: newCopy, onChange: (e) => setNewCopy(e.target.value), required: feedbackType === "copy-amendment", className: "w-full px-4 py-3 bg-green-50 border border-green-200 rounded-xl text-sm min-h-[80px] resize-y focus:outline-none focus:bg-white focus:border-green-500 focus:shadow-lg focus:shadow-green-500/10 transition-all" })] })] })), feedbackType !== "copy-amendment" && (jsxs("div", { className: "mb-5", children: [jsx("label", { className: "block text-sm font-semibold mb-2 text-gray-800", children: "Title *" }), jsx("input", { type: "text", placeholder: "Brief description of the issue", value: title, onChange: (e) => setTitle(e.target.value), required: true, className: "w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:bg-white focus:border-[#C2D1D9] focus:shadow-lg focus:shadow-[#C2D1D9]/10 transition-all" })] })), feedbackType !== "copy-amendment" && (jsxs("div", { className: "mb-5", children: [jsx("label", { className: "block text-sm font-semibold mb-2 text-gray-800", children: "Description" }), jsx("textarea", { placeholder: "Provide more details about the issue...", value: description, onChange: (e) => setDescription(e.target.value), required: true, className: "w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:bg-white focus:border-[#C2D1D9] focus:shadow-lg focus:shadow-[#C2D1D9]/10 transition-all min-h-[100px] resize-y" })] })), jsxs("div", { className: "mb-5", children: [jsx("label", { className: "block text-sm font-semibold mb-2 text-gray-800", children: "Priority" }), jsx("div", { className: "flex gap-2", children: Object.keys(priorityColors).map((p) => (jsx("div", { onClick: () => setPriority(p), className: cn("flex-1 py-2 px-2 rounded-xl text-xs font-medium cursor-pointer transition-all text-center capitalize border border-transparent", priority === p
+                                ? cn(priorityColors[p], "border-transparent shadow-sm")
+                                : "bg-gray-100 text-gray-600 hover:bg-gray-200"), children: p }, p))) })] }), annotatedScreenshot || currentScreenshot ? (jsxs("div", { className: "relative rounded-xl overflow-hidden shadow-md mb-5 group", children: [jsx("img", { src: annotatedScreenshot || currentScreenshot || "", alt: "Screenshot", className: "w-full block" }), jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" }), jsxs("div", { className: "absolute top-3 right-3 flex gap-2", children: [jsxs("button", { type: "button", onClick: handleEditScreenshot, className: "bg-white text-gray-700 border-none px-3 py-1.5 rounded-lg cursor-pointer text-xs font-medium flex items-center gap-1.5 hover:bg-gray-100 shadow-lg transition-all", children: [jsx(EditIcon, { className: "w-3.5 h-3.5" }), " Edit"] }), jsxs("button", { type: "button", onClick: handleRemoveScreenshot, className: "bg-white text-red-600 border-none px-3 py-1.5 rounded-lg cursor-pointer text-xs font-medium flex items-center gap-1.5 hover:bg-red-50 shadow-lg transition-all", children: [jsx(TrashIcon, { className: "w-3.5 h-3.5" }), " Remove"] })] })] })) : (jsxs("div", { className: "flex gap-3 mb-5", children: [jsx("div", { onClick: handleCaptureScreenshot, className: "flex-1 p-4 bg-white border-2 border-dashed border-gray-300 rounded-xl cursor-pointer flex items-center justify-center gap-2.5 text-gray-600 text-sm font-medium hover:border-indigo-400 hover:text-indigo-600 hover:bg-indigo-50 hover:shadow-md transition-all disabled:opacity-50 disabled:cursor-not-allowed", children: isCapturing ? (jsxs(Fragment, { children: [jsx("span", { className: "w-5 h-5 border-2 border-indigo-200 border-t-indigo-600 rounded-full animate-spin" }), "Capturing..."] })) : (jsxs(Fragment, { children: [jsx(CameraIcon, { className: "w-5 h-5" }), " Screenshot"] })) }), jsx("div", { onClick: isRecording ? handleStopRecording : handleStartRecording, className: "flex-1 p-4 bg-white border-2 border-dashed border-gray-300 rounded-xl cursor-pointer flex items-center justify-center gap-2.5 text-gray-600 text-sm font-medium hover:border-red-400 hover:text-red-600 hover:bg-red-50 hover:shadow-md transition-all disabled:opacity-50 disabled:cursor-not-allowed", children: isRecording ? (jsxs(Fragment, { children: [jsx("span", { className: "w-2.5 h-2.5 bg-red-600 rounded-sm animate-pulse" }), "Stop Recording"] })) : (jsxs(Fragment, { children: [jsxs("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [jsx("circle", { cx: "12", cy: "12", r: "10", strokeWidth: "2" }), jsx("circle", { cx: "12", cy: "12", r: "4", fill: "currentColor" })] }), "Record Screen"] })) })] })), recordedVideo && (jsxs("div", { className: "mb-5 relative rounded-xl overflow-hidden shadow-md border border-gray-200", children: [jsx("video", { src: recordedVideo, controls: true, className: "w-full h-auto" }), jsx("button", { type: "button", onClick: handleDeleteRecording, className: "absolute top-2 right-2 bg-white text-red-500 p-1.5 rounded-lg shadow hover:bg-gray-100 cursor-pointer border-none", children: jsx(TrashIcon, { className: "w-3.5 h-3.5" }) })] })), jsxs("div", { className: "mb-5", children: [jsx("label", { className: "block text-sm font-semibold mb-2 text-gray-800", children: "Design Mockup" }), designMockup ? (jsxs("div", { className: "relative rounded-xl overflow-hidden shadow-md group border border-gray-200", children: [jsx("img", { src: designMockup, className: "w-full h-32 object-cover", alt: "Mockup" }), jsx("button", { type: "button", onClick: () => setDesignMockup(undefined), className: "absolute top-2 right-2 bg-white text-red-500 p-1.5 rounded-lg shadow hover:bg-gray-100 cursor-pointer border-none", children: jsx(TrashIcon, { className: "w-3.5 h-3.5" }) })] })) : (jsxs("div", { className: "border-2 border-dashed border-gray-200 rounded-xl p-4 bg-gray-50 flex items-center justify-center relative hover:bg-white hover:border-[#C2D1D9] transition-all", children: [jsx("input", { type: "file", accept: "image/*", onChange: handleMockupUpload, className: "absolute inset-0 opacity-0 cursor-pointer w-full h-full" }), jsxs("span", { className: "text-sm text-gray-500 flex items-center gap-2 font-medium", children: [jsx(PlusIcon, { className: "w-4 h-4" }), " Upload Mockup"] })] }))] }), config.availableTags && config.availableTags.length > 0 && (jsxs("div", { className: "mb-5", children: [jsx("label", { className: "block text-sm font-semibold mb-2 text-gray-800", children: "Tags" }), jsx("div", { className: "flex flex-wrap gap-2", children: config.availableTags.map((tag) => (jsx("div", { onClick: () => toggleTag(tag), className: cn("px-3 py-1.5 rounded-full text-xs font-medium cursor-pointer transition-all", selectedTags.includes(tag)
                                 ? "bg-[#C2D1D9] text-white shadow-md shadow-[#C2D1D9]/30"
                                 : "bg-gray-100 text-gray-700 hover:bg-gray-200 hover:shadow-sm"), children: tag }, tag))) })] })), jsxs("div", { className: "flex gap-3 mt-6 pt-6 border-t border-gray-100", children: [jsx("div", { onClick: onCancel, className: "flex-1 py-3 px-5 rounded-xl text-sm font-semibold cursor-pointer transition-all bg-gray-100 text-gray-700 hover:bg-gray-200 hover:shadow-md text-center", children: ((_a = config.labels) === null || _a === void 0 ? void 0 : _a.cancelButton) || "Cancel" }), jsx("div", { onClick: (e) => {
                             const isValid = feedbackType === "copy-amendment" ? newCopy.trim() : title.trim();
@@ -11910,7 +12091,7 @@ const FeedbackForm = ({ onSubmit, onCancel, }) => {
                             backgroundColor: (feedbackType === "copy-amendment" ? !newCopy.trim() : !title.trim()) || isSubmitting
                                 ? "#9ca3af"
                                 : "green-500",
-                        }, children: isSubmitting ? (jsx("span", { className: "w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin mx-auto block" })) : (((_b = config.labels) === null || _b === void 0 ? void 0 : _b.submitButton) || "Submit Feedback") })] })] }));
+                        }, children: isSubmitting ? (jsx("span", { className: "w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin mx-auto block" })) : (((_b = config.labels) === null || _b === void 0 ? void 0 : _b.submitButton) || (initialData ? "Update Feedback" : "Submit Feedback")) })] })] }));
 };
 
 const statusOptions$1 = [
@@ -11921,16 +12102,16 @@ const statusOptions$1 = [
     { value: "closed", label: "Closed" },
 ];
 const priorityColors$1 = {
-    low: "bg-gray-100 text-gray-700",
-    medium: "bg-yellow-100 text-yellow-800",
-    high: "bg-orange-100 text-orange-800",
-    critical: "bg-red-100 text-red-800",
+    low: "bg-brand-green/30 text-gray-700",
+    medium: "bg-brand-blue/50 text-gray-800",
+    high: "bg-brand-pink/30 text-gray-800",
+    critical: "bg-brand-pink text-gray-800",
 };
 const statusColors = {
-    open: "bg-blue-100 text-blue-800",
-    "in-progress": "bg-purple-100 text-purple-800",
-    resolved: "bg-green-100 text-green-800",
-    closed: "bg-gray-100 text-gray-600",
+    open: "bg-brand-blue/50 text-gray-800",
+    "in-progress": "bg-yellow-100 text-gray-800",
+    resolved: "bg-brand-green/50 text-gray-900",
+    closed: "bg-brand-pink/30 text-gray-800",
 };
 const FeedbackList = ({ feedbackItems, onSelectFeedback, }) => {
     const { config } = useMarkupStore();
@@ -11968,7 +12149,10 @@ const FeedbackList = ({ feedbackItems, onSelectFeedback, }) => {
     }, [feedbackItems, statusFilter, sortBy]);
     return (jsxs("div", { className: "flex flex-col h-full", children: [jsxs("div", { className: "flex gap-2 pb-4 mb-4", children: [jsxs("div", { className: "relative flex-1", children: [jsx(FilterIcon, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" }), jsx("select", { value: statusFilter, onChange: (e) => setStatusFilter(e.target.value), className: "w-full pl-9 pr-3 py-2.5 bg-gray-50 border border-gray-200 rounded-xl text-xs font-medium appearance-none focus:outline-none focus:bg-white focus:border-[#C2D1D9] focus:shadow-lg focus:shadow-[#C2D1D9]/10 transition-all", children: statusOptions$1.map((option) => (jsx("option", { value: option.value, children: option.label }, option.value))) })] }), jsxs("div", { className: "relative flex-1", children: [jsx(CalendarIcon, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" }), jsxs("select", { value: sortBy, onChange: (e) => setSortBy(e.target.value), className: "w-full pl-9 pr-3 py-2.5 bg-gray-50 border border-gray-200 rounded-xl text-xs font-medium appearance-none focus:outline-none focus:bg-white focus:border-[#C2D1D9] focus:shadow-lg focus:shadow-[#C2D1D9]/10 transition-all", children: [jsx("option", { value: "newest", children: "Newest First" }), jsx("option", { value: "oldest", children: "Oldest First" }), jsx("option", { value: "priority", children: "Priority" })] })] })] }), jsx("div", { className: "flex-1 overflow-y-auto -mx-1 px-1", children: filteredAndSortedItems.length === 0 ? (jsxs("div", { className: "flex flex-col items-center justify-center py-10 text-gray-400", children: [jsx(InboxIcon, { className: "w-12 h-12 mb-3 opacity-50" }), jsx("p", { className: "text-sm font-medium text-gray-500", children: "No feedback items" }), jsx("p", { className: "text-xs text-gray-400 mt-1", children: statusFilter !== "all"
                                 ? "Try changing the filter"
-                                : "Be the first to add feedback!" })] })) : (jsx("div", { className: "flex flex-col gap-3", children: filteredAndSortedItems.map((item) => (jsxs("div", { onClick: () => onSelectFeedback(item), className: "w-full p-4 bg-white rounded-xl border border-gray-200 cursor-pointer text-left transition-all hover:shadow-lg hover:shadow-gray-200 hover:border-gray-300", children: [jsxs("div", { className: "flex items-start justify-between gap-2 mb-2", children: [jsx("h4", { className: "text-sm font-semibold text-gray-900 m-0 flex-1 line-clamp-2", children: item.title }), jsx(ChevronRightIcon, { className: "w-4 h-4 text-gray-400 flex-shrink-0 mt-0.5" })] }), item.description && (jsx("p", { className: "text-xs text-gray-600 m-0 mb-3 line-clamp-2", children: item.description })), jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [jsx("span", { className: cn("px-2.5 py-1 rounded-lg text-[10px] font-semibold uppercase tracking-wide", statusColors[item.status]), children: item.status.replace("-", " ") }), jsx("span", { className: cn("px-2.5 py-1 rounded-lg text-[10px] font-semibold uppercase tracking-wide", priorityColors$1[item.priority]), children: item.priority }), item.createdBy && (jsxs("span", { className: "text-[10px] text-gray-600 font-medium", children: ["by ", item.createdBy.name] })), jsx("span", { className: "text-[10px] text-gray-500 ml-auto font-medium", children: formatDate(item.createdAt) })] }), item.tags && item.tags.length > 0 && (jsxs("div", { className: "flex flex-wrap gap-1.5 mt-3", children: [item.tags.slice(0, 3).map((tag) => (jsx("span", { className: "px-2 py-1 bg-gray-100 text-gray-700 rounded-md text-[10px] font-medium", children: tag }, tag))), item.tags.length > 3 && (jsxs("span", { className: "px-2 py-1 text-gray-500 text-[10px] font-medium", children: ["+", item.tags.length - 3, " more"] }))] }))] }, item.id))) })) }), feedbackItems.length > 0 && (jsxs("div", { className: "pt-3 mt-3 border-t border-gray-200 text-xs text-gray-400 text-center", children: ["Showing ", filteredAndSortedItems.length, " of", " ", feedbackItems.length, " items"] }))] }));
+                                : "Be the first to add feedback!" })] })) : (jsx("div", { className: "flex flex-col gap-3", children: filteredAndSortedItems.map((item) => {
+                        var _a;
+                        return (jsxs("div", { onClick: () => onSelectFeedback(item), className: "w-full p-4 bg-white rounded-xl border border-gray-200 cursor-pointer text-left transition-all hover:shadow-lg hover:shadow-gray-200 hover:border-gray-300", children: [jsxs("div", { className: "flex items-start justify-between gap-2 mb-2", children: [jsxs("div", { className: "flex items-center gap-2 flex-1", children: [jsx("h4", { className: "text-sm font-semibold text-gray-900 m-0 flex-1 line-clamp-2", children: item.title }), ((_a = item.pageMetadata) === null || _a === void 0 ? void 0 : _a.deviceType) && (jsxs("div", { className: "flex-shrink-0", children: [item.pageMetadata.deviceType === 'desktop' && (jsx(DesktopIcon, { className: "w-4 h-4 text-gray-400", title: "Desktop" })), item.pageMetadata.deviceType === 'tablet' && (jsx(TabletIcon, { className: "w-4 h-4 text-gray-400", title: "Tablet" })), item.pageMetadata.deviceType === 'mobile' && (jsx(MobileIcon, { className: "w-4 h-4 text-gray-400", title: "Mobile" }))] }))] }), jsx(ChevronRightIcon, { className: "w-4 h-4 text-gray-400 flex-shrink-0 mt-0.5" })] }), item.description && (jsx("p", { className: "text-xs text-gray-600 m-0 mb-3 line-clamp-2", children: item.description })), jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [jsx("span", { className: cn("px-2.5 py-1 rounded-lg text-[10px] font-semibold uppercase tracking-wide", statusColors[item.status]), children: item.status.replace("-", " ") }), jsx("span", { className: cn("px-2.5 py-1 rounded-lg text-[10px] font-semibold uppercase tracking-wide", priorityColors$1[item.priority]), children: item.priority }), item.createdBy && (jsxs("span", { className: "text-[10px] text-gray-600 font-medium", children: ["by ", item.createdBy.name] })), jsx("span", { className: "text-[10px] text-gray-500 ml-auto font-medium", children: formatDate(item.createdAt) })] }), item.tags && item.tags.length > 0 && (jsxs("div", { className: "flex flex-wrap gap-1.5 mt-3", children: [item.tags.slice(0, 3).map((tag) => (jsx("span", { className: "px-2 py-1 bg-gray-100 text-gray-700 rounded-md text-[10px] font-medium", children: tag }, tag))), item.tags.length > 3 && (jsxs("span", { className: "px-2 py-1 text-gray-500 text-[10px] font-medium", children: ["+", item.tags.length - 3, " more"] }))] }))] }, item.id));
+                    }) })) }), feedbackItems.length > 0 && (jsxs("div", { className: "pt-3 mt-3 border-t border-gray-200 text-xs text-gray-400 text-center", children: ["Showing ", filteredAndSortedItems.length, " of", " ", feedbackItems.length, " items"] }))] }));
 };
 
 const getDefaultsFromPostinstall = () => (undefined);
@@ -37111,6 +37295,7 @@ const subscribeFeedback = (projectId, callback) => {
     return onSnapshot(q, (snapshot) => {
         console.log('Firestore snapshot received:', snapshot.size, 'documents');
         const feedbackItems = snapshot.docs.map((doc) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             const data = doc.data();
             return {
                 id: doc.id,
@@ -37132,16 +37317,21 @@ const subscribeFeedback = (projectId, callback) => {
                     devicePixelRatio: 1,
                     userAgent: '',
                     timestamp: new Date().toISOString(),
+                    deviceType: 'desktop',
                 },
-                createdAt: data.createdAt.toDate().toISOString(),
-                updatedAt: data.createdAt.toDate().toISOString(),
+                createdAt: ((_c = (_b = (_a = data.createdAt) === null || _a === void 0 ? void 0 : _a.toDate) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.toISOString()) || new Date().toISOString(),
+                updatedAt: ((_f = (_e = (_d = data.updatedAt) === null || _d === void 0 ? void 0 : _d.toDate) === null || _e === void 0 ? void 0 : _e.call(_d)) === null || _f === void 0 ? void 0 : _f.toISOString()) || ((_j = (_h = (_g = data.createdAt) === null || _g === void 0 ? void 0 : _g.toDate) === null || _h === void 0 ? void 0 : _h.call(_g)) === null || _j === void 0 ? void 0 : _j.toISOString()) || new Date().toISOString(),
                 createdBy: data.createdBy || {
                     id: data.userId,
                     name: 'User',
                     email: '',
-                    role: 'client',
+                    role: 'default',
                 },
                 tags: data.tags || [],
+                sessionEvents: data.sessionEvents,
+                componentName: data.componentName,
+                designMockup: data.designMockup,
+                screenRecording: data.screenRecording,
             };
         });
         callback(feedbackItems);
@@ -37201,30 +37391,114 @@ const canDeleteFeedback = (currentUser, feedbackCreatorId) => {
     }
     return false;
 };
+/**
+ * Check if a user can edit/amend feedback
+ * Only the creator, developers, or admins can edit
+ */
+const canEditFeedback = (currentUser, feedbackCreatorId) => {
+    // Creator can edit their own feedback
+    if (currentUser.id === feedbackCreatorId) {
+        return true;
+    }
+    // Admins and developers can edit any feedback
+    if (currentUser.role === 'admin' || currentUser.role === 'developer') {
+        return true;
+    }
+    return false;
+};
 
 const statusOptions = [
-    { value: "open", label: "Open", color: "bg-blue-500" },
-    { value: "in-progress", label: "In Progress", color: "bg-purple-500" },
-    { value: "resolved", label: "Resolved", color: "bg-green-500" },
-    { value: "closed", label: "Closed", color: "bg-gray-500" },
+    { value: "open", label: "Open", color: "bg-brand-blue text-gray-900" },
+    {
+        value: "in-progress",
+        label: "In Progress",
+        color: "bg-yellow-100 text-gray-900",
+    },
+    {
+        value: "resolved",
+        label: "Resolved",
+        color: "bg-brand-green text-white",
+    },
+    {
+        value: "closed",
+        label: "Closed",
+        color: "bg-brand-pink text-gray-900",
+    },
 ];
 const priorityColors = {
-    low: "bg-gray-100 text-gray-700",
-    medium: "bg-yellow-100 text-yellow-800",
-    high: "bg-orange-100 text-orange-800",
-    critical: "bg-red-100 text-red-800",
+    low: "bg-brand-green/30 text-gray-700",
+    medium: "bg-brand-blue/50 text-gray-800",
+    high: "bg-brand-pink/30 text-gray-800",
+    critical: "bg-brand-pink text-gray-800",
 };
 const FeedbackDetail = ({ feedback: initialFeedback, onBack, onDelete, onUpdate, }) => {
-    var _a, _b;
+    var _a, _b, _c;
     const { config, updateFeedback: updateFeedback$1, currentUser } = useMarkupStore();
     const [feedback, setFeedback] = useState(initialFeedback);
     const [newComment, setNewComment] = useState("");
     const [isAddingComment, setIsAddingComment] = useState(false);
     const [showFullScreenshot, setShowFullScreenshot] = useState(false);
     const [copied, setCopied] = useState(false);
+    const [isEditing, setIsEditing] = useState(false);
+    // Feature 2 & 5 states
+    const [showReplay, setShowReplay] = useState(false);
+    const [showOverlay, setShowOverlay] = useState(false);
+    const [overlayOpacity, setOverlayOpacity] = useState(50);
+    // Parse session actions
+    const sessionActions = useMemo(() => {
+        if (!feedback.sessionEvents)
+            return null;
+        try {
+            return JSON.parse(feedback.sessionEvents);
+        }
+        catch (e) {
+            console.error("Failed to parse session events", e);
+            return null;
+        }
+    }, [feedback.sessionEvents]);
+    // Format timestamp
+    const formatTimestamp = (timestamp) => {
+        const date = new Date(timestamp);
+        return date.toLocaleTimeString('en-US', {
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+            hour12: false
+        });
+    };
+    // Get relative time
+    const getRelativeTime = (timestamp, baseTimestamp) => {
+        const diff = Math.floor((timestamp - baseTimestamp) / 1000);
+        if (diff === 0)
+            return 'start';
+        return `+${diff}s`;
+    };
     const isReadOnly = ((_a = config.user) === null || _a === void 0 ? void 0 : _a.role) === "default" || config.allowStatusChange === false;
-    // Check if current user can delete this feedback
-    const canDelete = currentUser ? canDeleteFeedback(currentUser, feedback.createdBy.id) : false;
+    // Check if current user can delete/edit this feedback
+    const canDelete = currentUser
+        ? canDeleteFeedback(currentUser, feedback.createdBy.id)
+        : false;
+    const canEdit = currentUser
+        ? canEditFeedback(currentUser, feedback.createdBy.id)
+        : false;
+    const handleEditSubmit = async (updatedFeedback) => {
+        setFeedback(updatedFeedback);
+        updateFeedback$1(updatedFeedback);
+        // Update in Firebase if initialized
+        try {
+            await updateFeedback(feedback.id, updatedFeedback);
+        }
+        catch (error) {
+            console.warn("Failed to update feedback in Firebase:", error);
+        }
+        if (onUpdate) {
+            onUpdate(updatedFeedback);
+        }
+        setIsEditing(false);
+    };
+    if (isEditing) {
+        return (jsxs("div", { className: "flex flex-col h-full", children: [jsx("div", { className: "flex items-center justify-between p-5 pb-3 mb-3 border-b border-gray-200", children: jsxs("div", { onClick: () => setIsEditing(false), className: "flex items-center gap-1.5 text-sm text-gray-600 bg-transparent border-none cursor-pointer hover:text-gray-900 transition-colors", children: [jsx(ArrowLeftIcon, { className: "w-4 h-4" }), "Cancel Editing"] }) }), jsx("div", { className: "flex-1 overflow-y-auto px-5", children: jsx(FeedbackForm, { initialData: feedback, onSubmit: handleEditSubmit, onCancel: () => setIsEditing(false) }) })] }));
+    }
     const handleCopy = async () => {
         const feedbackText = `
 📝 ${feedback.title}
@@ -37268,7 +37542,7 @@ ${feedback.comments && feedback.comments.length > 0
             await updateFeedback(feedback.id, { status: newStatus });
         }
         catch (error) {
-            console.warn('Failed to update status in Firebase:', error);
+            console.warn("Failed to update status in Firebase:", error);
         }
         if (config.onStatusChange) {
             await config.onStatusChange(feedback.id, newStatus);
@@ -37304,11 +37578,11 @@ ${feedback.comments && feedback.comments.length > 0
         // Update in Firebase if initialized
         try {
             await updateFeedback(feedback.id, {
-                comments: updatedFeedback.comments
+                comments: updatedFeedback.comments,
             });
         }
         catch (error) {
-            console.warn('Failed to add comment in Firebase:', error);
+            console.warn("Failed to add comment in Firebase:", error);
         }
         if (config.onCommentAdd) {
             await config.onCommentAdd(feedback.id, comment);
@@ -37327,7 +37601,7 @@ ${feedback.comments && feedback.comments.length > 0
             await deleteFeedback(feedback.id);
         }
         catch (error) {
-            console.warn('Failed to delete from Firebase:', error);
+            console.warn("Failed to delete from Firebase:", error);
         }
         if (config.onDelete) {
             await config.onDelete(feedback.id);
@@ -37336,22 +37610,28 @@ ${feedback.comments && feedback.comments.length > 0
             onDelete(feedback.id);
         }
     };
-    return (jsxs("div", { className: "flex flex-col h-full px-5", children: [jsxs("div", { className: "flex items-center justify-between pb-3 mb-3 border-b border-gray-200", children: [jsxs("div", { onClick: onBack, className: "flex items-center gap-1.5 text-sm text-gray-600 bg-transparent border-none cursor-pointer hover:text-gray-900 transition-colors", children: [jsx(ArrowLeftIcon, { className: "w-4 h-4" }), "Back"] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { onClick: handleCopy, className: "flex items-center gap-1.5 text-sm text-indigo-600 bg-transparent border-none cursor-pointer hover:text-indigo-700 transition-colors", children: copied ? (jsxs(Fragment, { children: [jsx(CheckIcon, { className: "w-4 h-4" }), "Copied!"] })) : (jsxs(Fragment, { children: [jsxs("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] }), "Copy"] })) }), canDelete && onDelete && (jsxs("div", { onClick: handleDelete, className: "flex items-center gap-1.5 text-sm text-red-600 bg-transparent border-none cursor-pointer hover:text-red-700 transition-colors", children: [jsx(TrashIcon, { className: "w-4 h-4" }), "Delete"] }))] })] }), jsxs("div", { className: "flex-1 overflow-y-auto pr-1", children: [jsxs("div", { className: "mb-4", children: [jsx("h3", { className: "text-base font-semibold text-gray-900 m-0 mb-2", children: feedback.title }), jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [feedback.type && (jsx("span", { className: cn("px-2 py-0.5 rounded-full text-[10px] font-medium uppercase", feedback.type === "copy-amendment"
-                                            ? "bg-purple-100 text-purple-800"
+    return (jsxs("div", { className: "flex flex-col h-full px-5", children: [jsxs("div", { className: "flex items-center justify-between pb-3 mb-3 border-b border-gray-200", children: [jsxs("div", { onClick: onBack, className: "flex items-center gap-1.5 text-sm text-gray-600 bg-transparent border-none cursor-pointer hover:text-gray-900 transition-colors", children: [jsx(ArrowLeftIcon, { className: "w-4 h-4" }), "Back"] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { onClick: handleCopy, className: "flex items-center gap-1.5 text-sm text-gray-600 bg-transparent border-none cursor-pointer hover:text-gray-900 transition-colors", children: copied ? (jsxs(Fragment, { children: [jsx(CheckIcon, { className: "w-4 h-4" }), "Copied!"] })) : (jsx(Fragment, { children: jsx(CopyIcon, { className: "w-4 h-4" }) })) }), canEdit && (jsx("div", { onClick: () => setIsEditing(true), className: "flex items-center gap-1.5 text-sm text-gray-600 bg-transparent border-none cursor-pointer hover:text-gray-900 transition-colors", children: jsx(EditIcon, { className: "w-4 h-4" }) })), canDelete && onDelete && (jsx("div", { onClick: handleDelete, className: "flex items-center gap-1.5 text-sm text-red-600 bg-transparent border-none cursor-pointer hover:text-red-700 transition-colors", children: jsx(TrashIcon, { className: "w-4 h-4" }) }))] })] }), jsxs("div", { className: "flex-1 overflow-y-auto pr-1", children: [jsxs("div", { className: "mb-4", children: [jsxs("div", { className: "flex items-start gap-2 mb-2", children: [jsx("h3", { className: "text-base font-semibold text-gray-900 m-0 flex-1", children: feedback.title }), ((_b = feedback.pageMetadata) === null || _b === void 0 ? void 0 : _b.deviceType) && (jsxs("div", { className: "flex-shrink-0 mt-0.5", children: [feedback.pageMetadata.deviceType === 'desktop' && (jsx(DesktopIcon, { className: "w-5 h-5 text-gray-500", title: "Desktop" })), feedback.pageMetadata.deviceType === 'tablet' && (jsx(TabletIcon, { className: "w-5 h-5 text-gray-500", title: "Tablet" })), feedback.pageMetadata.deviceType === 'mobile' && (jsx(MobileIcon, { className: "w-5 h-5 text-gray-500", title: "Mobile" }))] }))] }), jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [feedback.type && (jsx("span", { className: cn("px-2 py-0.5 rounded-full text-[10px] font-medium uppercase", feedback.type === "copy-amendment"
+                                            ? "bg-brand-blue/50 text-gray-800"
                                             : feedback.type === "bug"
-                                                ? "bg-red-100 text-red-800"
+                                                ? "bg-brand-pink/30 text-gray-800"
                                                 : feedback.type === "feature"
-                                                    ? "bg-blue-100 text-blue-800"
+                                                    ? "bg-brand-green/30 text-gray-800"
                                                     : "bg-gray-100 text-gray-700"), children: feedback.type === "copy-amendment"
                                             ? "Copy"
                                             : "General" })), jsx("span", { className: cn("px-2 py-0.5 rounded-full text-[10px] font-medium uppercase", priorityColors[feedback.priority]), children: feedback.priority }), jsx("span", { className: "text-xs text-gray-400", children: formatDate(feedback.createdAt) })] })] }), !isReadOnly && (jsxs("div", { className: "mb-4", children: [jsx("label", { className: "block text-xs font-medium text-gray-700 mb-1.5", children: "Status" }), jsx("div", { className: "flex gap-1.5", children: statusOptions.map((option) => (jsx("div", { onClick: () => handleStatusChange(option.value), className: cn("flex-1 py-1.5 px-2 rounded-lg text-[10px] font-medium border cursor-pointer transition-all text-center", feedback.status === option.value
-                                        ? "bg-[#C2D1D9] text-white border-[#C2D1D9]"
-                                        : "bg-white text-gray-600 border-gray-200 hover:border-indigo-300"), children: option.label }, option.value))) })] })), feedback.screenshot && (jsxs("div", { className: "mb-5", children: [jsx("label", { className: "block text-xs font-semibold text-gray-800 mb-2 uppercase tracking-wide", children: "Screenshot" }), jsxs("div", { className: "relative rounded-xl overflow-hidden shadow-md cursor-pointer group", onClick: () => setShowFullScreenshot(true), children: [jsx("img", { src: feedback.screenshot, alt: "Feedback screenshot", className: "w-full block" }), jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-all flex items-center justify-center", children: jsx("div", { className: "bg-white rounded-full p-3 shadow-xl transform scale-90 group-hover:scale-100 transition-transform", children: jsx(ZoomInIcon, { className: "w-6 h-6 text-gray-700" }) }) })] })] })), feedback.description && (jsxs("div", { className: "mb-4", children: [jsx("label", { className: "block text-xs font-medium text-gray-700 mb-1.5", children: "Description" }), jsx("p", { className: "text-sm text-gray-600 m-0 whitespace-pre-wrap", children: feedback.description })] })), feedback.tags && feedback.tags.length > 0 && (jsxs("div", { className: "mb-4", children: [jsx("label", { className: "block text-xs font-medium text-gray-700 mb-1.5", children: "Tags" }), jsx("div", { className: "flex flex-wrap gap-1.5", children: feedback.tags.map((tag) => (jsx("span", { className: "px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs", children: tag }, tag))) })] })), feedback.pageMetadata && (jsxs("div", { className: "mb-4 p-2.5 bg-gray-50 rounded-lg", children: [jsx("label", { className: "block text-xs font-medium text-gray-700 mb-1.5", children: "Page Info" }), jsxs("div", { className: "text-xs text-gray-500 space-y-1", children: [jsxs("div", { className: "truncate", children: [jsx("span", { className: "font-medium", children: "URL:" }), " ", feedback.pageMetadata.url] }), jsxs("div", { children: [jsx("span", { className: "font-medium", children: "Screen:" }), " ", feedback.pageMetadata.screenWidth, "x", feedback.pageMetadata.screenHeight] }), jsxs("div", { children: [jsx("span", { className: "font-medium", children: "User Agent:" }), " ", feedback.pageMetadata.userAgent] })] })] })), jsxs("div", { className: "mb-4", children: [jsxs("label", { className: "block text-xs font-medium text-gray-700 mb-2", children: ["Comments (", ((_b = feedback.comments) === null || _b === void 0 ? void 0 : _b.length) || 0, ")"] }), feedback.comments && feedback.comments.length > 0 && (jsx("div", { className: "space-y-3 mb-4", children: feedback.comments.map((comment) => (jsxs("div", { className: "p-3 bg-white border border-gray-200 rounded-xl shadow-sm", children: [jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsx("div", { className: "w-8 h-8 rounded-full bg-gradient-to-br from-[#C2D1D9] to-purple-500 flex items-center justify-center shadow-md", children: jsx(UserIcon, { className: "w-4 h-4 text-white" }) }), jsx("span", { className: "text-xs font-semibold text-gray-900", children: comment.createdBy.name }), jsx("span", { className: "text-[10px] text-gray-500 font-medium", children: formatDate(comment.createdAt) })] }), jsx("p", { className: "text-sm text-gray-700 m-0 ml-10 whitespace-pre-wrap", children: comment.content || comment.text })] }, comment.id))) })), jsxs("div", { className: "flex gap-2", children: [jsx("input", { type: "text", value: newComment, onChange: (e) => setNewComment(e.target.value), placeholder: "Add a comment...", className: "flex-1 px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:bg-white focus:border-[#C2D1D9] focus:shadow-lg focus:shadow-[#C2D1D9]/10 transition-all", onKeyDown: (e) => {
+                                        ? cn(option.color, "border-transparent")
+                                        : "bg-white text-gray-600 border-gray-200 hover:border-brand-blue"), children: option.label }, option.value))) })] })), feedback.screenshot && (jsxs("div", { className: "mb-5", children: [jsx("label", { className: "block text-xs font-semibold text-gray-800 mb-2 uppercase tracking-wide", children: "Screenshot" }), jsxs("div", { className: "relative rounded-xl overflow-hidden shadow-md cursor-pointer group", onClick: () => setShowFullScreenshot(true), children: [jsx("img", { src: feedback.screenshot, alt: "Feedback screenshot", className: "w-full block" }), jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-all flex items-center justify-center", children: jsx("div", { className: "bg-white rounded-full p-3 shadow-xl transform scale-90 group-hover:scale-100 transition-transform", children: jsx(ZoomInIcon, { className: "w-6 h-6 text-gray-700" }) }) })] })] })), feedback.screenRecording && (jsxs("div", { className: "mb-5", children: [jsx("label", { className: "block text-xs font-semibold text-gray-800 mb-2 uppercase tracking-wide", children: "Screen Recording" }), jsx("div", { className: "relative rounded-xl overflow-hidden shadow-md border border-gray-200", children: jsx("video", { src: feedback.screenRecording, controls: true, className: "w-full h-auto bg-black" }) })] })), (feedback.designMockup || feedback.sessionEvents) && (jsxs("div", { className: "flex gap-2 mb-5", children: [feedback.sessionEvents && (jsx("button", { onClick: () => setShowReplay(true), className: "flex-1 bg-gray-100 text-gray-700 py-2.5 rounded-xl text-xs font-semibold hover:bg-gray-200 transition-colors flex items-center justify-center gap-2 border border-gray-200 cursor-pointer", children: "Play Session" })), feedback.designMockup && (jsx("button", { onClick: () => setShowOverlay(true), className: "flex-1 bg-gray-100 text-gray-700 py-2.5 rounded-xl text-xs font-semibold hover:bg-gray-200 transition-colors flex items-center justify-center gap-2 border border-gray-200 cursor-pointer", children: "Overlay Mockup" }))] })), feedback.type === "copy-amendment" && (jsxs(Fragment, { children: [feedback.currentCopy && (jsxs("div", { className: "mb-4", children: [jsx("label", { className: "block text-xs font-medium text-gray-700 mb-1.5", children: "Current Copy" }), jsx("div", { className: "bg-red-50 border border-red-200 rounded-lg p-3", children: jsx("p", { className: "text-sm text-gray-800 m-0 whitespace-pre-wrap", children: feedback.currentCopy }) })] })), feedback.newCopy && (jsxs("div", { className: "mb-4", children: [jsx("label", { className: "block text-xs font-medium text-gray-700 mb-1.5", children: "New Copy" }), jsx("div", { className: "bg-green-50 border border-green-200 rounded-lg p-3", children: jsx("p", { className: "text-sm text-gray-800 m-0 whitespace-pre-wrap", children: feedback.newCopy }) })] }))] })), feedback.description && (jsxs("div", { className: "mb-4", children: [jsx("label", { className: "block text-xs font-medium text-gray-700 mb-1.5", children: "Description" }), jsx("p", { className: "text-sm text-gray-600 m-0 whitespace-pre-wrap", children: feedback.description })] })), feedback.tags && feedback.tags.length > 0 && (jsxs("div", { className: "mb-4", children: [jsx("label", { className: "block text-xs font-medium text-gray-700 mb-1.5", children: "Tags" }), jsx("div", { className: "flex flex-wrap gap-1.5", children: feedback.tags.map((tag) => (jsx("span", { className: "px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs", children: tag }, tag))) })] })), feedback.pageMetadata && (jsxs("div", { className: "mb-4 p-2.5 bg-gray-50 rounded-lg", children: [jsx("label", { className: "block text-xs font-medium text-gray-700 mb-1.5", children: "Page Info" }), jsxs("div", { className: "text-xs text-gray-500 space-y-1", children: [jsxs("div", { className: "truncate", children: [jsx("span", { className: "font-medium", children: "URL:" }), " ", feedback.pageMetadata.url] }), feedback.pageMetadata.componentName && (jsxs("div", { className: "truncate", children: [jsx("span", { className: "font-medium", children: "Component:" }), " ", jsx("code", { className: "bg-gray-200 px-1.5 py-0.5 rounded text-xs font-mono text-gray-800", children: feedback.pageMetadata.componentName })] })), feedback.pageMetadata.elementInfo && (jsxs("div", { className: "truncate", children: [jsx("span", { className: "font-medium", children: "Element:" }), " ", jsx("code", { className: "bg-blue-50 px-1.5 py-0.5 rounded text-xs font-mono text-blue-800", children: feedback.pageMetadata.elementInfo })] })), jsxs("div", { children: [jsx("span", { className: "font-medium", children: "Screen:" }), " ", feedback.pageMetadata.screenWidth, "x", feedback.pageMetadata.screenHeight] }), jsxs("div", { children: [jsx("span", { className: "font-medium", children: "User Agent:" }), " ", feedback.pageMetadata.userAgent] })] })] })), jsxs("div", { className: "mb-4", children: [jsxs("label", { className: "block text-xs font-medium text-gray-700 mb-2", children: ["Comments (", ((_c = feedback.comments) === null || _c === void 0 ? void 0 : _c.length) || 0, ")"] }), feedback.comments && feedback.comments.length > 0 && (jsx("div", { className: "space-y-3 mb-4", children: feedback.comments.map((comment) => (jsxs("div", { className: "p-3 bg-white border border-gray-200 rounded-xl shadow-sm", children: [jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsx("div", { className: "w-8 h-8 rounded-full bg-gradient-to-br from-[#C2D1D9] to-purple-500 flex items-center justify-center shadow-md", children: jsx(UserIcon, { className: "w-4 h-4 text-white" }) }), jsx("span", { className: "text-xs font-semibold text-gray-900", children: comment.createdBy.name }), jsx("span", { className: "text-[10px] text-gray-500 font-medium", children: formatDate(comment.createdAt) })] }), jsx("p", { className: "text-sm text-gray-700 m-0 ml-10 whitespace-pre-wrap", children: comment.content || comment.text })] }, comment.id))) })), jsxs("div", { className: "flex gap-2", children: [jsx("input", { type: "text", value: newComment, onChange: (e) => setNewComment(e.target.value), placeholder: "Add a comment...", className: "flex-1 px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:bg-white focus:border-[#C2D1D9] focus:shadow-lg focus:shadow-[#C2D1D9]/10 transition-all", onKeyDown: (e) => {
                                             if (e.key === "Enter" && !e.shiftKey) {
                                                 e.preventDefault();
                                                 handleAddComment();
                                             }
-                                        } }), jsx("button", { onClick: handleAddComment, disabled: !newComment.trim() || isAddingComment, className: "p-2.5 rounded-xl border-none text-white cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed hover:shadow-lg transition-all", style: { backgroundColor: "var(--markup-primary)" }, children: jsx(SendIcon, { className: "w-5 h-5" }) })] })] })] }), showFullScreenshot && feedback.screenshot && (jsxs("div", { className: "fixed inset-0 bg-black z-[1000001] flex items-center justify-center", onClick: () => setShowFullScreenshot(false), children: [jsx("button", { onClick: () => setShowFullScreenshot(false), className: "absolute top-4 right-4 p-3 bg-white/10 rounded-full border-none cursor-pointer hover:bg-white/20 transition-colors z-10", children: jsx(CloseIcon, { className: "w-8 h-8 text-white" }) }), jsx("img", { src: feedback.screenshot, alt: "Feedback screenshot", className: "w-full h-full object-contain", onClick: (e) => e.stopPropagation() })] }))] }));
+                                        } }), jsx("button", { onClick: handleAddComment, disabled: !newComment.trim() || isAddingComment, className: "p-2.5 rounded-xl border-none text-white cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed hover:shadow-lg transition-all", style: { backgroundColor: "var(--markup-primary)" }, children: jsx(SendIcon, { className: "w-5 h-5" }) })] })] })] }), showFullScreenshot &&
+                feedback.screenshot &&
+                createPortal(jsxs("div", { className: "fixed inset-0 bg-black/90 backdrop-blur-sm z-[2147483647] flex items-center justify-center p-10 animate-in fade-in duration-200", onClick: () => setShowFullScreenshot(false), children: [jsx("button", { onClick: () => setShowFullScreenshot(false), className: "absolute top-6 right-6 p-2 bg-white/10 rounded-full border-none cursor-pointer hover:bg-white/20 transition-colors z-10", children: jsx(CloseIcon, { className: "w-8 h-8 text-white" }) }), jsx("img", { src: feedback.screenshot, alt: "Feedback screenshot", className: "max-w-full max-h-full object-contain rounded-lg shadow-2xl", onClick: (e) => e.stopPropagation() })] }), document.body), showReplay && sessionActions && sessionActions.length > 0 && createPortal(jsx("div", { className: "fixed inset-0 z-[10000] bg-black/80 backdrop-blur-sm flex items-center justify-center p-5 animate-in fade-in duration-200", onClick: () => setShowReplay(false), children: jsxs("div", { className: "bg-white rounded-2xl overflow-hidden shadow-2xl max-w-[900px] w-full flex flex-col max-h-[90vh]", onClick: (e) => e.stopPropagation(), children: [jsxs("div", { className: "p-4 border-b border-gray-100 flex items-center justify-between bg-gray-50", children: [jsxs("div", { children: [jsx("h3", { className: "font-semibold text-gray-900", children: "Session Activity Timeline" }), jsx("p", { className: "text-xs text-gray-600 mt-1", children: "User actions recorded during feedback creation" })] }), jsx("button", { onClick: () => setShowReplay(false), className: "p-2 hover:bg-gray-200 rounded-full transition-colors cursor-pointer text-gray-500 hover:text-gray-900 border-none bg-transparent", children: jsx(CloseIcon, { className: "w-5 h-5" }) })] }), jsx("div", { className: "flex-1 overflow-y-auto p-4", children: jsx("div", { className: "space-y-2", children: sessionActions.map((action, idx) => {
+                                    var _a;
+                                    const baseTime = ((_a = sessionActions[0]) === null || _a === void 0 ? void 0 : _a.timestamp) || action.timestamp;
+                                    return (jsxs("div", { className: "flex items-start gap-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors", children: [jsxs("div", { className: "flex-shrink-0 w-20 text-xs font-mono text-gray-600", children: [jsx("div", { children: formatTimestamp(action.timestamp) }), jsx("div", { className: "text-gray-400", children: getRelativeTime(action.timestamp, baseTime) })] }), jsxs("div", { className: "flex-1 min-w-0", children: [action.type === 'click' && (jsxs("div", { children: [jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsx("span", { className: "inline-block w-2 h-2 bg-blue-500 rounded-full" }), jsx("span", { className: "font-medium text-gray-900", children: "Clicked" })] }), jsxs("div", { className: "text-sm text-gray-700 font-mono bg-white px-2 py-1 rounded border border-gray-200", children: ["<", action.data.elementTag || 'unknown', action.data.elementId && ` id="${action.data.elementId}"`, action.data.elementClass && ` class="${action.data.elementClass}"`, ">"] }), action.data.elementText && (jsxs("div", { className: "mt-1 text-sm text-gray-600", children: ["Text: ", jsxs("span", { className: "italic", children: ["\"", action.data.elementText.substring(0, 100), action.data.elementText.length > 100 ? '...' : '', "\""] })] }))] })), action.type === 'navigation' && (jsxs("div", { children: [jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsx("span", { className: "inline-block w-2 h-2 bg-purple-500 rounded-full" }), jsx("span", { className: "font-medium text-gray-900", children: "Navigated" })] }), jsx("div", { className: "text-sm text-gray-700 break-all", children: action.data.url })] })), action.type === 'scroll' && (jsxs("div", { children: [jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsx("span", { className: "inline-block w-2 h-2 bg-green-500 rounded-full" }), jsx("span", { className: "font-medium text-gray-900", children: "Scrolled" })] }), jsxs("div", { className: "text-sm text-gray-700", children: ["Position: ", action.data.scrollY, "px"] })] })), action.type === 'input' && (jsxs("div", { children: [jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsx("span", { className: "inline-block w-2 h-2 bg-orange-500 rounded-full" }), jsx("span", { className: "font-medium text-gray-900", children: "Input" })] }), jsxs("div", { className: "text-sm text-gray-700", children: [action.data.inputType, " field"] })] }))] })] }, idx));
+                                }) }) })] }) }), document.body), showOverlay && feedback.designMockup && createPortal(jsxs("div", { className: "fixed inset-0 z-[10000] pointer-events-none", children: [jsx("img", { src: feedback.designMockup, style: { opacity: overlayOpacity / 100 }, className: "w-full h-full object-contain object-top", alt: "Design Mockup Overlay" }), jsxs("div", { className: "fixed bottom-10 left-1/2 -translate-x-1/2 bg-white/90 backdrop-blur border border-gray-200 shadow-xl rounded-full p-2 px-6 flex items-center gap-4 pointer-events-auto", children: [jsx("span", { className: "text-xs font-bold text-gray-500 uppercase whitespace-nowrap", children: "Overlay Opacity" }), jsx("input", { type: "range", min: "0", max: "100", value: overlayOpacity, onChange: (e) => setOverlayOpacity(Number(e.target.value)), className: "w-32 accent-brand-blue" }), jsx("button", { onClick: () => setShowOverlay(false), className: "ml-2 hover:bg-gray-200 p-1.5 rounded-full border-none bg-transparent", children: jsx(CloseIcon, { className: "w-4 h-4 text-gray-500" }) })] })] }), document.body)] }));
 };
 
 const signUp = async (email, password) => {
@@ -37403,18 +37683,82 @@ const AuthForm = ({ onSuccess }) => {
     };
     return (jsx("div", { className: "flex flex-col items-center justify-center h-full  p-5", children: jsxs("div", { className: "w-full max-w-md", children: [jsxs("div", { className: "bg-white rounded-2xl shadow-2xl p-8", children: [jsx("h2", { className: "text-2xl font-bold text-gray-900 mb-2 text-center", children: mode === "login" ? "Sign In" : "Create Account" }), jsx("p", { className: "text-gray-600 text-sm text-center mb-6", children: mode === "login"
                                 ? "Sign in to submit and manage feedback"
-                                : "Create an account to get started" }), jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [jsxs("div", { children: [jsx("label", { htmlFor: "email", className: "block text-sm font-medium text-gray-700 mb-2", children: "Email Address" }), jsx("input", { id: "email", type: "email", value: email, onChange: (e) => setEmail(e.target.value), required: true, className: "w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#C2D1D9] focus:border-transparent transition-all", placeholder: "you@example.com" })] }), jsxs("div", { children: [jsx("label", { htmlFor: "password", className: "block text-sm font-medium text-gray-700 mb-2", children: "Password" }), jsx("input", { id: "password", type: "password", value: password, onChange: (e) => setPassword(e.target.value), required: true, minLength: 6, className: "w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#C2D1D9] focus:border-transparent transition-all", placeholder: "Minimum 6 characters" })] }), error && (jsx("div", { className: "bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm", children: error })), jsx("div", { onClick: handleSubmit, className: "w-full bg-[#c2d1d9] text-white py-2.5 px-4 rounded-lg font-medium hover:bg-[#c2d1d9]/80 focus:ring-4 focus:ring-blue transition-all cursor-pointer text-center", children: loading
+                                : "Create an account to get started" }), jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [jsxs("div", { children: [jsx("label", { htmlFor: "email", className: "block text-sm font-medium text-gray-700 mb-2", children: "Email Address" }), jsx("input", { id: "email", type: "email", value: email, onChange: (e) => setEmail(e.target.value), required: true, className: "w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#C2D1D9] focus:border-transparent transition-all", placeholder: "you@example.com" })] }), jsxs("div", { children: [jsx("label", { htmlFor: "password", className: "block text-sm font-medium text-gray-700 mb-2", children: "Password" }), jsx("input", { id: "password", type: "password", value: password, onChange: (e) => setPassword(e.target.value), required: true, minLength: 6, className: "w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#C2D1D9] focus:border-transparent transition-all", placeholder: "Minimum 6 characters" })] }), error && (jsx("div", { className: "bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm", children: error })), jsx("div", { onClick: handleSubmit, className: "w-full bg-[#c2d1d9] text-black py-2.5 px-4 rounded-lg font-medium hover:bg-[#c2d1d9]/80 focus:ring-4 focus:ring-blue transition-all cursor-pointer text-center", children: loading
                                         ? "Please wait..."
                                         : mode === "login"
                                             ? "Sign In"
                                             : "Create Account" })] }), jsx("div", { className: "mt-6 text-center", children: jsx("div", { onClick: () => {
                                     setMode(mode === "login" ? "signup" : "login");
                                     setError(null);
-                                }, className: "bg-gray-500 text-white w-full font-medium cursor-pointer", children: mode === "login"
+                                }, className: "bg-pink text-black w-full font-medium cursor-pointer hover:underline", children: mode === "login"
                                     ? "Don't have an account? Sign up"
                                     : "Already have an account? Sign in" }) })] }), jsx("p", { className: "text-center text-xs text-gray-500 mt-6", children: "Your feedback will be associated with your account" })] }) }));
 };
 
+const VIEWPORT_PRESETS = [
+    { name: "iPhone SE", width: 375, height: 667, deviceType: "mobile" },
+    { name: "iPhone 12 Pro", width: 390, height: 844, deviceType: "mobile" },
+    { name: "iPhone 14 Pro Max", width: 430, height: 932, deviceType: "mobile" },
+    { name: "iPad Mini", width: 768, height: 1024, deviceType: "tablet" },
+    { name: "iPad Pro", width: 1024, height: 1366, deviceType: "tablet" },
+    { name: "Desktop", width: 1920, height: 1080, deviceType: "desktop" },
+];
+const ViewportControls = () => {
+    const { viewportMode, setViewportMode, isOpen: isWidgetOpen } = useMarkupStore();
+    const [isExpanded, setIsExpanded] = require$$0.useState(false);
+    const dropdownRef = require$$0.useRef(null);
+    const handlePresetClick = (preset) => {
+        setViewportMode({ width: preset.width, height: preset.height });
+        setIsExpanded(false);
+    };
+    const handleReset = () => {
+        setViewportMode(null);
+        setIsExpanded(false);
+    };
+    const isActivePreset = (preset) => {
+        return (viewportMode === null || viewportMode === void 0 ? void 0 : viewportMode.width) === preset.width && (viewportMode === null || viewportMode === void 0 ? void 0 : viewportMode.height) === preset.height;
+    };
+    // Close dropdown on outside click
+    require$$0.useEffect(() => {
+        if (!isExpanded)
+            return;
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsExpanded(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isExpanded]);
+    // Handle ESC key to close dropdown or reset viewport
+    require$$0.useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                if (isExpanded) {
+                    setIsExpanded(false);
+                    event.preventDefault();
+                }
+                else if (viewportMode) {
+                    handleReset();
+                    event.preventDefault();
+                }
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isExpanded, viewportMode]);
+    // Don't show controls when widget is not open
+    if (!isWidgetOpen)
+        return null;
+    return (jsxs("div", { ref: dropdownRef, className: "fixed top-4 left-1/2 -translate-x-1/2 z-[999998] flex items-center gap-2", children: [!viewportMode ? (jsxs("button", { onClick: () => setIsExpanded(!isExpanded), className: "bg-white border-2 border-gray-300 rounded-xl px-4 py-2 shadow-lg hover:shadow-xl transition-all flex items-center gap-2 text-sm font-medium text-gray-700 hover:text-gray-900 hover:border-gray-400", children: [jsx(DesktopIcon, { className: "w-4 h-4" }), "Responsive Mode"] })) : (jsxs("div", { className: "bg-white border-2 border-gray-300 rounded-xl px-4 py-2 shadow-lg flex items-center gap-3", children: [jsxs("span", { className: "text-sm font-medium text-gray-700", children: [viewportMode.width, " \u00D7 ", viewportMode.height] }), jsx("button", { onClick: () => setIsExpanded(!isExpanded), className: "text-gray-600 hover:text-gray-900 transition-colors", children: jsx(DesktopIcon, { className: "w-4 h-4" }) }), jsx("button", { onClick: handleReset, className: "px-2 py-1 text-xs font-medium text-red-600 hover:text-white hover:bg-red-600 border border-red-600 rounded transition-colors", children: "Reset" })] })), isExpanded && (jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 mt-2 bg-white border-2 border-gray-200 rounded-xl shadow-2xl p-3 min-w-[240px]", children: jsxs("div", { className: "space-y-2", children: [jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide px-2 mb-2", children: "Mobile" }), VIEWPORT_PRESETS.filter((p) => p.deviceType === "mobile").map((preset) => (jsxs("button", { onClick: () => handlePresetClick(preset), className: cn("w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-all text-left group", isActivePreset(preset)
+                                ? "bg-blue-50 border border-blue-200"
+                                : "hover:bg-gray-100"), children: [jsx(MobileIcon, { className: cn("w-4 h-4 transition-colors", isActivePreset(preset) ? "text-blue-600" : "text-gray-400 group-hover:text-gray-600") }), jsxs("div", { className: "flex-1", children: [jsx("div", { className: "text-sm font-medium text-gray-700 group-hover:text-gray-900", children: preset.name }), jsxs("div", { className: "text-xs text-gray-500", children: [preset.width, " \u00D7 ", preset.height] })] })] }, preset.name))), jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide px-2 mt-4 mb-2", children: "Tablet" }), VIEWPORT_PRESETS.filter((p) => p.deviceType === "tablet").map((preset) => (jsxs("button", { onClick: () => handlePresetClick(preset), className: cn("w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-all text-left group", isActivePreset(preset)
+                                ? "bg-blue-50 border border-blue-200"
+                                : "hover:bg-gray-100"), children: [jsx(TabletIcon, { className: cn("w-4 h-4 transition-colors", isActivePreset(preset) ? "text-blue-600" : "text-gray-400 group-hover:text-gray-600") }), jsxs("div", { className: "flex-1", children: [jsx("div", { className: "text-sm font-medium text-gray-700 group-hover:text-gray-900", children: preset.name }), jsxs("div", { className: "text-xs text-gray-500", children: [preset.width, " \u00D7 ", preset.height] })] })] }, preset.name))), jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide px-2 mt-4 mb-2", children: "Desktop" }), VIEWPORT_PRESETS.filter((p) => p.deviceType === "desktop").map((preset) => (jsxs("button", { onClick: () => handlePresetClick(preset), className: cn("w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-all text-left group", isActivePreset(preset)
+                                ? "bg-blue-50 border border-blue-200"
+                                : "hover:bg-gray-100"), children: [jsx(DesktopIcon, { className: cn("w-4 h-4 transition-colors", isActivePreset(preset) ? "text-blue-600" : "text-gray-400 group-hover:text-gray-600") }), jsxs("div", { className: "flex-1", children: [jsx("div", { className: "text-sm font-medium text-gray-700 group-hover:text-gray-900", children: preset.name }), jsxs("div", { className: "text-xs text-gray-500", children: [preset.width, " \u00D7 ", preset.height] })] })] }, preset.name)))] }) }))] }));
+};
+
 const useFirebaseSync = () => {
     const config = useMarkupStore((state) => state.config);
     const setCurrentUser = useMarkupStore((state) => state.setCurrentUser);
@@ -37509,6 +37853,109 @@ const useFirebaseSync = () => {
     }, [config.projectId, setFeedbackItems, isAuthenticated]);
 };
 
+const useSessionRecording = () => {
+    const actionsRef = useRef([]);
+    const maxActions = 50; // Keep last 50 actions
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const recordAction = (action) => {
+            if (actionsRef.current.length >= maxActions) {
+                actionsRef.current.shift();
+            }
+            actionsRef.current.push(action);
+        };
+        // Record clicks
+        const handleClick = (e) => {
+            var _a;
+            const target = e.target;
+            if (target.closest('[data-markup-widget]'))
+                return;
+            recordAction({
+                type: 'click',
+                timestamp: Date.now(),
+                data: {
+                    elementTag: target.tagName.toLowerCase(),
+                    elementText: ((_a = target.textContent) === null || _a === void 0 ? void 0 : _a.slice(0, 50).trim()) || undefined,
+                    elementId: target.id || undefined,
+                    elementClass: target.className && typeof target.className === 'string'
+                        ? target.className.split(' ').slice(0, 3).join(' ')
+                        : undefined,
+                }
+            });
+        };
+        // Record navigation
+        const handleNavigation = () => {
+            recordAction({
+                type: 'navigation',
+                timestamp: Date.now(),
+                data: {
+                    url: window.location.href
+                }
+            });
+        };
+        // Record scroll (throttled)
+        let scrollTimeout;
+        const handleScroll = () => {
+            clearTimeout(scrollTimeout);
+            scrollTimeout = setTimeout(() => {
+                recordAction({
+                    type: 'scroll',
+                    timestamp: Date.now(),
+                    data: {
+                        scrollY: window.scrollY
+                    }
+                });
+            }, 500);
+        };
+        // Record input events
+        const handleInput = (e) => {
+            const target = e.target;
+            if (target.closest('[data-markup-widget]'))
+                return;
+            recordAction({
+                type: 'input',
+                timestamp: Date.now(),
+                data: {
+                    elementTag: target.tagName.toLowerCase(),
+                    elementId: target.id || undefined,
+                    inputType: target.type || undefined,
+                }
+            });
+        };
+        // Record initial page load
+        recordAction({
+            type: 'navigation',
+            timestamp: Date.now(),
+            data: { url: window.location.href }
+        });
+        document.addEventListener('click', handleClick, true);
+        window.addEventListener('popstate', handleNavigation);
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        document.addEventListener('input', handleInput, true);
+        return () => {
+            document.removeEventListener('click', handleClick, true);
+            window.removeEventListener('popstate', handleNavigation);
+            window.removeEventListener('scroll', handleScroll);
+            document.removeEventListener('input', handleInput, true);
+            clearTimeout(scrollTimeout);
+        };
+    }, []);
+    const getSessionEvents = useCallback(() => {
+        if (actionsRef.current.length === 0) {
+            return undefined;
+        }
+        return JSON.stringify(actionsRef.current);
+    }, []);
+    const clearSession = useCallback(() => {
+        actionsRef.current = [];
+    }, []);
+    return {
+        getSessionEvents,
+        clearSession
+    };
+};
+
 const MarkupWidget = ({ config: userConfig, }) => {
     var _a;
     // Initialize Firebase synchronously on first render only
@@ -37523,9 +37970,76 @@ const MarkupWidget = ({ config: userConfig, }) => {
             console.error('Failed to initialize Firebase:', error);
         }
     }
-    const { isOpen, setIsOpen, activeTab, setActiveTab, selectedFeedback, setSelectedFeedback, feedbackItems, addFeedbackItem, config, setConfig, reset, isAuthenticated, currentUser, } = useMarkupStore();
+    const { isOpen, setIsOpen, activeTab, setActiveTab, selectedFeedback, setSelectedFeedback, feedbackItems, addFeedbackItem, removeFeedbackItem, updateFeedback, config, setConfig, reset, isAuthenticated, currentUser, viewportMode, setViewportMode, } = useMarkupStore();
     // Initialize Firebase sync
     useFirebaseSync();
+    // Initialize Session Recording (Feature 2)
+    const { getSessionEvents } = useSessionRecording();
+    // Track last clicked element for component detection (Feature 4)
+    const lastClickedElementRef = useRef(null);
+    const [lastClickedText, setLastClickedText] = useState('');
+    useEffect(() => {
+        const handleClick = (e) => {
+            var _a;
+            // Store the clicked element (but ignore clicks on the widget itself)
+            const target = e.target;
+            if (!target.closest('[data-markup-widget]')) {
+                lastClickedElementRef.current = target;
+                // If user clicked on text content, capture it for copy amendment
+                // Get the immediate text content (not children)
+                let textContent = '';
+                if (target.childNodes.length > 0) {
+                    // Try to get direct text nodes only
+                    for (const node of Array.from(target.childNodes)) {
+                        if (node.nodeType === Node.TEXT_NODE) {
+                            textContent += node.textContent || '';
+                        }
+                    }
+                    textContent = textContent.trim();
+                }
+                // If no direct text, fall back to full textContent
+                if (!textContent) {
+                    textContent = ((_a = target.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+                }
+                if (textContent && textContent.length > 0 && textContent.length < 500) {
+                    setLastClickedText(textContent);
+                }
+                else {
+                    setLastClickedText('');
+                }
+            }
+        };
+        document.addEventListener('click', handleClick, true);
+        return () => document.removeEventListener('click', handleClick, true);
+    }, []);
+    // Apply viewport mode styling to document (like browser dev tools)
+    useEffect(() => {
+        if (viewportMode) {
+            const root = document.documentElement;
+            const body = document.body;
+            // Apply dark background to body
+            body.style.background = 'rgba(0, 0, 0, 0.5)';
+            body.style.overflow = 'visible';
+            // Apply viewport constraints with smooth transition
+            root.style.transition = 'max-width 0.3s ease-in-out, margin 0.3s ease-in-out, background 0.2s ease-in-out';
+            root.style.maxWidth = `${viewportMode.width}px`;
+            root.style.margin = '0 auto';
+            root.style.border = '2px solid #999';
+            root.style.background = '#ffffff'; // Ensure content area has white background
+            root.style.boxShadow = '0 0 50px rgba(0, 0, 0, 0.3)';
+            return () => {
+                // Reset to full width
+                root.style.transition = '';
+                root.style.maxWidth = '';
+                root.style.margin = '';
+                root.style.border = '';
+                root.style.background = '';
+                root.style.boxShadow = '';
+                body.style.overflow = '';
+                body.style.background = '';
+            };
+        }
+    }, [viewportMode]);
     useEffect(() => {
         if (userConfig) {
             setConfig(userConfig);
@@ -37597,7 +38111,8 @@ const MarkupWidget = ({ config: userConfig, }) => {
     }, [setSelectedFeedback]);
     const handleBackFromDetail = useCallback(() => {
         setSelectedFeedback(null);
-    }, [setSelectedFeedback]);
+        setViewportMode(null);
+    }, [setSelectedFeedback, setViewportMode]);
     const handleLogout = useCallback(async () => {
         try {
             await logOut();
@@ -37610,6 +38125,15 @@ const MarkupWidget = ({ config: userConfig, }) => {
     const handleAuthSuccess = useCallback(() => {
         setActiveTab("create");
     }, [setActiveTab]);
+    const handleDeleteFeedback = useCallback((id) => {
+        removeFeedbackItem(id);
+        setSelectedFeedback(null);
+    }, [removeFeedbackItem, setSelectedFeedback]);
+    const handleUpdateFeedback = useCallback((updatedFeedback) => {
+        updateFeedback(updatedFeedback);
+        // Also update selected feedback if it's the same one (it should be)
+        setSelectedFeedback(updatedFeedback);
+    }, [updateFeedback, setSelectedFeedback]);
     const openFeedbackCount = feedbackItems.filter((f) => f.status === "open").length;
     ({
         ["--markup-primary"]: config.primaryColor || "#6366f1",
@@ -37617,15 +38141,15 @@ const MarkupWidget = ({ config: userConfig, }) => {
             ? adjustColor(config.primaryColor, -20)
             : "#4f46e5",
     });
-    return (jsxs("div", { className: cn("markup-widget fixed z-[999999] right-0 top-1/2 flex items-center transition-transform duration-300 ease-in-out", isOpen ? "" : "hover:translate-x-[-8px]"), style: {
-            transform: isOpen
-                ? "translateY(-50%) translateX(0)"
-                : "translateY(-50%) translateX(calc(100% - 40px))",
-        }, "data-markup-widget": true, children: [jsxs("div", { onClick: handleToggle, className: "relative bg-white h-fit flex items-center gap-2 px-2 pr-5 text-black border-none rounded-l-2xl cursor-pointer text-sm font-semibold transition-all py-5 shadow-lg", children: [isOpen && jsx(CloseIcon, { className: "w-5 h-5" }), jsx("span", { className: "text-black", style: { writingMode: "sideways-lr" }, children: "Siren" }), openFeedbackCount > 0 && (jsx("span", { className: "absolute  -top-3 -left-1 min-w-[24px] h-[24px] px-1 bg-[#E6B6CF] text-black rounded-full text-xs font-semibold flex items-center justify-center", children: openFeedbackCount }))] }), jsxs("div", { className: "bg-white w-[500px] h-[750px] rounded-l-xl shadow-2xl overflow-hidden flex flex-col text-black", children: [jsxs("div", { className: "flex items-center justify-between px-5 py-4 text-black", style: { backgroundColor: "var(--markup-primary)" }, children: [jsx("h2", { className: "text-base font-semibold m-0", children: ((_a = config.labels) === null || _a === void 0 ? void 0 : _a.feedbackTitle) || "Feedback" }), isAuthenticated && currentUser && (jsx("div", { onClick: handleLogout, className: "text-xs   p-2 border-black border text-black rounded-xl ", children: jsx("h2", { children: "Sign Out" }) }))] }), !isAuthenticated ? (jsx("div", { className: "flex-1 overflow-y-auto", children: jsx(AuthForm, { onSuccess: handleAuthSuccess }) })) : selectedFeedback ? (jsx(FeedbackDetail, { feedback: selectedFeedback, onBack: handleBackFromDetail })) : (jsxs(Fragment, { children: [jsxs("div", { className: "flex border-b border-gray-200 px-5", children: [jsxs("div", { className: cn("flex-1 py-3 px-4 border border-b-0 border-gray-200 rounded-t-xl hover:bg-gray-100 cursor-pointer text-sm font-medium transition-all  flex items-center justify-center gap-1", activeTab === "create"
-                                            ? "bg-gray-200"
-                                            : "border-white"), onClick: () => setActiveTab("create"), children: [jsx(PlusIcon, { className: "w-3.5 h-3.5" }), "New"] }), jsxs("div", { className: cn("flex-1 py-3 px-4 border border-b-0 border-gray-200 rounded-t-xl hover:bg-gray-100 cursor-pointer text-sm font-medium transition-all  flex items-center justify-center gap-1", activeTab === "list"
-                                            ? "bg-gray-200"
-                                            : "border-white"), onClick: () => setActiveTab("list"), children: ["View All (", feedbackItems.length, ")"] })] }), jsxs("div", { className: "flex-1 overflow-y-auto p-5", children: [activeTab === "create" && (jsx(FeedbackForm, { onSubmit: handleSubmitFeedback, onCancel: handleCancel })), activeTab === "list" && (jsx(FeedbackList, { feedbackItems: feedbackItems, onSelectFeedback: handleSelectFeedback }))] })] }))] })] }));
+    return (jsxs(Fragment, { children: [jsx(ViewportControls, {}), jsxs("div", { className: cn("markup-widget fixed z-[999999] right-0 top-1/2 flex items-center transition-transform duration-300 ease-in-out", isOpen ? "" : "hover:translate-x-[-8px]"), style: {
+                    transform: isOpen
+                        ? "translateY(-50%) translateX(0)"
+                        : "translateY(-50%) translateX(calc(100% - 40px))",
+                }, "data-markup-widget": true, children: [jsxs("div", { onClick: handleToggle, className: "relative bg-white h-fit flex items-center gap-2 px-2 pr-5 text-black border-none rounded-l-2xl cursor-pointer text-sm font-semibold transition-all py-5 shadow-lg", children: [isOpen && jsx(CloseIcon, { className: "w-5 h-5" }), jsx("span", { className: "text-black", style: { writingMode: "sideways-lr" }, children: "Siren" }), openFeedbackCount > 0 && (jsx("span", { className: "absolute  -top-3 -left-1 min-w-[24px] h-[24px] px-1 bg-[#E6B6CF] text-black rounded-full text-xs font-semibold flex items-center justify-center", children: openFeedbackCount }))] }), jsxs("div", { className: "bg-white w-[500px] h-[750px] rounded-l-xl shadow-2xl overflow-hidden flex flex-col text-black", children: [jsxs("div", { className: "flex items-center justify-between px-5 py-4 text-black", style: { backgroundColor: "var(--markup-primary)" }, children: [jsx("h2", { className: "text-base font-semibold m-0", children: ((_a = config.labels) === null || _a === void 0 ? void 0 : _a.feedbackTitle) || "Feedback" }), isAuthenticated && currentUser && (jsx("div", { onClick: handleLogout, className: "text-xs  py-2  px-4 bg-gray-50 border border-gray-200  text-black rounded-xl  hover:bg-gray-200  cursor-pointer transition-all flex items-center gap-2", children: jsx("h2", { children: "Sign Out" }) }))] }), !isAuthenticated ? (jsx("div", { className: "flex-1 overflow-y-auto", children: jsx(AuthForm, { onSuccess: handleAuthSuccess }) })) : selectedFeedback ? (jsx(FeedbackDetail, { feedback: selectedFeedback, onBack: handleBackFromDetail, onDelete: handleDeleteFeedback, onUpdate: handleUpdateFeedback })) : (jsxs(Fragment, { children: [jsxs("div", { className: "flex border-b border-gray-200 px-5", children: [jsxs("div", { className: cn("flex-1 py-3 px-4 border border-b-0 border-gray-200 rounded-t-xl hover:bg-gray-100 cursor-pointer text-sm font-medium transition-all  flex items-center justify-center gap-1", activeTab === "create"
+                                                    ? "bg-gray-200"
+                                                    : "border-white"), onClick: () => setActiveTab("create"), children: [jsx(PlusIcon, { className: "w-3.5 h-3.5" }), "New"] }), jsxs("div", { className: cn("flex-1 py-3 px-4 border border-b-0 border-gray-200 rounded-t-xl hover:bg-gray-100 cursor-pointer text-sm font-medium transition-all  flex items-center justify-center gap-1", activeTab === "list"
+                                                    ? "bg-gray-200"
+                                                    : "border-white"), onClick: () => setActiveTab("list"), children: ["View All (", feedbackItems.length, ")"] })] }), jsxs("div", { className: "flex-1 overflow-y-auto p-5", children: [activeTab === "create" && (jsx(FeedbackForm, { onSubmit: handleSubmitFeedback, onCancel: handleCancel, getSessionEvents: getSessionEvents, lastClickedElement: lastClickedElementRef.current, lastClickedText: lastClickedText })), activeTab === "list" && (jsx(FeedbackList, { feedbackItems: feedbackItems, onSelectFeedback: handleSelectFeedback }))] })] }))] })] })] }));
 };
 function adjustColor(color, amount) {
     const clamp = (val) => Math.min(255, Math.max(0, val));