feat: React 19 & Next.js 16 Metadata Support

_package-export/src/components/annotation-popup-css/index.tsx

@@ -34,6 +34,12 @@ export interface AnnotationPopupCSSProps {
   lightMode?: boolean;
   /** Computed styles for the selected element */
   computedStyles?: Record<string, string>;
+  /** React component name */
+  reactComponent?: string;
+  /** React component hierarchy */
+  reactHierarchy?: string[];
+  /** React source file location */
+  reactSource?: string;
 }
 
 export interface AnnotationPopupCSSHandle {
@@ -71,6 +77,8 @@ export const AnnotationPopupCSS = forwardRef<AnnotationPopupCSSHandle, Annotatio
       isExiting = false,
       lightMode = false,
       computedStyles,
+      reactComponent,
+      reactHierarchy,
     },
     ref
   ) {
@@ -211,6 +219,34 @@ export const AnnotationPopupCSS = forwardRef<AnnotationPopupCSSHandle, Annotatio
           {timestamp && <span className={styles.timestamp}>{timestamp}</span>}
         </div>
 
+        {/* React Component Metadata */}
+        {reactComponent && (
+          <div className={styles.reactInfo}>
+            <div className={styles.reactComponent}>
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                style={{ color: "#61dafb", marginRight: "4px" }}
+              >
+                <circle cx="12" cy="12" r="2" />
+                <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
+              </svg>
+              <span>{reactComponent}</span>
+            </div>
+            {reactHierarchy && reactHierarchy.length > 1 && (
+              <div className={styles.reactHierarchy}>
+                {reactHierarchy.slice(1, 4).join(" < ")}
+              </div>
+            )}
+          </div>
+        )}
+
         {/* Collapsible computed styles section - uses grid-template-rows for smooth animation */}
         {computedStyles && Object.keys(computedStyles).length > 0 && (
           <div className={`${styles.stylesWrapper} ${isStylesExpanded ? styles.expanded : ""}`}>

_package-export/src/components/annotation-popup-css/styles.module.scss

@@ -203,6 +203,42 @@ $green: #34c759;
     flex-shrink: 0;
 }
 
+// =============================================================================
+// React Metadata
+// =============================================================================
+
+.reactInfo {
+    margin-bottom: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+}
+
+.reactComponent {
+    display: flex;
+    align-items: center;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: #fff;
+    line-height: 1;
+
+    span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+.reactHierarchy {
+    font-size: 0.625rem;
+    color: rgba(255, 255, 255, 0.4);
+    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding-left: 16px; // Align with component name icon
+}
+
 // =============================================================================
 // Quote
 // =============================================================================

_package-export/src/components/page-toolbar-css/index.tsx

@@ -46,6 +46,10 @@ import {
   getAccessibilityInfo,
   getNearbyElements,
 } from "../../utils/element-identification";
+import {
+  getSourceLocation,
+  getComponentHierarchy,
+} from "../../utils/source-location";
 import {
   loadAnnotations,
   saveAnnotations,
@@ -66,6 +70,7 @@ type HoverInfo = {
   element: string;
   elementPath: string;
   rect: DOMRect | null;
+  reactComponent?: string;
 };
 
 type OutputDetailLevel = "compact" | "standard" | "detailed" | "forensic";
@@ -204,10 +209,23 @@ function generateOutput(
       if (a.nearbyElements) {
         output += `**Nearby Elements:** ${a.nearbyElements}\n`;
       }
+      // React Forensic Data
+      if (a.reactComponent) {
+        output += `**React Component:** ${a.reactComponent}\n`;
+      }
+      if (a.reactHierarchy) {
+        output += `**React Hierarchy:** ${a.reactHierarchy.join(" > ")}\n`;
+      }
+      if (a.reactSource) {
+        output += `**React Source:** ${a.reactSource}\n`;
+      }
       output += `**Feedback:** ${a.comment}\n\n`;
     } else {
       // Standard and detailed modes
       output += `### ${i + 1}. ${a.element}\n`;
+      if (a.reactComponent) {
+        output += `**Component:** ${a.reactComponent}\n`;
+      }
       output += `**Location:** ${a.elementPath}\n`;
 
       if (detailLevel === "detailed") {
@@ -307,6 +325,9 @@ export function PageFeedbackToolbarCSS({
     computedStyles?: string;
     computedStylesObj?: Record<string, string>;
     nearbyElements?: string;
+    reactComponent?: string;
+    reactHierarchy?: string[];
+    reactSource?: string;
   } | null>(null);
   const [copied, setCopied] = useState(false);
   const [cleared, setCleared] = useState(false);
@@ -686,7 +707,15 @@ export function PageFeedbackToolbarCSS({
       const { name, path } = identifyElement(elementUnder);
       const rect = elementUnder.getBoundingClientRect();
 
-      setHoverInfo({ element: name, elementPath: path, rect });
+      // Capture React Metadata for hover tooltip
+      const reactInfo = getSourceLocation(elementUnder);
+
+      setHoverInfo({ 
+        element: name, 
+        elementPath: path, 
+        rect,
+        reactComponent: reactInfo.found ? reactInfo.source?.componentName : undefined
+      });
       setHoverPosition({ x: e.clientX, y: e.clientY });
     };
 
@@ -764,6 +793,14 @@ export function PageFeedbackToolbarCSS({
       const computedStylesObj = getDetailedComputedStyles(elementUnder);
       const computedStylesStr = getForensicComputedStyles(elementUnder);
 
+      // Capture React Metadata
+      const reactInfo = getSourceLocation(elementUnder);
+      const reactHierarchy = getComponentHierarchy(elementUnder);
+
+      const hierarchyNames = reactHierarchy
+        .map((h) => h.componentName)
+        .filter(Boolean) as string[];
+
       setPendingAnnotation({
         x,
         y,
@@ -785,6 +822,9 @@ export function PageFeedbackToolbarCSS({
         computedStyles: computedStylesStr,
         computedStylesObj,
         nearbyElements: getNearbyElements(elementUnder),
+        reactComponent: reactInfo.found ? reactInfo.source?.componentName : undefined,
+        reactHierarchy: hierarchyNames.length > 0 ? hierarchyNames : undefined,
+        reactSource: reactInfo.found ? reactInfo.source?.fileName : undefined,
       });
       setHoverInfo(null);
     };
@@ -1249,6 +1289,9 @@ export function PageFeedbackToolbarCSS({
         accessibility: pendingAnnotation.accessibility,
         computedStyles: pendingAnnotation.computedStyles,
         nearbyElements: pendingAnnotation.nearbyElements,
+        reactComponent: pendingAnnotation.reactComponent,
+        reactHierarchy: pendingAnnotation.reactHierarchy,
+        reactSource: pendingAnnotation.reactSource,
       };
 
       setAnnotations((prev) => [...prev, newAnnotation]);
@@ -2311,6 +2354,13 @@ export function PageFeedbackToolbarCSS({
                 top: Math.max(hoverPosition.y - 32, 8),
               }}
             >
+              {hoverInfo.reactComponent && (
+                <span className={styles.hoverReact}>
+                  <span className={styles.hoverReactSlash}>/</span>
+                  {hoverInfo.reactComponent}
+                  <span className={styles.hoverDivider}>•</span>
+                </span>
+              )}
               {hoverInfo.element}
             </div>
           )}
@@ -2355,6 +2405,9 @@ export function PageFeedbackToolbarCSS({
                 element={pendingAnnotation.element}
                 selectedText={pendingAnnotation.selectedText}
                 computedStyles={pendingAnnotation.computedStylesObj}
+                reactComponent={pendingAnnotation.reactComponent}
+                reactHierarchy={pendingAnnotation.reactHierarchy}
+                reactSource={pendingAnnotation.reactSource}
                 placeholder={
                   pendingAnnotation.element === "Area selection"
                     ? "What should change in this area?"
@@ -2417,6 +2470,9 @@ export function PageFeedbackToolbarCSS({
                 element={editingAnnotation.element}
                 selectedText={editingAnnotation.selectedText}
                 computedStyles={parseComputedStylesString(editingAnnotation.computedStyles)}
+                reactComponent={editingAnnotation.reactComponent}
+                reactHierarchy={editingAnnotation.reactHierarchy}
+                reactSource={editingAnnotation.reactSource}
                 placeholder="Edit your feedback..."
                 initialValue={editingAnnotation.comment}
                 submitLabel="Save"

_package-export/src/components/page-toolbar-css/styles.module.scss

@@ -624,6 +624,22 @@ $green: #34c759;
     }
 }
 
+.hoverReact {
+    opacity: 0.9;
+    margin-right: 4px;
+}
+
+.hoverReactSlash {
+    color: #AF52DE; // Purple accent for React info
+    font-weight: bold;
+    margin-right: 2px;
+}
+
+.hoverDivider {
+    margin: 0 4px;
+    opacity: 0.4;
+}
+
 // =============================================================================
 // Markers Layer
 // =============================================================================

_package-export/src/types.ts

@@ -20,6 +20,10 @@ export type Annotation = {
   accessibility?: string;
   isMultiSelect?: boolean; // true if created via drag selection
   isFixed?: boolean; // true if element has fixed/sticky positioning (marker stays fixed)
+  // Framework Metadata
+  reactComponent?: string;
+  reactHierarchy?: string[];
+  reactSource?: string;
 };
 
 // TODO: Add configuration types when abstracting config