npm - @supernal/interface - Versions diffs - 1.0.8 → 1.0.11 - Mend

@supernal/interface 1.0.8 → 1.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (294) hide show

package/dist/esm/src/testing/graph-tester/screenshot/HTMLAnnotationRenderer.js ADDED Viewed

@@ -0,0 +1,547 @@
+/**
+ * HTML annotation renderer.
+ *
+ * Generates interactive HTML overlay with:
+ * - Hoverable bounding boxes
+ * - Sidebar with annotation details
+ * - Click-to-highlight functionality
+ * - Search/filter capabilities
+ *
+ * @packageDocumentation
+ */
+import * as fs from 'fs/promises';
+/**
+ * HTML annotation renderer.
+ *
+ * @example
+ * ```typescript
+ * const renderer = new HTMLAnnotationRenderer({
+ *   includeSidebar: true,
+ *   enableHover: true,
+ *   outputPath: './screenshots/dashboard.html'
+ * });
+ *
+ * const result = await renderer.render(annotatedScreenshot);
+ * console.log(`HTML rendered: ${result.outputPath}`);
+ * ```
+ */
+export class HTMLAnnotationRenderer {
+    constructor(config) {
+        this.config = {
+            includeSidebar: true,
+            enableHover: true,
+            enableClickToHighlight: true,
+            boundingBoxColor: '#00ff00',
+            boundingBoxWidth: 2,
+            ...config,
+        };
+    }
+    /**
+     * Render annotated screenshot as interactive HTML.
+     *
+     * @param screenshot - Annotated screenshot
+     * @returns Render result
+     */
+    async render(screenshot) {
+        const startTime = Date.now();
+        // Generate HTML
+        const html = this.generateHTML(screenshot);
+        // Write to file
+        await fs.writeFile(this.config.outputPath, html, 'utf-8');
+        const stats = await fs.stat(this.config.outputPath);
+        return {
+            outputPath: this.config.outputPath,
+            rendererType: 'html',
+            fileSize: stats.size,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Generate complete HTML document.
+     *
+     * @param screenshot - Annotated screenshot
+     * @returns HTML string
+     */
+    generateHTML(screenshot) {
+        const { annotations, pageMetadata } = screenshot;
+        // Convert screenshot buffer to base64 data URL
+        const screenshotDataUrl = `data:image/png;base64,${screenshot.screenshot.toString('base64')}`;
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Annotated Screenshot: ${screenshot.route}</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #1e1e1e;
+      color: #d4d4d4;
+      overflow: hidden;
+    }
+    .container {
+      display: flex;
+      height: 100vh;
+    }
+    .screenshot-container {
+      flex: 1;
+      position: relative;
+      overflow: auto;
+      background: #2d2d2d;
+    }
+    .screenshot {
+      position: relative;
+      display: inline-block;
+    }
+    .screenshot img {
+      display: block;
+      max-width: 100%;
+      height: auto;
+    }
+    .annotation-box {
+      position: absolute;
+      border: ${this.config.boundingBoxWidth}px solid ${this.config.boundingBoxColor};
+      pointer-events: ${this.config.enableHover ? 'auto' : 'none'};
+      cursor: ${this.config.enableClickToHighlight ? 'pointer' : 'default'};
+      transition: border-color 0.2s, box-shadow 0.2s;
+      z-index: 1;
+    }
+    .annotation-box:hover {
+      border-color: #ff00ff;
+      box-shadow: 0 0 0 2px rgba(255, 0, 255, 0.3);
+      z-index: 100;
+    }
+    .annotation-box.highlighted {
+      border-color: #ffff00;
+      box-shadow: 0 0 0 4px rgba(255, 255, 0, 0.5);
+      z-index: 200;
+    }
+    .annotation-label {
+      position: absolute;
+      top: -24px;
+      left: 0;
+      background: rgba(0, 255, 0, 0.9);
+      color: #000;
+      padding: 2px 6px;
+      border-radius: 3px;
+      font-size: 11px;
+      font-weight: 600;
+      white-space: nowrap;
+      display: none;
+      z-index: 2;
+    }
+    .annotation-box:hover .annotation-label {
+      display: block;
+    }
+    ${this.config.includeSidebar ? this.getSidebarStyles() : ''}
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="screenshot-container">
+      <div class="screenshot" style="width: ${pageMetadata.pageSize.width}px; height: ${pageMetadata.pageSize.height}px;">
+        <img src="${screenshotDataUrl}" alt="Screenshot" />
+        ${this.renderAnnotationBoxes(annotations, pageMetadata)}
+      </div>
+    </div>
+    ${this.config.includeSidebar ? this.renderSidebar(screenshot) : ''}
+  </div>
+  <script>
+    ${this.generateJavaScript(annotations)}
+  </script>
+</body>
+</html>`;
+    }
+    /**
+     * Get sidebar CSS styles.
+     */
+    getSidebarStyles() {
+        return `
+    .sidebar {
+      width: 400px;
+      background: #252526;
+      border-left: 1px solid #3e3e42;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    .sidebar-header {
+      padding: 16px;
+      border-bottom: 1px solid #3e3e42;
+    }
+    .sidebar-header h2 {
+      font-size: 16px;
+      margin-bottom: 8px;
+    }
+    .sidebar-stats {
+      display: flex;
+      gap: 16px;
+      font-size: 13px;
+      color: #858585;
+    }
+    .sidebar-stat {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+    .sidebar-stat-value {
+      font-size: 20px;
+      font-weight: 600;
+      color: #d4d4d4;
+    }
+    .sidebar-search {
+      padding: 12px 16px;
+      border-bottom: 1px solid #3e3e42;
+    }
+    .search-input {
+      width: 100%;
+      padding: 8px 12px;
+      background: #3c3c3c;
+      border: 1px solid #3e3e42;
+      border-radius: 4px;
+      color: #d4d4d4;
+      font-size: 13px;
+    }
+    .search-input:focus {
+      outline: none;
+      border-color: #007acc;
+    }
+    .sidebar-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+    }
+    .annotation-item {
+      background: #2d2d2d;
+      border: 1px solid #3e3e42;
+      border-radius: 4px;
+      padding: 12px;
+      margin-bottom: 8px;
+      cursor: pointer;
+      transition: background 0.2s, border-color 0.2s;
+    }
+    .annotation-item:hover {
+      background: #37373d;
+      border-color: #007acc;
+    }
+    .annotation-item.active {
+      background: #37373d;
+      border-color: #ffff00;
+    }
+    .annotation-item-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 8px;
+    }
+    .annotation-item-tag {
+      font-size: 13px;
+      font-weight: 600;
+      color: #4ec9b0;
+    }
+    .annotation-item-badge {
+      background: #007acc;
+      color: #fff;
+      padding: 2px 6px;
+      border-radius: 3px;
+      font-size: 10px;
+      font-weight: 600;
+    }
+    .annotation-item-testid {
+      color: #ce9178;
+      font-size: 12px;
+      margin-bottom: 4px;
+    }
+    .annotation-item-interactions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+      margin-top: 8px;
+    }
+    .interaction-badge {
+      background: #3e3e42;
+      color: #d4d4d4;
+      padding: 2px 6px;
+      border-radius: 3px;
+      font-size: 10px;
+    }
+    .annotation-details {
+      display: none;
+      margin-top: 12px;
+      padding-top: 12px;
+      border-top: 1px solid #3e3e42;
+      font-size: 12px;
+      color: #858585;
+    }
+    .annotation-item.active .annotation-details {
+      display: block;
+    }
+    .detail-row {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 4px;
+    }
+    .detail-label {
+      font-weight: 600;
+      color: #d4d4d4;
+    }
+    .detail-value {
+      flex: 1;
+      word-break: break-all;
+    }`;
+    }
+    /**
+     * Render annotation bounding boxes.
+     */
+    renderAnnotationBoxes(annotations, pageMetadata) {
+        return annotations
+            .filter((a) => a.isVisible)
+            .map((annotation) => {
+            const box = annotation.pageBoundingBox || annotation.boundingBox;
+            const label = annotation.testId || annotation.tagName;
+            return `
+        <div
+          class="annotation-box"
+          data-annotation-id="${annotation.id}"
+          style="
+            left: ${box.x}px;
+            top: ${box.y}px;
+            width: ${box.width}px;
+            height: ${box.height}px;
+          "
+          title="${annotation.selector}"
+        >
+          <div class="annotation-label">${label}</div>
+        </div>`;
+        })
+            .join('\n');
+    }
+    /**
+     * Render sidebar with annotation list.
+     */
+    renderSidebar(screenshot) {
+        const { annotations, pageMetadata } = screenshot;
+        const visibleAnnotations = annotations.filter((a) => a.isVisible);
+        const interactiveCount = visibleAnnotations.filter((a) => a.isInteractive).length;
+        return `
+    <div class="sidebar">
+      <div class="sidebar-header">
+        <h2>${screenshot.route}</h2>
+        <div class="sidebar-stats">
+          <div class="sidebar-stat">
+            <div class="sidebar-stat-value">${visibleAnnotations.length}</div>
+            <div>Elements</div>
+          </div>
+          <div class="sidebar-stat">
+            <div class="sidebar-stat-value">${interactiveCount}</div>
+            <div>Interactive</div>
+          </div>
+        </div>
+      </div>
+      <div class="sidebar-search">
+        <input
+          type="text"
+          class="search-input"
+          placeholder="Search by tag, testid, or selector..."
+          id="search-input"
+        />
+      </div>
+      <div class="sidebar-content" id="annotation-list">
+        ${visibleAnnotations.map((a) => this.renderAnnotationItem(a)).join('\n')}
+      </div>
+    </div>`;
+    }
+    /**
+     * Render annotation item for sidebar.
+     */
+    renderAnnotationItem(annotation) {
+        const interactions = annotation.interactions.map((i) => i.type).join(', ');
+        return `
+    <div class="annotation-item" data-annotation-id="${annotation.id}">
+      <div class="annotation-item-header">
+        <div class="annotation-item-tag">&lt;${annotation.tagName}&gt;</div>
+        ${annotation.isInteractive ? '<div class="annotation-item-badge">Interactive</div>' : ''}
+      </div>
+      ${annotation.testId ? `<div class="annotation-item-testid">data-testid="${annotation.testId}"</div>` : ''}
+      ${annotation.interactions.length > 0
+            ? `
+        <div class="annotation-item-interactions">
+          ${annotation.interactions.map((i) => `<div class="interaction-badge">${i.type}</div>`).join('')}
+        </div>
+      `
+            : ''}
+      <div class="annotation-details">
+        <div class="detail-row">
+          <div class="detail-label">Selector:</div>
+          <div class="detail-value">${annotation.selector}</div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-label">Size:</div>
+          <div class="detail-value">${Math.round(annotation.boundingBox.width)}×${Math.round(annotation.boundingBox.height)}px</div>
+        </div>
+        ${annotation.textContent
+            ? `
+          <div class="detail-row">
+            <div class="detail-label">Text:</div>
+            <div class="detail-value">${this.escapeHtml(annotation.textContent.substring(0, 100))}</div>
+          </div>
+        `
+            : ''}
+      </div>
+    </div>`;
+    }
+    /**
+     * Generate JavaScript for interactivity.
+     */
+    generateJavaScript(annotations) {
+        return `
+    const annotations = ${JSON.stringify(annotations, null, 2)};
+    // Click to highlight
+    ${this.config.enableClickToHighlight
+            ? `
+    document.querySelectorAll('.annotation-box').forEach(box => {
+      box.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const id = box.dataset.annotationId;
+        // Remove previous highlights
+        document.querySelectorAll('.annotation-box.highlighted').forEach(b => {
+          b.classList.remove('highlighted');
+        });
+        document.querySelectorAll('.annotation-item.active').forEach(item => {
+          item.classList.remove('active');
+        });
+        // Highlight this annotation
+        box.classList.add('highlighted');
+        const sidebarItem = document.querySelector(\`.annotation-item[data-annotation-id="\${id}"]\`);
+        if (sidebarItem) {
+          sidebarItem.classList.add('active');
+          sidebarItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+      });
+    });
+    // Sidebar item click
+    document.querySelectorAll('.annotation-item').forEach(item => {
+      item.addEventListener('click', () => {
+        const id = item.dataset.annotationId;
+        // Remove previous highlights
+        document.querySelectorAll('.annotation-box.highlighted').forEach(b => {
+          b.classList.remove('highlighted');
+        });
+        document.querySelectorAll('.annotation-item.active').forEach(i => {
+          i.classList.remove('active');
+        });
+        // Highlight this annotation
+        item.classList.add('active');
+        const box = document.querySelector(\`.annotation-box[data-annotation-id="\${id}"]\`);
+        if (box) {
+          box.classList.add('highlighted');
+          box.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+      });
+    });
+    `
+            : ''}
+    // Search functionality
+    const searchInput = document.getElementById('search-input');
+    if (searchInput) {
+      searchInput.addEventListener('input', (e) => {
+        const query = e.target.value.toLowerCase();
+        const items = document.querySelectorAll('.annotation-item');
+        items.forEach(item => {
+          const annotation = annotations.find(a => a.id === item.dataset.annotationId);
+          if (!annotation) return;
+          const searchText = [
+            annotation.tagName,
+            annotation.testId,
+            annotation.selector,
+            annotation.textContent
+          ].filter(Boolean).join(' ').toLowerCase();
+          if (searchText.includes(query)) {
+            item.style.display = '';
+          } else {
+            item.style.display = 'none';
+          }
+        });
+      });
+    }
+    // Clear highlights on background click
+    document.querySelector('.screenshot-container').addEventListener('click', (e) => {
+      if (e.target.classList.contains('screenshot-container') || e.target.tagName === 'IMG') {
+        document.querySelectorAll('.annotation-box.highlighted').forEach(b => {
+          b.classList.remove('highlighted');
+        });
+        document.querySelectorAll('.annotation-item.active').forEach(item => {
+          item.classList.remove('active');
+        });
+      }
+    });
+    `;
+    }
+    /**
+     * Escape HTML entities.
+     */
+    escapeHtml(text) {
+        const map = {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#039;',
+        };
+        return text.replace(/[&<>"']/g, (m) => map[m]);
+    }
+}
+//# sourceMappingURL=HTMLAnnotationRenderer.js.map

package/dist/esm/src/testing/graph-tester/screenshot/HTMLAnnotationRenderer.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"HTMLAnnotationRenderer.js","sourceRoot":"","sources":["../../../../../../src/testing/graph-tester/screenshot/HTMLAnnotationRenderer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,MAAM,aAAa,CAAC;AASlC;;;;;;;;;;;;;;GAcG;AACH,MAAM,OAAO,sBAAsB;IAGjC,YAAY,MAA0B;QACpC,IAAI,CAAC,MAAM,GAAG;YACZ,cAAc,EAAE,IAAI;YACpB,WAAW,EAAE,IAAI;YACjB,sBAAsB,EAAE,IAAI;YAC5B,gBAAgB,EAAE,SAAS;YAC3B,gBAAgB,EAAE,CAAC;YACnB,GAAG,MAAM;SACV,CAAC;IACJ,CAAC;IAED;;;;;OAKG;IACH,KAAK,CAAC,MAAM,CAAC,UAA+B;QAC1C,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QAE7B,gBAAgB;QAChB,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QAE3C,gBAAgB;QAChB,MAAM,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC;QAE1D,MAAM,KAAK,GAAG,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QAEpD,OAAO;YACL,UAAU,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU;YAClC,YAAY,EAAE,MAAM;YACpB,QAAQ,EAAE,KAAK,CAAC,IAAI;YACpB,QAAQ,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,SAAS;SACjC,CAAC;IACJ,CAAC;IAED;;;;;OAKG;IACK,YAAY,CAAC,UAA+B;QAClD,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC;QAEjD,+CAA+C;QAC/C,MAAM,iBAAiB,GAAG,yBAAyB,UAAU,CAAC,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;QAE9F,OAAO;;;;;iCAKsB,UAAU,CAAC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAwCjC,IAAI,CAAC,MAAM,CAAC,gBAAgB,YAAY,IAAI,CAAC,MAAM,CAAC,gBAAgB;wBAC5D,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;gBACjD,IAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAoCpE,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,EAAE;;;;;;8CAMjB,YAAY,CAAC,QAAQ,CAAC,KAAK,eAAe,YAAY,CAAC,QAAQ,CAAC,MAAM;oBAChG,iBAAiB;UAC3B,IAAI,CAAC,qBAAqB,CAAC,WAAW,EAAE,YAAY,CAAC;;;MAGzD,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE;;;;MAIhE,IAAI,CAAC,kBAAkB,CAAC,WAAW,CAAC;;;QAGlC,CAAC;IACP,CAAC;IAED;;OAEG;IACK,gBAAgB;QACtB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2JL,CAAC;IACL,CAAC;IAED;;OAEG;IACK,qBAAqB,CAC3B,WAAgC,EAChC,YAAiD;QAEjD,OAAO,WAAW;aACf,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;aAC1B,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE;YAClB,MAAM,GAAG,GAAG,UAAU,CAAC,eAAe,IAAI,UAAU,CAAC,WAAW,CAAC;YACjE,MAAM,KAAK,GAAG,UAAU,CAAC,MAAM,IAAI,UAAU,CAAC,OAAO,CAAC;YAEtD,OAAO;;;gCAGiB,UAAU,CAAC,EAAE;;oBAEzB,GAAG,CAAC,CAAC;mBACN,GAAG,CAAC,CAAC;qBACH,GAAG,CAAC,KAAK;sBACR,GAAG,CAAC,MAAM;;mBAEb,UAAU,CAAC,QAAQ;;0CAEI,KAAK;eAChC,CAAC;QACV,CAAC,CAAC;aACD,IAAI,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC;IAED;;OAEG;IACK,aAAa,CAAC,UAA+B;QACnD,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC;QACjD,MAAM,kBAAkB,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QAClE,MAAM,gBAAgB,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC;QAElF,OAAO;;;cAGG,UAAU,CAAC,KAAK;;;8CAGgB,kBAAkB,CAAC,MAAM;;;;8CAIzB,gBAAgB;;;;;;;;;;;;;;;;UAgBpD,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;;WAErE,CAAC;IACV,CAAC;IAED;;OAEG;IACK,oBAAoB,CAAC,UAA6B;QACxD,MAAM,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE3E,OAAO;uDAC4C,UAAU,CAAC,EAAE;;+CAErB,UAAU,CAAC,OAAO;UACvD,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC,sDAAsD,CAAC,CAAC,CAAC,EAAE;;QAExF,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,oDAAoD,UAAU,CAAC,MAAM,SAAS,CAAC,CAAC,CAAC,EAAE;QAEvG,UAAU,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC;YAChC,CAAC,CAAC;;YAEA,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,kCAAkC,CAAC,CAAC,IAAI,QAAQ,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;;OAElG;YACG,CAAC,CAAC,EACN;;;;sCAIgC,UAAU,CAAC,QAAQ;;;;sCAInB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC;;UAGjH,UAAU,CAAC,WAAW;YACpB,CAAC,CAAC;;;wCAG0B,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;;SAExF;YACG,CAAC,CAAC,EACN;;WAEG,CAAC;IACV,CAAC;IAED;;OAEG;IACK,kBAAkB,CAAC,WAAgC;QACzD,OAAO;0BACe,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC;;;MAIxD,IAAI,CAAC,MAAM,CAAC,sBAAsB;YAChC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8CL;YACG,CAAC,CAAC,EACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCC,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,UAAU,CAAC,IAAY;QAC7B,MAAM,GAAG,GAA2B;YAClC,GAAG,EAAE,OAAO;YACZ,GAAG,EAAE,MAAM;YACX,GAAG,EAAE,MAAM;YACX,GAAG,EAAE,QAAQ;YACb,GAAG,EAAE,QAAQ;SACd,CAAC;QACF,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IACjD,CAAC;CACF"}

package/dist/esm/src/testing/graph-tester/screenshot/ScreenshotAnnotator.d.ts ADDED Viewed

@@ -0,0 +1,83 @@
+/**
+ * Core screenshot annotation capture logic.
+ *
+ * Captures full-page screenshots with element annotations including:
+ * - Bounding boxes (viewport and page coordinates)
+ * - Element metadata (testid, tag, attributes, styles)
+ * - Interaction capabilities
+ * - Element hierarchy (parent/child relationships)
+ * - ARIA attributes for accessibility analysis
+ *
+ * Uses single-pass DOM traversal for efficiency.
+ *
+ * @packageDocumentation
+ */
+import type { Page } from '@playwright/test';
+import type { AnnotatedScreenshot } from './types';
+/**
+ * Configuration for screenshot annotator.
+ */
+export interface ScreenshotAnnotatorConfig {
+    /** Output directory for screenshots */
+    outputDir: string;
+    /** Whether to capture full page (default: true) */
+    fullPage?: boolean;
+    /** Whether to include invisible elements (default: false) */
+    includeInvisible?: boolean;
+    /** Minimum element size to annotate (default: 5px) */
+    minElementSize?: number;
+    /** Whether to detect navigation targets (default: true) */
+    detectNavigation?: boolean;
+    /** Whether to capture page load metrics (default: true) */
+    captureLoadMetrics?: boolean;
+}
+/**
+ * Screenshot annotator.
+ *
+ * @example
+ * ```typescript
+ * const annotator = new ScreenshotAnnotator({
+ *   outputDir: './screenshots',
+ *   fullPage: true
+ * });
+ *
+ * const result = await annotator.capture(page, '/dashboard');
+ * console.log(`Captured ${result.annotations.length} annotations`);
+ * ```
+ */
+export declare class ScreenshotAnnotator {
+    private config;
+    constructor(config: ScreenshotAnnotatorConfig);
+    /**
+     * Capture annotated screenshot for a page.
+     *
+     * @param page - Playwright page instance
+     * @param route - Route being captured
+     * @param viewportName - Optional viewport name for responsive testing
+     * @returns Annotated screenshot
+     */
+    capture(page: Page, route: string, viewportName?: string): Promise<AnnotatedScreenshot>;
+    /**
+     * Extract element annotations via single-pass DOM traversal.
+     *
+     * @param page - Playwright page instance
+     * @returns Array of element annotations
+     */
+    private extractAnnotations;
+    /**
+     * Extract page metadata.
+     *
+     * @param page - Playwright page instance
+     * @returns Page metadata
+     */
+    private extractPageMetadata;
+    /**
+     * Generate screenshot filename from route and viewport.
+     *
+     * @param route - Route path
+     * @param viewportName - Optional viewport name
+     * @returns Sanitized filename
+     */
+    private generateScreenshotFilename;
+}
+//# sourceMappingURL=ScreenshotAnnotator.d.ts.map

package/dist/esm/src/testing/graph-tester/screenshot/ScreenshotAnnotator.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ScreenshotAnnotator.d.ts","sourceRoot":"","sources":["../../../../../../src/testing/graph-tester/screenshot/ScreenshotAnnotator.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAG7C,OAAO,KAAK,EACV,mBAAmB,EAOpB,MAAM,SAAS,CAAC;AAEjB;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAElB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,sDAAsD;IACtD,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,2DAA2D;IAC3D,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;;;;;;;;;;;;GAaG;AACH,qBAAa,mBAAmB;IAC9B,OAAO,CAAC,MAAM,CAA4B;gBAE9B,MAAM,EAAE,yBAAyB;IAW7C;;;;;;;OAOG;IACG,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,mBAAmB,CAAC;IA2C7F;;;;;OAKG;YACW,kBAAkB;IAoOhC;;;;;OAKG;YACW,mBAAmB;IAyDjC;;;;;;OAMG;IACH,OAAO,CAAC,0BAA0B;CAiBnC"}