@sirendesign/markup 1.0.13 → 1.0.14

package/dist/index.js

@@ -851,6 +851,7 @@ const initialState = {
     currentUser: null,
     isAuthenticated: false,
     viewportMode: null,
+    showPins: true,
 };
 const useMarkupStore = create()(persist((set, get) => ({
     ...initialState,
@@ -913,6 +914,7 @@ const useMarkupStore = create()(persist((set, get) => ({
         activeTab: 'create',
         activeTool: null,
     }),
+    setShowPins: (show) => set({ showPins: show }),
 }), {
     name: 'markup-storage',
     storage: createJSONStorage(() => localStorage),
@@ -17034,6 +17036,7 @@ const deleteScreenRecording = async (downloadURL) => {
     }
 };
 
+const MessageIcon = ({ className, ...props }) => (jsxRuntime.jsx("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: jsxRuntime.jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }));
 const CloseIcon = ({ className, ...props }) => (jsxRuntime.jsxs("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }));
 const CameraIcon = ({ className, ...props }) => (jsxRuntime.jsxs("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [jsxRuntime.jsx("path", { d: "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" }), jsxRuntime.jsx("circle", { cx: "12", cy: "13", r: "4" })] }));
 const CircleIcon = ({ className, ...props }) => (jsxRuntime.jsx("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }) }));
@@ -17376,7 +17379,7 @@ const AnnotationOverlay = ({ screenshot, onComplete, onCancel, }) => {
 
 const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastClickedElement, lastClickedText, }) => {
     var _a, _b;
-    const { config, currentScreenshot, setCurrentScreenshot, annotations, setAnnotations, clearAnnotations, setIsCapturing, isCapturing, currentUser, } = useMarkupStore();
+    const { config, currentScreenshot, setCurrentScreenshot, annotations, setAnnotations, clearAnnotations, setIsCapturing, isCapturing, currentUser, setIsOpen, } = useMarkupStore();
     const [title, setTitle] = require$$0.useState((initialData === null || initialData === void 0 ? void 0 : initialData.title) || "");
     const [description, setDescription] = require$$0.useState((initialData === null || initialData === void 0 ? void 0 : initialData.description) || "");
     const [priority, setPriority] = require$$0.useState((initialData === null || initialData === void 0 ? void 0 : initialData.priority) || "medium");
@@ -17395,12 +17398,48 @@ const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastC
     const [isUploadingVideo, setIsUploadingVideo] = require$$0.useState(false);
     const [mediaRecorder, setMediaRecorder] = require$$0.useState(null);
     const [recordingStream, setRecordingStream] = require$$0.useState(null);
+    // Pin placement states
+    const [isPlacingPin, setIsPlacingPin] = require$$0.useState(false);
+    const [pinPosition, setPinPosition] = require$$0.useState((initialData === null || initialData === void 0 ? void 0 : initialData.pinLocation)
+        ? {
+            x: initialData.pinLocation.x,
+            y: initialData.pinLocation.y,
+            pageX: initialData.pinLocation.pageX,
+            pageY: initialData.pinLocation.pageY,
+        }
+        : null);
     // Load initial annotations into store if editing
     require$$0.useEffect(() => {
         if (initialData === null || initialData === void 0 ? void 0 : initialData.annotations) {
             setAnnotations(initialData.annotations);
         }
     }, [initialData, setAnnotations]);
+    // Handle pin placement mode
+    require$$0.useEffect(() => {
+        if (!isPlacingPin)
+            return;
+        // Close widget during pin placement
+        setIsOpen(false);
+        const handlePinClick = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setPinPosition({
+                x: e.clientX,
+                y: e.clientY,
+                pageX: e.pageX,
+                pageY: e.pageY,
+            });
+            setIsPlacingPin(false);
+        };
+        document.addEventListener('click', handlePinClick, true);
+        document.body.style.cursor = 'crosshair';
+        return () => {
+            document.removeEventListener('click', handlePinClick, true);
+            document.body.style.cursor = '';
+            // Reopen widget when pin placement is done
+            setIsOpen(true);
+        };
+    }, [isPlacingPin, setIsOpen]);
     // Auto-capture selected text when component mounts (only if creating new)
     require$$0.useEffect(() => {
         var _a;
@@ -17438,12 +17477,12 @@ const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastC
     const handleStartRecording = async () => {
         try {
             const stream = await navigator.mediaDevices.getDisplayMedia({
-                video: { mediaSource: 'screen' },
+                video: { mediaSource: "screen" },
                 audio: false,
             });
             setRecordingStream(stream);
             const recorder = new MediaRecorder(stream, {
-                mimeType: 'video/webm;codecs=vp8',
+                mimeType: "video/webm;codecs=vp8",
             });
             const chunks = [];
             recorder.ondataavailable = (e) => {
@@ -17452,14 +17491,14 @@ const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastC
                 }
             };
             recorder.onstop = () => {
-                const blob = new Blob(chunks, { type: 'video/webm' });
+                const blob = new Blob(chunks, { type: "video/webm" });
                 // Store blob for upload and create preview URL
                 setRecordedBlob(blob);
                 const previewURL = URL.createObjectURL(blob);
                 setRecordedVideo(previewURL);
                 console.log(`Recording saved: ${(blob.size / 1048576).toFixed(2)}MB`);
                 // Stop all tracks
-                stream.getTracks().forEach(track => track.stop());
+                stream.getTracks().forEach((track) => track.stop());
                 setRecordingStream(null);
             };
             recorder.start();
@@ -17467,25 +17506,25 @@ const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastC
             setIsRecording(true);
         }
         catch (error) {
-            console.error('Failed to start recording:', error);
-            alert('Screen recording is not supported or permission was denied.');
+            console.error("Failed to start recording:", error);
+            alert("Screen recording is not supported or permission was denied.");
         }
     };
     const handleStopRecording = () => {
-        if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+        if (mediaRecorder && mediaRecorder.state !== "inactive") {
             mediaRecorder.stop();
             setIsRecording(false);
         }
     };
     const handleDeleteRecording = () => {
         // Revoke blob URL to free memory
-        if (recordedVideo && recordedVideo.startsWith('blob:')) {
+        if (recordedVideo && recordedVideo.startsWith("blob:")) {
             URL.revokeObjectURL(recordedVideo);
         }
         setRecordedVideo(undefined);
         setRecordedBlob(null);
         if (recordingStream) {
-            recordingStream.getTracks().forEach(track => track.stop());
+            recordingStream.getTracks().forEach((track) => track.stop());
             setRecordingStream(null);
         }
     };
@@ -17543,11 +17582,11 @@ const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastC
                 setIsUploadingVideo(true);
                 const tempId = generateId();
                 screenRecordingURL = await uploadScreenRecording(recordedBlob, tempId);
-                console.log('Video uploaded to Storage:', screenRecordingURL);
+                console.log("Video uploaded to Storage:", screenRecordingURL);
             }
             catch (error) {
-                console.error('Failed to upload video:', error);
-                alert('Failed to upload screen recording. Please try again.');
+                console.error("Failed to upload video:", error);
+                alert("Failed to upload screen recording. Please try again.");
                 setIsSubmitting(false);
                 setIsUploadingVideo(false);
                 return;
@@ -17556,10 +17595,13 @@ const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastC
                 setIsUploadingVideo(false);
             }
         }
+        const pageWidth = document.documentElement.scrollWidth;
+        const pageHeight = document.documentElement.scrollHeight;
         const feedback = {
             id: (initialData === null || initialData === void 0 ? void 0 : initialData.id) || generateId(),
             type: feedbackType,
-            title: title.trim() || (feedbackType === "copy-amendment" ? "Copy Amendment" : ""),
+            title: title.trim() ||
+                (feedbackType === "copy-amendment" ? "Copy Amendment" : ""),
             description: description.trim(),
             currentCopy: feedbackType === "copy-amendment"
                 ? currentCopy.trim()
@@ -17569,10 +17611,12 @@ const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastC
             annotations: annotations,
             status: (initialData === null || initialData === void 0 ? void 0 : initialData.status) || "open",
             priority,
-            pageMetadata: (initialData === null || initialData === void 0 ? void 0 : initialData.pageMetadata) || getPageMetadata(lastClickedElement || undefined),
+            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: (initialData === null || initialData === void 0 ? void 0 : initialData.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) || "",
@@ -17583,6 +17627,22 @@ const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastC
             sessionEvents: getSessionEvents ? getSessionEvents() : undefined,
             designMockup,
             screenRecording: screenRecordingURL,
+            pinLocation: pinPosition
+                ? {
+                    x: pinPosition.x,
+                    y: pinPosition.y,
+                    pageX: pinPosition.pageX,
+                    pageY: pinPosition.pageY,
+                    viewportWidth: window.innerWidth,
+                    viewportHeight: window.innerHeight,
+                    pageWidth,
+                    pageHeight,
+                    scrollX: window.scrollX,
+                    scrollY: window.scrollY,
+                    percentX: pageWidth ? (pinPosition.pageX / pageWidth) * 100 : undefined,
+                    percentY: pageHeight ? (pinPosition.pageY / pageHeight) * 100 : undefined,
+                }
+                : undefined,
         };
         try {
             if (config.onSubmit) {
@@ -17607,6 +17667,10 @@ const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastC
     if (isAnnotating && currentScreenshot) {
         return (jsxRuntime.jsx(AnnotationOverlay, { screenshot: currentScreenshot, onComplete: handleAnnotationComplete, onCancel: handleAnnotationCancel }));
     }
+    // Show pin placement overlay
+    if (isPlacingPin) {
+        return (jsxRuntime.jsx("div", { className: "fixed top-4 left-1/2 -translate-x-1/2 z-[999999] pointer-events-none", children: jsxRuntime.jsxs("div", { className: "bg-white rounded-2xl shadow-2xl p-6 max-w-md mx-4 text-center border-2 border-orange-500", children: [jsxRuntime.jsx("div", { className: "w-12 h-12 mx-auto mb-3 bg-orange-100 rounded-full flex items-center justify-center", children: jsxRuntime.jsxs("svg", { className: "w-6 h-6 text-orange-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }), jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })] }) }), jsxRuntime.jsx("h3", { className: "text-lg font-bold text-gray-900 mb-2", children: "Click to Place Pin" }), jsxRuntime.jsx("p", { className: "text-gray-600 text-sm mb-3", children: "Click anywhere on the page to mark the location" }), jsxRuntime.jsx("button", { type: "button", onClick: () => setIsPlacingPin(false), className: "px-4 py-2 text-sm font-medium text-white bg-orange-600 hover:bg-orange-700 rounded-lg transition-colors pointer-events-auto", children: "Cancel" })] }) }));
+    }
     return (jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [jsxRuntime.jsxs("div", { className: "mb-5", children: [jsxRuntime.jsx("label", { className: "block text-sm font-semibold mb-2 text-gray-800", children: "Type" }), jsxRuntime.jsx("div", { className: "flex gap-2", children: [
                             { id: "general", label: "General" },
                             { id: "copy-amendment", label: "Copy Change" },
@@ -17614,10 +17678,14 @@ const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastC
                                 ? "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" && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "mb-5", children: [jsxRuntime.jsx("label", { className: "block text-sm font-semibold mb-2 text-gray-800", children: "Current Copy" }), jsxRuntime.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" })] }), jsxRuntime.jsxs("div", { className: "mb-5", children: [jsxRuntime.jsx("label", { className: "block text-sm font-semibold mb-2 text-gray-800", children: "New Copy *" }), jsxRuntime.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" && (jsxRuntime.jsxs("div", { className: "mb-5", children: [jsxRuntime.jsx("label", { className: "block text-sm font-semibold mb-2 text-gray-800", children: "Title *" }), jsxRuntime.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" && (jsxRuntime.jsxs("div", { className: "mb-5", children: [jsxRuntime.jsx("label", { className: "block text-sm font-semibold mb-2 text-gray-800", children: "Description" }), jsxRuntime.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" })] })), jsxRuntime.jsxs("div", { className: "mb-5", children: [jsxRuntime.jsx("label", { className: "block text-sm font-semibold mb-2 text-gray-800", children: "Priority" }), jsxRuntime.jsx("div", { className: "flex gap-2", children: Object.keys(priorityColors).map((p) => (jsxRuntime.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 ? (jsxRuntime.jsxs("div", { className: "relative rounded-xl overflow-hidden shadow-md mb-5 group", children: [jsxRuntime.jsx("img", { src: annotatedScreenshot || currentScreenshot || "", alt: "Screenshot", className: "w-full block" }), jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" }), jsxRuntime.jsxs("div", { className: "absolute top-3 right-3 flex gap-2", children: [jsxRuntime.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: [jsxRuntime.jsx(EditIcon, { className: "w-3.5 h-3.5" }), " Edit"] }), jsxRuntime.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: [jsxRuntime.jsx(TrashIcon, { className: "w-3.5 h-3.5" }), " Remove"] })] })] })) : (jsxRuntime.jsxs("div", { className: "flex gap-3 mb-5", children: [jsxRuntime.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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "w-5 h-5 border-2 border-indigo-200 border-t-indigo-600 rounded-full animate-spin" }), "Capturing..."] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CameraIcon, { className: "w-5 h-5" }), " Screenshot"] })) }), jsxRuntime.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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "w-2.5 h-2.5 bg-red-600 rounded-sm animate-pulse" }), "Stop Recording"] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", strokeWidth: "2" }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "4", fill: "currentColor" })] }), "Record Screen"] })) })] })), recordedVideo && (jsxRuntime.jsxs("div", { className: "mb-5 relative rounded-xl overflow-hidden shadow-md border border-gray-200", children: [jsxRuntime.jsx("video", { src: recordedVideo, controls: true, className: "w-full h-auto" }), jsxRuntime.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: jsxRuntime.jsx(TrashIcon, { className: "w-3.5 h-3.5" }) })] })), jsxRuntime.jsxs("div", { className: "mb-5", children: [jsxRuntime.jsx("label", { className: "block text-sm font-semibold mb-2 text-gray-800", children: "Design Mockup" }), designMockup ? (jsxRuntime.jsxs("div", { className: "relative rounded-xl overflow-hidden shadow-md group border border-gray-200", children: [jsxRuntime.jsx("img", { src: designMockup, className: "w-full h-32 object-cover", alt: "Mockup" }), jsxRuntime.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: jsxRuntime.jsx(TrashIcon, { className: "w-3.5 h-3.5" }) })] })) : (jsxRuntime.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: [jsxRuntime.jsx("input", { type: "file", accept: "image/*", onChange: handleMockupUpload, className: "absolute inset-0 opacity-0 cursor-pointer w-full h-full" }), jsxRuntime.jsxs("span", { className: "text-sm text-gray-500 flex items-center gap-2 font-medium", children: [jsxRuntime.jsx(PlusIcon, { className: "w-4 h-4" }), " Upload Mockup"] })] }))] }), config.availableTags && config.availableTags.length > 0 && (jsxRuntime.jsxs("div", { className: "mb-5", children: [jsxRuntime.jsx("label", { className: "block text-sm font-semibold mb-2 text-gray-800", children: "Tags" }), jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: config.availableTags.map((tag) => (jsxRuntime.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-600 hover:bg-gray-200"), children: p }, p))) })] }), annotatedScreenshot || currentScreenshot ? (jsxRuntime.jsxs("div", { className: "relative rounded-xl overflow-hidden shadow-md mb-5 group", children: [jsxRuntime.jsx("img", { src: annotatedScreenshot || currentScreenshot || "", alt: "Screenshot", className: "w-full block" }), jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" }), jsxRuntime.jsxs("div", { className: "absolute top-3 right-3 flex gap-2", children: [jsxRuntime.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: [jsxRuntime.jsx(EditIcon, { className: "w-3.5 h-3.5" }), " Edit"] }), jsxRuntime.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: [jsxRuntime.jsx(TrashIcon, { className: "w-3.5 h-3.5" }), " Remove"] })] })] })) : (jsxRuntime.jsxs("div", { className: "flex gap-3 mb-5", children: [jsxRuntime.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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "w-5 h-5 border-2 border-indigo-200 border-t-indigo-600 rounded-full animate-spin" }), "Capturing..."] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CameraIcon, { className: "w-5 h-5" }), " Screenshot"] })) }), jsxRuntime.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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "w-2.5 h-2.5 bg-red-600 rounded-sm animate-pulse" }), "Stop Recording"] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", strokeWidth: "2" }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "4", fill: "currentColor" })] }), "Record Screen"] })) })] })), jsxRuntime.jsxs("div", { className: "mb-5", children: [jsxRuntime.jsxs("label", { className: "block text-sm font-semibold mb-2 text-gray-800", children: ["Pin Location", " ", !pinPosition && jsxRuntime.jsx("span", { className: "text-red-500", children: "*" })] }), pinPosition ? (jsxRuntime.jsxs("div", { className: "flex items-center gap-3 p-3 bg-green-50 border border-green-200 rounded-xl", children: [jsxRuntime.jsx("div", { className: "w-8 h-8 rounded-full bg-green-500 flex items-center justify-center shadow-md", children: jsxRuntime.jsx("svg", { className: "w-4 h-4 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M5 13l4 4L19 7" }) }) }), jsxRuntime.jsxs("div", { className: "flex-1", children: [jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-800", children: "Pin placed on page" }), jsxRuntime.jsxs("div", { className: "text-xs text-gray-600", children: ["Position: (", Math.round(pinPosition.pageX), ",", " ", Math.round(pinPosition.pageY), ")"] })] }), jsxRuntime.jsx("div", { onClick: () => setIsPlacingPin(true), className: "px-3 py-1.5 text-xs font-medium text-indigo-600 hover:text-indigo-700 hover:bg-indigo-50 rounded-lg transition-all", children: "Re-place" })] })) : (jsxRuntime.jsxs("div", { onClick: () => setIsPlacingPin(true), className: "p-4 bg-white border-2 border-dashed border-orange-300 rounded-xl cursor-pointer flex items-center justify-center gap-2.5 text-orange-600 text-sm font-medium hover:border-orange-400 hover:bg-orange-50 hover:shadow-md transition-all", children: [jsxRuntime.jsxs("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }), jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })] }), "Click to place pin on page"] }))] }), recordedVideo && (jsxRuntime.jsxs("div", { className: "mb-5 relative rounded-xl overflow-hidden shadow-md border border-gray-200", children: [jsxRuntime.jsx("video", { src: recordedVideo, controls: true, className: "w-full h-auto" }), jsxRuntime.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: jsxRuntime.jsx(TrashIcon, { className: "w-3.5 h-3.5" }) })] })), jsxRuntime.jsxs("div", { className: "mb-5", children: [jsxRuntime.jsx("label", { className: "block text-sm font-semibold mb-2 text-gray-800", children: "Design Mockup" }), designMockup ? (jsxRuntime.jsxs("div", { className: "relative rounded-xl overflow-hidden shadow-md group border border-gray-200", children: [jsxRuntime.jsx("img", { src: designMockup, className: "w-full h-32 object-cover", alt: "Mockup" }), jsxRuntime.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: jsxRuntime.jsx(TrashIcon, { className: "w-3.5 h-3.5" }) })] })) : (jsxRuntime.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: [jsxRuntime.jsx("input", { type: "file", accept: "image/*", onChange: handleMockupUpload, className: "absolute inset-0 opacity-0 cursor-pointer w-full h-full" }), jsxRuntime.jsxs("span", { className: "text-sm text-gray-500 flex items-center gap-2 font-medium", children: [jsxRuntime.jsx(PlusIcon, { className: "w-4 h-4" }), " Upload Mockup"] })] }))] }), config.availableTags && config.availableTags.length > 0 && (jsxRuntime.jsxs("div", { className: "mb-5", children: [jsxRuntime.jsx("label", { className: "block text-sm font-semibold mb-2 text-gray-800", children: "Tags" }), jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: config.availableTags.map((tag) => (jsxRuntime.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))) })] })), jsxRuntime.jsxs("div", { className: "flex gap-3 mt-6 pt-6 border-t border-gray-100", children: [jsxRuntime.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" }), jsxRuntime.jsx("div", { onClick: (e) => {
-                            const isValid = feedbackType === "copy-amendment" ? newCopy.trim() : title.trim();
+                            const isValid = feedbackType === "copy-amendment"
+                                ? newCopy.trim()
+                                : title.trim();
                             if (!isValid || isSubmitting)
                                 return;
                             const form = e.currentTarget.closest("form");
@@ -17628,12 +17696,18 @@ const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastC
                                 });
                                 form.dispatchEvent(submitEvent);
                             }
-                        }, className: cn("flex-1 py-3 px-5 rounded-xl text-sm font-semibold cursor-pointer transition-all text-white border-none hover:shadow-lg text-center", ((feedbackType === "copy-amendment" ? !newCopy.trim() : !title.trim()) || isSubmitting) &&
+                        }, className: cn("flex-1 py-3 px-5 rounded-xl text-sm font-semibold cursor-pointer transition-all text-white border-none hover:shadow-lg text-center", ((feedbackType === "copy-amendment"
+                            ? !newCopy.trim()
+                            : !title.trim()) ||
+                            isSubmitting) &&
                             "opacity-50 cursor-not-allowed"), style: {
-                            backgroundColor: (feedbackType === "copy-amendment" ? !newCopy.trim() : !title.trim()) || isSubmitting
+                            backgroundColor: (feedbackType === "copy-amendment"
+                                ? !newCopy.trim()
+                                : !title.trim()) || isSubmitting
                                 ? "#9ca3af"
                                 : "green-500",
-                        }, children: isSubmitting ? (isUploadingVideo ? (jsxRuntime.jsxs("span", { className: "flex items-center justify-center gap-2", children: [jsxRuntime.jsx("span", { className: "w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" }), jsxRuntime.jsx("span", { children: "Uploading video..." })] })) : (jsxRuntime.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")) })] })] }));
+                        }, children: isSubmitting ? (isUploadingVideo ? (jsxRuntime.jsxs("span", { className: "flex items-center justify-center gap-2", children: [jsxRuntime.jsx("span", { className: "w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" }), jsxRuntime.jsx("span", { children: "Uploading video..." })] })) : (jsxRuntime.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 = [
@@ -39766,6 +39840,7 @@ const subscribeFeedback = (projectId, callback) => {
                 componentName: data.componentName,
                 designMockup: data.designMockup,
                 screenRecording: data.screenRecording,
+                pinLocation: data.pinLocation,
             };
         });
         callback(feedbackItems);
@@ -39874,6 +39949,7 @@ const FeedbackDetail = ({ feedback: initialFeedback, onBack, onDelete, onUpdate,
     const [showFullScreenshot, setShowFullScreenshot] = require$$0.useState(false);
     const [copied, setCopied] = require$$0.useState(false);
     const [isEditing, setIsEditing] = require$$0.useState(false);
+    const [showDeleteConfirm, setShowDeleteConfirm] = require$$0.useState(false);
     // Feature 2 & 5 states
     const [showReplay, setShowReplay] = require$$0.useState(false);
     const [showOverlay, setShowOverlay] = require$$0.useState(false);
@@ -40027,9 +40103,8 @@ ${feedback.comments && feedback.comments.length > 0
         setNewComment("");
         setIsAddingComment(false);
     };
-    const handleDelete = async () => {
-        if (!confirm("Are you sure you want to delete this feedback?"))
-            return;
+    const handleDelete = () => setShowDeleteConfirm(true);
+    const handleConfirmDelete = async () => {
         // Delete from Firebase if initialized
         try {
             await deleteFeedback(feedback.id);
@@ -40043,8 +40118,10 @@ ${feedback.comments && feedback.comments.length > 0
         if (onDelete) {
             onDelete(feedback.id);
         }
+        setShowDeleteConfirm(false);
     };
-    return (jsxRuntime.jsxs("div", { className: "flex flex-col h-full px-5 overflow-y-auto", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between pb-3 mb-3 border-b border-gray-200", children: [jsxRuntime.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: [jsxRuntime.jsx(ArrowLeftIcon, { className: "w-4 h-4" }), "Back"] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CheckIcon, { className: "w-4 h-4" }), "Copied!"] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(CopyIcon, { className: "w-4 h-4" }) })) }), canEdit && (jsxRuntime.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: jsxRuntime.jsx(EditIcon, { className: "w-4 h-4" }) })), canDelete && onDelete && (jsxRuntime.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: jsxRuntime.jsx(TrashIcon, { className: "w-4 h-4" }) }))] })] }), jsxRuntime.jsxs("div", { className: "flex-1 pr-1", children: [jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsxs("div", { className: "flex items-start gap-2 mb-2", children: [jsxRuntime.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) && (jsxRuntime.jsxs("div", { className: "flex-shrink-0 mt-0.5", children: [feedback.pageMetadata.deviceType ===
+    const handleCancelDelete = () => setShowDeleteConfirm(false);
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col h-full px-5 overflow-y-auto", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between pb-3 mb-3 border-b border-gray-200", children: [jsxRuntime.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: [jsxRuntime.jsx(ArrowLeftIcon, { className: "w-4 h-4" }), "Back"] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CheckIcon, { className: "w-4 h-4" }), "Copied!"] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(CopyIcon, { className: "w-4 h-4" }) })) }), canEdit && (jsxRuntime.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: jsxRuntime.jsx(EditIcon, { className: "w-4 h-4" }) })), canDelete && onDelete && (jsxRuntime.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: jsxRuntime.jsx(TrashIcon, { className: "w-4 h-4" }) }))] })] }), showDeleteConfirm && (jsxRuntime.jsxs("div", { className: "mb-3 p-2 rounded-xl border border-red-200 bg-red-50 text-red-800 flex items-center gap-3", children: [jsxRuntime.jsx("div", { className: "flex-1 text-xs font-medium", children: "Delete this feedback?" }), jsxRuntime.jsx("div", { onClick: handleCancelDelete, className: "px-2 py-1.5 text-xs font-semibold text-red-700 rounded-lg hover:bg-red-100 cursor-pointer", children: "Cancel" }), jsxRuntime.jsx("div", { onClick: handleConfirmDelete, className: "px-2 py-1.5 text-xs font-semibold text-white bg-red-600 rounded-lg hover:bg-red-700 cursor-pointer", children: "Delete" })] })), jsxRuntime.jsxs("div", { className: "flex-1 pr-1", children: [jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsxs("div", { className: "flex items-start gap-2 mb-2", children: [jsxRuntime.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) && (jsxRuntime.jsxs("div", { className: "flex-shrink-0 mt-0.5", children: [feedback.pageMetadata.deviceType ===
                                                 "desktop" && (jsxRuntime.jsx(DesktopIcon, { className: "w-5 h-5 text-gray-500", title: "Desktop" })), feedback.pageMetadata.deviceType ===
                                                 "tablet" && (jsxRuntime.jsx(TabletIcon, { className: "w-5 h-5 text-gray-500", title: "Tablet" })), feedback.pageMetadata.deviceType ===
                                                 "mobile" && (jsxRuntime.jsx(MobileIcon, { className: "w-5 h-5 text-gray-500", title: "Mobile" }))] }))] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [feedback.type && (jsxRuntime.jsx("span", { className: cn("px-2 py-0.5 rounded-full text-[10px] font-medium uppercase", feedback.type === "copy-amendment"
@@ -40225,6 +40302,89 @@ const ViewportControls = () => {
                                 : "hover:bg-gray-100"), children: [jsxRuntime.jsx(DesktopIcon, { className: cn("w-4 h-4 transition-colors", isActivePreset(preset) ? "text-blue-600" : "text-gray-400 group-hover:text-gray-600") }), jsxRuntime.jsxs("div", { className: "flex-1", children: [jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-700 group-hover:text-gray-900", children: preset.name }), jsxRuntime.jsxs("div", { className: "text-xs text-gray-500", children: [preset.width, " \u00D7 ", preset.height] })] })] }, preset.name)))] }) }))] }));
 };
 
+const FeedbackPins = ({ onPinClick }) => {
+    const { feedbackItems, showPins } = useMarkupStore();
+    const [docSize, setDocSize] = require$$0.useState({ width: 0, height: 0 });
+    require$$0.useEffect(() => {
+        const measure = () => {
+            const root = document.documentElement;
+            const body = document.body;
+            const width = root.clientWidth || body.clientWidth || window.innerWidth;
+            const height = Math.max(root.scrollHeight, body.scrollHeight, root.clientHeight, body.clientHeight);
+            setDocSize({ width, height });
+        };
+        measure();
+        const resizeObserver = new ResizeObserver(() => measure());
+        resizeObserver.observe(document.documentElement);
+        resizeObserver.observe(document.body);
+        const handleResize = () => measure();
+        const handleScroll = () => measure();
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        return () => {
+            resizeObserver.disconnect();
+            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+    // Filter pins for current page URL
+    const currentPagePins = require$$0.useMemo(() => {
+        const currentUrl = window.location.href;
+        return feedbackItems.filter(item => {
+            var _a;
+            // Only show pins with pinLocation data
+            if (!item.pinLocation)
+                return false;
+            // Only show pins from the same page
+            if (((_a = item.pageMetadata) === null || _a === void 0 ? void 0 : _a.url) !== currentUrl)
+                return false;
+            return true;
+        });
+    }, [feedbackItems]);
+    // Don't show pins if toggle is off
+    if (!showPins)
+        return null;
+    if (currentPagePins.length === 0)
+        return null;
+    const containerStyle = {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: docSize.width || '100%',
+        height: docSize.height || '100%',
+        pointerEvents: 'none',
+        zIndex: 999998,
+    };
+    return (jsxRuntime.jsx("div", { className: "feedback-pins-container", "data-markup-pins": true, style: containerStyle, children: currentPagePins.map((feedback) => {
+            const { pinLocation } = feedback;
+            if (!pinLocation)
+                return null;
+            const pageWidth = docSize.width || pinLocation.pageWidth || pinLocation.viewportWidth || window.innerWidth;
+            const pageHeight = docSize.height || pinLocation.pageHeight || pinLocation.viewportHeight || window.innerHeight;
+            // Prefer stored percentages; fall back to computing from stored absolute coords
+            const leftPercent = typeof pinLocation.percentX === 'number'
+                ? pinLocation.percentX
+                : pageWidth ? (pinLocation.pageX / pageWidth) * 100 : 0;
+            const topPercent = typeof pinLocation.percentY === 'number'
+                ? pinLocation.percentY
+                : pageHeight ? (pinLocation.pageY / pageHeight) * 100 : 0;
+            const style = {
+                position: 'absolute',
+                left: `${leftPercent}%`,
+                top: `${topPercent}%`,
+                transform: 'translate(-50%, -50%)',
+                pointerEvents: 'auto',
+            };
+            return (jsxRuntime.jsx("div", { className: "feedback-pin-wrapper", style: style, onClick: () => onPinClick(feedback), children: jsxRuntime.jsxs("div", { className: "feedback-pin group relative cursor-pointer", children: [jsxRuntime.jsx("div", { className: `
+                                w-8 h-8 rounded-full flex items-center justify-center
+                                shadow-lg hover:shadow-xl transition-all
+                                ${feedback.status === 'open' ? 'bg-[#E6B6CF] hover:bg-[#d9a3c0]' : 'bg-green-500 hover:bg-green-600'}
+                                border-2 border-white
+                                hover:scale-110
+                            `, children: jsxRuntime.jsx(MessageIcon, { className: "w-4 h-4 text-white" }) }), jsxRuntime.jsxs("div", { className: "\n                                absolute bottom-full left-1/2 -translate-x-1/2 mb-2\n                                opacity-0 group-hover:opacity-100\n                                pointer-events-none\n                                transition-opacity duration-200\n                                bg-gray-900 text-white text-xs rounded-lg py-2 px-3\n                                whitespace-nowrap shadow-xl\n                                max-w-[200px]\n                            ", children: [jsxRuntime.jsx("div", { className: "font-semibold truncate", children: feedback.title || 'Feedback' }), jsxRuntime.jsx("div", { className: "text-gray-300 text-[10px] mt-0.5", children: "Click to view" }), jsxRuntime.jsx("div", { className: "\n                                    absolute top-full left-1/2 -translate-x-1/2\n                                    w-0 h-0\n                                    border-l-4 border-l-transparent\n                                    border-r-4 border-r-transparent\n                                    border-t-4 border-t-gray-900\n                                " })] })] }) }, feedback.id));
+        }) }));
+};
+
 const useFirebaseSync = () => {
     const config = useMarkupStore((state) => state.config);
     const setCurrentUser = useMarkupStore((state) => state.setCurrentUser);
@@ -40436,7 +40596,7 @@ const MarkupWidget = ({ config: userConfig, }) => {
             console.error('Failed to initialize Firebase:', error);
         }
     }
-    const { isOpen, setIsOpen, activeTab, setActiveTab, selectedFeedback, setSelectedFeedback, feedbackItems, addFeedbackItem, removeFeedbackItem, updateFeedback, config, setConfig, reset, isAuthenticated, currentUser, viewportMode, setViewportMode, } = useMarkupStore();
+    const { isOpen, setIsOpen, activeTab, setActiveTab, selectedFeedback, setSelectedFeedback, feedbackItems, addFeedbackItem, removeFeedbackItem, updateFeedback, config, setConfig, reset, isAuthenticated, currentUser, viewportMode, setViewportMode, showPins, setShowPins, } = useMarkupStore();
     // Initialize Firebase sync
     useFirebaseSync();
     // Initialize Session Recording (Feature 2)
@@ -40575,6 +40735,11 @@ const MarkupWidget = ({ config: userConfig, }) => {
     const handleSelectFeedback = require$$0.useCallback((feedback) => {
         setSelectedFeedback(feedback);
     }, [setSelectedFeedback]);
+    const handlePinClick = require$$0.useCallback((feedback) => {
+        setIsOpen(true);
+        setActiveTab("list");
+        setSelectedFeedback(feedback);
+    }, [setIsOpen, setActiveTab, setSelectedFeedback]);
     const handleBackFromDetail = require$$0.useCallback(() => {
         setSelectedFeedback(null);
         setViewportMode(null);
@@ -40618,11 +40783,14 @@ const MarkupWidget = ({ config: userConfig, }) => {
             ? adjustColor(config.primaryColor, -20)
             : "#4f46e5",
     });
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ViewportControls, {}), jsxRuntime.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: {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FeedbackPins, { onPinClick: handlePinClick }), jsxRuntime.jsx(ViewportControls, {}), jsxRuntime.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: [jsxRuntime.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 && jsxRuntime.jsx(CloseIcon, { className: "w-5 h-5" }), jsxRuntime.jsx("span", { className: "text-black", style: { writingMode: "sideways-lr" }, children: "Siren" }), openFeedbackCount > 0 && (jsxRuntime.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 }))] }), jsxRuntime.jsxs("div", { className: "bg-white w-[500px] h-[750px] rounded-l-xl shadow-2xl overflow-hidden flex flex-col text-black", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-5 py-4 text-black", style: { backgroundColor: "var(--markup-primary)" }, children: [jsxRuntime.jsx("h2", { className: "text-base font-semibold m-0", children: ((_a = config.labels) === null || _a === void 0 ? void 0 : _a.feedbackTitle) || "Feedback" }), isAuthenticated && currentUser && (jsxRuntime.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: jsxRuntime.jsx("h2", { children: "Sign Out" }) }))] }), !isAuthenticated ? (jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children: jsxRuntime.jsx(AuthForm, { onSuccess: handleAuthSuccess }) })) : selectedFeedback ? (jsxRuntime.jsx(FeedbackDetail, { feedback: selectedFeedback, onBack: handleBackFromDetail, onDelete: handleDeleteFeedback, onUpdate: handleUpdateFeedback })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "flex border-b border-gray-200 px-5", children: [jsxRuntime.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"
+                }, "data-markup-widget": true, children: [jsxRuntime.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 && jsxRuntime.jsx(CloseIcon, { className: "w-5 h-5" }), jsxRuntime.jsx("span", { className: "text-black", style: { writingMode: "sideways-lr" }, children: "Siren" }), openFeedbackCount > 0 && (jsxRuntime.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 }))] }), jsxRuntime.jsxs("div", { className: "bg-white w-[500px] h-[750px] rounded-l-xl shadow-2xl overflow-hidden flex flex-col text-black", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-5 py-4 text-black", style: { backgroundColor: "var(--markup-primary)" }, children: [jsxRuntime.jsx("h2", { className: "text-base font-semibold m-0", children: ((_a = config.labels) === null || _a === void 0 ? void 0 : _a.feedbackTitle) || "Feedback" }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsxs("div", { onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    setShowPins(!showPins);
+                                                }, className: "p-2 text-xs font-medium bg-gray-50 border border-gray-200 text-black rounded-lg hover:bg-gray-100 cursor-pointer transition-all flex items-center gap-1.5", title: showPins ? "Hide pins" : "Show pins", children: [jsxRuntime.jsxs("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }), jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })] }), showPins ? 'Hide' : 'Show'] }), isAuthenticated && currentUser && (jsxRuntime.jsx("div", { onClick: handleLogout, className: "text-xs  py-2  px-2 bg-gray-50 border border-gray-200  text-gray-900 rounded-lg  hover:bg-gray-200  cursor-pointer transition-all flex items-center gap-2", children: jsxRuntime.jsx("h2", { children: "Sign Out" }) }))] })] }), !isAuthenticated ? (jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children: jsxRuntime.jsx(AuthForm, { onSuccess: handleAuthSuccess }) })) : selectedFeedback ? (jsxRuntime.jsx(FeedbackDetail, { feedback: selectedFeedback, onBack: handleBackFromDetail, onDelete: handleDeleteFeedback, onUpdate: handleUpdateFeedback })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "flex border-b border-gray-200 px-5", children: [jsxRuntime.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: [jsxRuntime.jsx(PlusIcon, { className: "w-3.5 h-3.5" }), "New"] }), jsxRuntime.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"