web-remarq 0.2.5 → 0.3.0

package/dist/index.d.cts

@@ -17,6 +17,10 @@ interface ElementFingerprint {
     parentAnchor: string | null;
     rawClasses?: string[];
     cssModules?: CSSModuleClass[];
+    sourceLocation: string | null;
+    componentName: string | null;
+    detectedSource: string | null;
+    detectedComponent: string | null;
 }
 interface Annotation {
     id: string;
@@ -43,16 +47,49 @@ interface ImportResult {
     otherBreakpoint: number;
     detached: number;
 }
+type SearchConfidence = 'high' | 'medium' | 'low';
+interface GrepQuery {
+    query: string;
+    glob: string;
+    confidence: SearchConfidence;
+}
+interface AgentSearchHints {
+    grepQueries: GrepQuery[];
+    domContext: string;
+    tagName: string;
+    classes: string[];
+}
+interface AgentAnnotationSource {
+    file: string;
+    line: number;
+    column: number;
+    component: string | null;
+}
+interface AgentAnnotation {
+    id: string;
+    route: string;
+    comment: string;
+    status: 'pending' | 'resolved';
+    timestamp: number;
+    source: AgentAnnotationSource | null;
+    searchHints: AgentSearchHints;
+}
+interface AgentExport {
+    version: 1;
+    format: 'agent';
+    viewportBucket: number;
+    annotations: AgentAnnotation[];
+}
 
 declare const WebRemarq: {
     init(opts?: WebRemarqOptions): void;
     destroy(): void;
     setTheme(theme: "light" | "dark"): void;
-    export(format: "md" | "json"): void;
-    copy(): void;
+    export(format: "md" | "json" | "agent"): void;
+    copy(format?: "md" | "agent"): void;
     import(file: File): Promise<ImportResult>;
     getAnnotations(route?: string): Annotation[];
     clearAll(): void;
 };
 
-export { type Annotation, type AnnotationStore, type CSSModuleClass, type ElementFingerprint, type ImportResult, WebRemarq, type WebRemarqOptions };
+export { type AgentAnnotation, type AgentExport, type Annotation, type AnnotationStore, type CSSModuleClass, type ElementFingerprint, type ImportResult, WebRemarq, type WebRemarqOptions };

package/dist/index.d.ts

@@ -17,6 +17,10 @@ interface ElementFingerprint {
     parentAnchor: string | null;
     rawClasses?: string[];
     cssModules?: CSSModuleClass[];
+    sourceLocation: string | null;
+    componentName: string | null;
+    detectedSource: string | null;
+    detectedComponent: string | null;
 }
 interface Annotation {
     id: string;
@@ -43,16 +47,49 @@ interface ImportResult {
     otherBreakpoint: number;
     detached: number;
 }
+type SearchConfidence = 'high' | 'medium' | 'low';
+interface GrepQuery {
+    query: string;
+    glob: string;
+    confidence: SearchConfidence;
+}
+interface AgentSearchHints {
+    grepQueries: GrepQuery[];
+    domContext: string;
+    tagName: string;
+    classes: string[];
+}
+interface AgentAnnotationSource {
+    file: string;
+    line: number;
+    column: number;
+    component: string | null;
+}
+interface AgentAnnotation {
+    id: string;
+    route: string;
+    comment: string;
+    status: 'pending' | 'resolved';
+    timestamp: number;
+    source: AgentAnnotationSource | null;
+    searchHints: AgentSearchHints;
+}
+interface AgentExport {
+    version: 1;
+    format: 'agent';
+    viewportBucket: number;
+    annotations: AgentAnnotation[];
+}
 
 declare const WebRemarq: {
     init(opts?: WebRemarqOptions): void;
     destroy(): void;
     setTheme(theme: "light" | "dark"): void;
-    export(format: "md" | "json"): void;
-    copy(): void;
+    export(format: "md" | "json" | "agent"): void;
+    copy(format?: "md" | "agent"): void;
     import(file: File): Promise<ImportResult>;
     getAnnotations(route?: string): Annotation[];
     clearAll(): void;
 };
 
-export { type Annotation, type AnnotationStore, type CSSModuleClass, type ElementFingerprint, type ImportResult, WebRemarq, type WebRemarqOptions };
+export { type AgentAnnotation, type AgentExport, type Annotation, type AnnotationStore, type CSSModuleClass, type ElementFingerprint, type ImportResult, WebRemarq, type WebRemarqOptions };

package/dist/index.js

@@ -194,12 +194,54 @@ function decomposeCSSModules(classes) {
   return result;
 }
 
+// src/core/source-detect.ts
+function detectRemarqPlugin(el) {
+  const source = el.getAttribute("data-remarq-source");
+  if (!source) return { source: null, component: null };
+  return {
+    source,
+    component: el.getAttribute("data-remarq-component")
+  };
+}
+function detectExternalSource(el) {
+  var _a;
+  const source = (_a = el.dataset.source) != null ? _a : el.getAttribute("data-locator");
+  if (!source) return { source: null, component: null };
+  return { source, component: null };
+}
+function detectReactFiber(el) {
+  var _a, _b, _c, _d;
+  const key = Object.keys(el).find((k) => k.startsWith("__reactFiber$"));
+  if (!key) return { source: null, component: null };
+  let current = el[key];
+  let depth = 0;
+  while (current && depth < 15) {
+    const debugSource = current._debugSource;
+    if (debugSource == null ? void 0 : debugSource.fileName) {
+      const source = `${debugSource.fileName}:${(_a = debugSource.lineNumber) != null ? _a : 0}:${(_b = debugSource.columnNumber) != null ? _b : 0}`;
+      const fiberType = current.type;
+      const component = typeof fiberType === "object" && fiberType ? (_d = (_c = fiberType.displayName) != null ? _c : fiberType.name) != null ? _d : null : null;
+      return { source, component };
+    }
+    current = current.return;
+    depth++;
+  }
+  return { source: null, component: null };
+}
+function detectSource(el) {
+  const external = detectExternalSource(el);
+  if (external.source) return external;
+  const fiber = detectReactFiber(el);
+  if (fiber.source) return fiber;
+  return { source: null, component: null };
+}
+
 // src/core/fingerprint.ts
 var TEXT_MAX_LENGTH = 50;
 function createFingerprint(el, options2) {
   var _a, _b, _c, _d, _e, _f, _g;
   const dataAttr = (_a = options2 == null ? void 0 : options2.dataAttribute) != null ? _a : "data-annotate";
-  return {
+  return __spreadValues({
     dataAnnotate: (_b = el.getAttribute(dataAttr)) != null ? _b : null,
     dataTestId: (_e = (_d = (_c = el.getAttribute("data-testid")) != null ? _c : el.getAttribute("data-test")) != null ? _d : el.getAttribute("data-cy")) != null ? _e : null,
     id: getStableId(el),
@@ -216,6 +258,24 @@ function createFingerprint(el, options2) {
     parentAnchor: findParentAnchor(el, dataAttr),
     rawClasses: Array.from(el.classList),
     cssModules: decomposeCSSModules(Array.from(el.classList))
+  }, resolveSourceFields(el));
+}
+function resolveSourceFields(el) {
+  const plugin = detectRemarqPlugin(el);
+  if (plugin.source) {
+    return {
+      sourceLocation: plugin.source,
+      componentName: plugin.component,
+      detectedSource: null,
+      detectedComponent: null
+    };
+  }
+  const detected = detectSource(el);
+  return {
+    sourceLocation: null,
+    componentName: null,
+    detectedSource: detected.source,
+    detectedComponent: detected.component
   };
 }
 function getStableId(el) {
@@ -401,6 +461,88 @@ function matchElement(fp, options2) {
   return bestScore >= MATCH_THRESHOLD ? bestEl : null;
 }
 
+// src/core/agent-export.ts
+function parseSourceLocation(raw) {
+  const parts = raw.split(":");
+  if (parts.length < 2) return null;
+  const column = parseInt(parts.pop(), 10);
+  const line = parseInt(parts.pop(), 10);
+  const file = parts.join(":");
+  if (!file || isNaN(line)) return null;
+  return { file, line, column: isNaN(column) ? 0 : column };
+}
+function resolveSource(fp) {
+  var _a, _b;
+  if (fp.sourceLocation) {
+    const parsed = parseSourceLocation(fp.sourceLocation);
+    if (parsed) return __spreadProps(__spreadValues({}, parsed), { component: (_a = fp.componentName) != null ? _a : null });
+  }
+  if (fp.detectedSource) {
+    const parsed = parseSourceLocation(fp.detectedSource);
+    if (parsed) return __spreadProps(__spreadValues({}, parsed), { component: (_b = fp.detectedComponent) != null ? _b : null });
+  }
+  return null;
+}
+var TEMPLATE_GLOB = "*.{tsx,jsx,vue,svelte,html}";
+var CSS_MODULE_GLOB = "*.module.{css,scss,less}";
+var COMPONENT_GLOB = "*.{tsx,jsx,vue,ts,js}";
+function buildSearchHints(fp) {
+  var _a, _b;
+  const grepQueries = [];
+  if (fp.dataAnnotate) {
+    grepQueries.push({ query: `data-annotate="${fp.dataAnnotate}"`, glob: TEMPLATE_GLOB, confidence: "high" });
+  }
+  if (fp.dataTestId) {
+    grepQueries.push({ query: `data-testid="${fp.dataTestId}"`, glob: TEMPLATE_GLOB, confidence: "high" });
+  }
+  if (fp.id) {
+    grepQueries.push({ query: `id="${fp.id}"`, glob: TEMPLATE_GLOB, confidence: "high" });
+  }
+  if (fp.ariaLabel) {
+    grepQueries.push({ query: `aria-label="${fp.ariaLabel}"`, glob: TEMPLATE_GLOB, confidence: "high" });
+  }
+  if (fp.textContent) {
+    grepQueries.push({ query: `"${fp.textContent}"`, glob: TEMPLATE_GLOB, confidence: "medium" });
+  }
+  if (fp.role) {
+    grepQueries.push({ query: `role="${fp.role}"`, glob: TEMPLATE_GLOB, confidence: "medium" });
+  }
+  if ((_a = fp.cssModules) == null ? void 0 : _a.length) {
+    for (const mod of fp.cssModules) {
+      grepQueries.push({ query: `.${mod.localName}`, glob: CSS_MODULE_GLOB, confidence: "medium" });
+      grepQueries.push({ query: `styles.${mod.localName}`, glob: COMPONENT_GLOB, confidence: "medium" });
+    }
+  }
+  if (fp.stableClasses.length) {
+    for (const cls of fp.stableClasses.slice(0, 3)) {
+      grepQueries.push({ query: `"${cls}"`, glob: TEMPLATE_GLOB, confidence: "low" });
+    }
+  }
+  return {
+    grepQueries,
+    domContext: fp.domPath,
+    tagName: fp.tagName,
+    classes: (_b = fp.rawClasses) != null ? _b : fp.stableClasses
+  };
+}
+function generateAgentExport(annotations, viewportBucket) {
+  const agentAnnotations = annotations.map((ann) => ({
+    id: ann.id,
+    route: ann.route,
+    comment: ann.comment,
+    status: ann.status,
+    timestamp: ann.timestamp,
+    source: resolveSource(ann.fingerprint),
+    searchHints: buildSearchHints(ann.fingerprint)
+  }));
+  return {
+    version: 1,
+    format: "agent",
+    viewportBucket,
+    annotations: agentAnnotations
+  };
+}
+
 // src/ui/styles.ts
 var STYLES_ID = "data-remarq-styles";
 var CSS = `
@@ -1955,6 +2097,22 @@ function copyToClipboard() {
     console.warn("[web-remarq] Clipboard write failed");
   });
 }
+function exportAgent() {
+  const anns = storage.getAll();
+  if (!anns.length) return;
+  const data = generateAgentExport(anns, toBucket(window.innerWidth));
+  const json = JSON.stringify(data, null, 2);
+  downloadFile(json, `remarq-agent-${Date.now()}.json`, "application/json");
+}
+function copyAgentToClipboard() {
+  const anns = storage.getAll();
+  if (!anns.length) return;
+  const data = generateAgentExport(anns, toBucket(window.innerWidth));
+  const json = JSON.stringify(data, null, 2);
+  navigator.clipboard.writeText(json).catch(() => {
+    console.warn("[web-remarq] Clipboard write failed");
+  });
+}
 function setupMutationObserver() {
   mutationObserver = new MutationObserver((mutations) => {
     for (const m of mutations) {
@@ -2060,10 +2218,12 @@ var WebRemarq = {
   },
   export(format) {
     if (format === "md") exportMarkdown();
-    else exportJSON();
+    else if (format === "json") exportJSON();
+    else exportAgent();
   },
-  copy() {
-    copyToClipboard();
+  copy(format) {
+    if (format === "agent") copyAgentToClipboard();
+    else copyToClipboard();
   },
   async import(file) {
     const text = await file.text();