@sirendesign/markup 1.0.9 → 1.0.11

package/README.md

@@ -14,12 +14,16 @@ A powerful web markup and feedback tool for collecting visual feedback from clie
 
 ## Features
 
-- 📸 **Screenshot Capture** - Capture full-page screenshots with one click
+- 📸 **Screenshot Capture** - Capture viewport screenshots with one click
 - ✏️ **Annotation Tools** - Add arrows, rectangles, circles, highlights, text, and freehand drawings
-- ✂️ **Copy Amendments** - Track text changes with before/after comparison
+- ✂️ **Copy Amendments** - Click on text to suggest changes with before/after comparison
+- 📋 **Session Activity Timeline** - Records user interactions (clicks, navigation, scrolls, inputs) during the session
+- 🎨 **Design Mockup Overlay** - Upload mockups and overlay them on the live site for pixel-perfect comparison
+- 🔍 **Component Detection** - Automatically identifies React components and HTML elements
 - 💬 **Feedback Management** - Create, view, and manage feedback items
-- 🏷️ **Tags & Priority** - Organize feedback with custom tags and priority levels
+- 🏷️ **Tags & Priority** - Organize feedback with custom tags and priority levels (Low, Medium, High, Critical)
 - 📊 **Status Tracking** - Track feedback status (Open, In Progress, Resolved, Closed)
+- 👥 **Role-Based Permissions** - Edit/Delete restricted to developers and feedback creators
 - 💾 **Local or Cloud Storage** - Works offline or with Firebase sync
 - 🔌 **API Integration** - Optional API endpoint for server-side storage
 - ⌨️ **Keyboard Shortcuts** - Quick access with customizable shortcuts
@@ -293,26 +297,35 @@ Override CSS variables for custom theming:
 />
 ```
 
-## Types
+## Advanced Features
 
-```typescript
-import type {
-  FeedbackItem,
-  FeedbackStatus,
-  FeedbackPriority,
-  Annotation,
-  AnnotationType,
-  UserInfo,
-  Comment,
-  MarkupConfig,
-} from '@company/markup';
-```
+### Session Activity Timeline
 
-## Development
+The widget automatically tracks user interactions during their session, including:
+- **Clicks** - Element details, text content, HTML structure
+- **Navigation** - URL changes and page visits
+- **Scrolling** - Scroll position changes
+- **Input Events** - Form interactions (values are masked for privacy)
+
+When viewing feedback, click "Play Session" to see a chronological timeline of these actions, helping developers understand the user's journey before reporting an issue.
+
+### Design Mockup Overlay
+
+Upload a design mockup image and overlay it on the live site to compare:
+1. Click "Upload Design Mockup" when creating feedback
+2. Select your design file (PNG, JPG, SVG)
+3. View the feedback and toggle the overlay with opacity slider
+4. Perfect for pixel-perfect QA and design review
+
+### Component Detection
+
+The tool automatically identifies:
+- React component names (from `data-component` or React Fiber)
+- HTML element structure (tag, id, classes)
+- Text content of clicked elements
+
+This information is attached to copy amendment feedback to help developers locate exact elements in code.
 
-```bash
-# Install dependencies
-npm install
 
 # Build the package
 npm run build

package/dist/components/FeedbackForm.d.ts

@@ -3,6 +3,10 @@ import type { FeedbackItem } from "../types";
 interface FeedbackFormProps {
     onSubmit: (feedback: FeedbackItem) => void;
     onCancel: () => void;
+    initialData?: FeedbackItem;
+    getSessionEvents?: () => string | undefined;
+    lastClickedElement?: Element | null;
+    lastClickedText?: string;
 }
 export declare const FeedbackForm: React.FC<FeedbackFormProps>;
 export default FeedbackForm;

package/dist/components/Icons.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-interface IconProps extends React.SVGProps<SVGSVGElement> {
+import React from "react";
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
     className?: string;
 }
 export declare const MessageIcon: React.FC<IconProps>;
@@ -17,6 +17,7 @@ export declare const BackIcon: React.FC<IconProps>;
 export declare const TrashIcon: React.FC<IconProps>;
 export declare const DownloadIcon: React.FC<IconProps>;
 export declare const EditIcon: React.FC<IconProps>;
+export declare const CopyIcon: React.FC<IconProps>;
 export declare const ClockIcon: React.FC<IconProps>;
 export declare const LinkIcon: React.FC<IconProps>;
 export declare const InboxIcon: React.FC<IconProps>;
@@ -33,4 +34,6 @@ export declare const UserIcon: React.FC<IconProps>;
 export declare const ZoomInIcon: React.FC<IconProps>;
 export declare const CalendarIcon: React.FC<IconProps>;
 export declare const ChevronRightIcon: React.FC<IconProps>;
-export {};
+export declare const DesktopIcon: React.FC<IconProps>;
+export declare const TabletIcon: React.FC<IconProps>;
+export declare const MobileIcon: React.FC<IconProps>;

package/dist/components/NewIcons.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconProps } from './Icons';
+export declare const PlayIcon: React.FC<IconProps>;
+export declare const LayersIcon: React.FC<IconProps>;

package/dist/components/ViewportControls.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const ViewportControls: React.FC;

package/dist/components/index.d.ts

@@ -4,3 +4,4 @@ export { FeedbackList } from './FeedbackList';
 export { FeedbackDetail } from './FeedbackDetail';
 export { AnnotationOverlay } from './AnnotationOverlay';
 export { DebugPanel } from './DebugPanel';
+export { ViewportControls } from './ViewportControls';

package/dist/hooks/useSessionRecording.d.ts

@@ -0,0 +1,4 @@
+export declare const useSessionRecording: () => {
+    getSessionEvents: () => string | undefined;
+    clearSession: () => void;
+};