@ytspar/sweetlink 1.16.0 → 1.17.0

package/dist/ruler.d.ts

@@ -50,7 +50,7 @@ export interface RulerOutput {
  * JavaScript function to inject into the page.
  * Creates visual measurement overlays on elements.
  */
-export declare const measureElementsScript = "\n(function(options) {\n  const {\n    selectors = [],\n    showCenterLines = true,\n    showDimensions = true,\n    showPosition = false,\n    colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'],\n    limit = 5,\n    showAlignment = true\n  } = options || {};\n\n  // Remove any existing measurement overlay\n  const existingOverlay = document.getElementById('pixel-ruler-overlay');\n  if (existingOverlay) existingOverlay.remove();\n\n  // Create SVG overlay\n  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n  svg.id = 'pixel-ruler-overlay';\n  svg.style.cssText = `\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100vw;\n    height: 100vh;\n    pointer-events: none;\n    z-index: 999999;\n  `;\n  document.body.appendChild(svg);\n\n  const results = [];\n  let allRects = [];\n\n  // Process each selector\n  selectors.forEach((selector, selectorIndex) => {\n    const color = colors[selectorIndex % colors.length];\n    const elements = document.querySelectorAll(selector);\n    const selectorResult = { selector, elements: [] };\n\n    Array.from(elements).slice(0, limit).forEach((element, elementIndex) => {\n      const rect = element.getBoundingClientRect();\n      const centerX = rect.left + rect.width / 2;\n      const centerY = rect.top + rect.height / 2;\n\n      selectorResult.elements.push({\n        index: elementIndex,\n        rect: { top: rect.top, left: rect.left, width: rect.width, height: rect.height },\n        centerX,\n        centerY\n      });\n\n      allRects.push({ rect, centerX, centerY, color, selector, elementIndex });\n\n      // Draw bounding box\n      const box = document.createElementNS('http://www.w3.org/2000/svg', 'rect');\n      box.setAttribute('x', rect.left);\n      box.setAttribute('y', rect.top);\n      box.setAttribute('width', rect.width);\n      box.setAttribute('height', rect.height);\n      box.setAttribute('fill', 'none');\n      box.setAttribute('stroke', color);\n      box.setAttribute('stroke-width', '2');\n      box.setAttribute('stroke-dasharray', '4,2');\n      svg.appendChild(box);\n\n      // Draw center lines\n      if (showCenterLines) {\n        // Horizontal center line\n        const hLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');\n        hLine.setAttribute('x1', rect.left);\n        hLine.setAttribute('y1', centerY);\n        hLine.setAttribute('x2', rect.left + rect.width);\n        hLine.setAttribute('y2', centerY);\n        hLine.setAttribute('stroke', color);\n        hLine.setAttribute('stroke-width', '1');\n        hLine.setAttribute('stroke-dasharray', '2,2');\n        svg.appendChild(hLine);\n\n        // Vertical center line\n        const vLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');\n        vLine.setAttribute('x1', centerX);\n        vLine.setAttribute('y1', rect.top);\n        vLine.setAttribute('x2', centerX);\n        vLine.setAttribute('y2', rect.top + rect.height);\n        vLine.setAttribute('stroke', color);\n        vLine.setAttribute('stroke-width', '1');\n        vLine.setAttribute('stroke-dasharray', '2,2');\n        svg.appendChild(vLine);\n\n        // Center point\n        const centerDot = document.createElementNS('http://www.w3.org/2000/svg', 'circle');\n        centerDot.setAttribute('cx', centerX);\n        centerDot.setAttribute('cy', centerY);\n        centerDot.setAttribute('r', '4');\n        centerDot.setAttribute('fill', color);\n        svg.appendChild(centerDot);\n      }\n\n      // Draw dimension labels\n      if (showDimensions) {\n        // Background for label\n        const labelBg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');\n        labelBg.setAttribute('x', rect.left);\n        labelBg.setAttribute('y', rect.top - 20);\n        labelBg.setAttribute('width', '100');\n        labelBg.setAttribute('height', '18');\n        labelBg.setAttribute('fill', 'rgba(0,0,0,0.8)');\n        labelBg.setAttribute('rx', '2');\n        svg.appendChild(labelBg);\n\n        // Dimension text\n        const dimText = document.createElementNS('http://www.w3.org/2000/svg', 'text');\n        dimText.setAttribute('x', rect.left + 4);\n        dimText.setAttribute('y', rect.top - 6);\n        dimText.setAttribute('fill', color);\n        dimText.setAttribute('font-family', 'monospace');\n        dimText.setAttribute('font-size', '12');\n        dimText.setAttribute('font-weight', 'bold');\n        dimText.textContent = `${Math.round(rect.width)}\u00D7${Math.round(rect.height)}`;\n        svg.appendChild(dimText);\n      }\n\n      // Draw position labels\n      if (showPosition) {\n        const posText = document.createElementNS('http://www.w3.org/2000/svg', 'text');\n        posText.setAttribute('x', rect.left + 4);\n        posText.setAttribute('y', rect.top + 14);\n        posText.setAttribute('fill', color);\n        posText.setAttribute('font-family', 'monospace');\n        posText.setAttribute('font-size', '10');\n        posText.textContent = `(${Math.round(rect.left)}, ${Math.round(rect.top)})`;\n        svg.appendChild(posText);\n      }\n    });\n\n    results.push(selectorResult);\n  });\n\n  // Show alignment comparison between elements\n  let alignment = null;\n  if (showAlignment && allRects.length >= 2) {\n    const first = allRects[0];\n    const second = allRects[1];\n\n    // Draw alignment line between centers\n    const alignLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');\n    alignLine.setAttribute('x1', first.centerX);\n    alignLine.setAttribute('y1', first.centerY);\n    alignLine.setAttribute('x2', second.centerX);\n    alignLine.setAttribute('y2', second.centerY);\n    alignLine.setAttribute('stroke', '#ffffff');\n    alignLine.setAttribute('stroke-width', '2');\n    svg.appendChild(alignLine);\n\n    // Calculate vertical offset\n    const verticalOffset = Math.round(first.centerY - second.centerY);\n    const horizontalOffset = Math.round(first.centerX - second.centerX);\n\n    // Offset label\n    const midX = (first.centerX + second.centerX) / 2;\n    const midY = (first.centerY + second.centerY) / 2;\n\n    const offsetBg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');\n    offsetBg.setAttribute('x', midX - 50);\n    offsetBg.setAttribute('y', midY - 12);\n    offsetBg.setAttribute('width', '100');\n    offsetBg.setAttribute('height', '24');\n    offsetBg.setAttribute('fill', 'rgba(0,0,0,0.9)');\n    offsetBg.setAttribute('rx', '4');\n    svg.appendChild(offsetBg);\n\n    const offsetText = document.createElementNS('http://www.w3.org/2000/svg', 'text');\n    offsetText.setAttribute('x', midX);\n    offsetText.setAttribute('y', midY + 5);\n    offsetText.setAttribute('fill', '#ffffff');\n    offsetText.setAttribute('font-family', 'monospace');\n    offsetText.setAttribute('font-size', '12');\n    offsetText.setAttribute('font-weight', 'bold');\n    offsetText.setAttribute('text-anchor', 'middle');\n    offsetText.textContent = `\u0394y:${verticalOffset}px \u0394x:${horizontalOffset}px`;\n    svg.appendChild(offsetText);\n\n    alignment = {\n      verticalOffset,\n      horizontalOffset,\n      aligned: Math.abs(verticalOffset) <= 2 && Math.abs(horizontalOffset) <= 2\n    };\n  }\n\n  return {\n    results,\n    summary: results.map(r => `${r.selector}: ${r.elements.length} elements`).join(', '),\n    alignment\n  };\n})\n";
+export declare const measureElementsScript = "\n(function(options) {\n  const {\n    selectors = [],\n    showCenterLines = true,\n    showDimensions = true,\n    showPosition = false,\n    colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'],\n    limit = 5,\n    showAlignment = true\n  } = options || {};\n\n  // Remove any existing measurement overlay\n  const existingOverlay = document.getElementById('pixel-ruler-overlay');\n  if (existingOverlay) existingOverlay.remove();\n\n  // Create SVG overlay\n  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n  svg.id = 'pixel-ruler-overlay';\n  svg.style.cssText = `\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100vw;\n    height: 100vh;\n    pointer-events: none;\n    z-index: 999999;\n  `;\n  document.body.appendChild(svg);\n\n  const results = [];\n  let allRects = [];\n\n  // Process each selector\n  selectors.forEach((selector, selectorIndex) => {\n    const color = colors[selectorIndex % colors.length];\n    const elements = document.querySelectorAll(selector);\n    const selectorResult = { selector, elements: [] };\n\n    Array.from(elements).slice(0, limit).forEach((element, elementIndex) => {\n      const rect = element.getBoundingClientRect();\n      const centerX = rect.left + rect.width / 2;\n      const centerY = rect.top + rect.height / 2;\n\n      selectorResult.elements.push({\n        index: elementIndex,\n        rect: { top: rect.top, left: rect.left, width: rect.width, height: rect.height },\n        centerX,\n        centerY\n      });\n\n      allRects.push({ rect, centerX, centerY, color, selector, elementIndex });\n\n      // Draw bounding box\n      const box = document.createElementNS('http://www.w3.org/2000/svg', 'rect');\n      box.setAttribute('x', rect.left);\n      box.setAttribute('y', rect.top);\n      box.setAttribute('width', rect.width);\n      box.setAttribute('height', rect.height);\n      box.setAttribute('fill', 'none');\n      box.setAttribute('stroke', color);\n      box.setAttribute('stroke-width', '2');\n      box.setAttribute('stroke-dasharray', '4,2');\n      svg.appendChild(box);\n\n      // Draw center lines\n      if (showCenterLines) {\n        // Horizontal center line\n        const hLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');\n        hLine.setAttribute('x1', rect.left);\n        hLine.setAttribute('y1', centerY);\n        hLine.setAttribute('x2', rect.left + rect.width);\n        hLine.setAttribute('y2', centerY);\n        hLine.setAttribute('stroke', color);\n        hLine.setAttribute('stroke-width', '1');\n        hLine.setAttribute('stroke-dasharray', '2,2');\n        svg.appendChild(hLine);\n\n        // Vertical center line\n        const vLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');\n        vLine.setAttribute('x1', centerX);\n        vLine.setAttribute('y1', rect.top);\n        vLine.setAttribute('x2', centerX);\n        vLine.setAttribute('y2', rect.top + rect.height);\n        vLine.setAttribute('stroke', color);\n        vLine.setAttribute('stroke-width', '1');\n        vLine.setAttribute('stroke-dasharray', '2,2');\n        svg.appendChild(vLine);\n\n        // Center point\n        const centerDot = document.createElementNS('http://www.w3.org/2000/svg', 'circle');\n        centerDot.setAttribute('cx', centerX);\n        centerDot.setAttribute('cy', centerY);\n        centerDot.setAttribute('r', '4');\n        centerDot.setAttribute('fill', color);\n        svg.appendChild(centerDot);\n      }\n\n      // Draw dimension labels\n      if (showDimensions) {\n        // Position the label OUTSIDE the bbox so it doesn't overlap\n        // page content. Default: above the bbox (top); fall back below\n        // when the element is at the very top of the page.\n        const dimLabel = `${Math.round(rect.width)}\u00D7${Math.round(rect.height)}`;\n        const labelHeight = 22;\n        const labelW = Math.max(70, dimLabel.length * 9);\n        const goAbove = rect.top >= labelHeight + 4;\n        const ly = goAbove ? rect.top - labelHeight - 2 : rect.top + rect.height + 2;\n        const lx = rect.left;\n\n        const labelBg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');\n        labelBg.setAttribute('x', lx);\n        labelBg.setAttribute('y', ly);\n        labelBg.setAttribute('width', String(labelW));\n        labelBg.setAttribute('height', String(labelHeight));\n        labelBg.setAttribute('fill', color);\n        labelBg.setAttribute('rx', '3');\n        svg.appendChild(labelBg);\n\n        const dimText = document.createElementNS('http://www.w3.org/2000/svg', 'text');\n        dimText.setAttribute('x', lx + labelW / 2);\n        dimText.setAttribute('y', ly + 15);\n        dimText.setAttribute('fill', '#ffffff');\n        dimText.setAttribute('font-family', 'system-ui, sans-serif');\n        dimText.setAttribute('font-size', '13');\n        dimText.setAttribute('font-weight', '700');\n        dimText.setAttribute('text-anchor', 'middle');\n        dimText.textContent = dimLabel;\n        svg.appendChild(dimText);\n      }\n\n      // Draw position labels (separate, opposite side of dim label)\n      if (showPosition) {\n        const posText = document.createElementNS('http://www.w3.org/2000/svg', 'text');\n        // Position label below-right outside the bbox.\n        posText.setAttribute('x', rect.left + rect.width + 4);\n        posText.setAttribute('y', rect.top + 14);\n        posText.setAttribute('fill', color);\n        posText.setAttribute('font-family', 'system-ui, sans-serif');\n        posText.setAttribute('font-size', '12');\n        posText.textContent = `(${Math.round(rect.left)}, ${Math.round(rect.top)})`;\n        svg.appendChild(posText);\n      }\n    });\n\n    results.push(selectorResult);\n  });\n\n  // Show alignment comparison between elements\n  let alignment = null;\n  if (showAlignment && allRects.length >= 2) {\n    const first = allRects[0];\n    const second = allRects[1];\n\n    // Draw alignment line between centers\n    const alignLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');\n    alignLine.setAttribute('x1', first.centerX);\n    alignLine.setAttribute('y1', first.centerY);\n    alignLine.setAttribute('x2', second.centerX);\n    alignLine.setAttribute('y2', second.centerY);\n    alignLine.setAttribute('stroke', '#ffffff');\n    alignLine.setAttribute('stroke-width', '2');\n    svg.appendChild(alignLine);\n\n    // Calculate vertical offset\n    const verticalOffset = Math.round(first.centerY - second.centerY);\n    const horizontalOffset = Math.round(first.centerX - second.centerX);\n\n    // Offset label\n    const midX = (first.centerX + second.centerX) / 2;\n    const midY = (first.centerY + second.centerY) / 2;\n\n    const offsetLabel = `\u0394y=${verticalOffset}px  \u0394x=${horizontalOffset}px`;\n    const offsetW = Math.max(140, offsetLabel.length * 9);\n    const offsetH = 28;\n    const offsetBg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');\n    offsetBg.setAttribute('x', midX - offsetW / 2);\n    offsetBg.setAttribute('y', midY - offsetH / 2);\n    offsetBg.setAttribute('width', String(offsetW));\n    offsetBg.setAttribute('height', String(offsetH));\n    offsetBg.setAttribute('fill', 'rgba(20,20,20,0.95)');\n    offsetBg.setAttribute('rx', '4');\n    svg.appendChild(offsetBg);\n\n    const offsetText = document.createElementNS('http://www.w3.org/2000/svg', 'text');\n    offsetText.setAttribute('x', midX);\n    offsetText.setAttribute('y', midY + 6);\n    offsetText.setAttribute('fill', '#ffffff');\n    offsetText.setAttribute('font-family', 'system-ui, sans-serif');\n    offsetText.setAttribute('font-size', '14');\n    offsetText.setAttribute('font-weight', '700');\n    offsetText.setAttribute('text-anchor', 'middle');\n    offsetText.textContent = offsetLabel;\n    svg.appendChild(offsetText);\n\n    alignment = {\n      verticalOffset,\n      horizontalOffset,\n      aligned: Math.abs(verticalOffset) <= 2 && Math.abs(horizontalOffset) <= 2\n    };\n  }\n\n  return {\n    results,\n    summary: results.map(r => `${r.selector}: ${r.elements.length} elements`).join(', '),\n    alignment\n  };\n})\n";
 /**
  * Measure elements and inject visual overlay using Playwright
  */

package/dist/ruler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ruler.d.ts","sourceRoot":"","sources":["../src/ruler.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,MAAM,WAAW,kBAAkB;IACjC,4CAA4C;IAC5C,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,kDAAkD;IAClD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6CAA6C;IAC7C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,uCAAuC;IACvC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACnE,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,kBAAkB,EAAE,CAAC;CAChC;AAED,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE;QACV,cAAc,EAAE,MAAM,CAAC;QACvB,gBAAgB,EAAE,MAAM,CAAC;QACzB,OAAO,EAAE,OAAO,CAAC;KAClB,CAAC;CACH;AAED;;;GAGG;AACH,eAAO,MAAM,qBAAqB,sxOAmMjC,CAAC;AAEF;;GAEG;AACH,wBAAsB,oBAAoB,CAAC,OAAO,EAAE;IAClD,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,OAAO,CAAC,WAAW,GAAG;IAAE,cAAc,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAkDrD;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,kBAAkB,CAWxD;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,kBAAkB,CAQxD"}
+{"version":3,"file":"ruler.d.ts","sourceRoot":"","sources":["../src/ruler.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,MAAM,WAAW,kBAAkB;IACjC,4CAA4C;IAC5C,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,kDAAkD;IAClD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6CAA6C;IAC7C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,uCAAuC;IACvC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACnE,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,kBAAkB,EAAE,CAAC;CAChC;AAED,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE;QACV,cAAc,EAAE,MAAM,CAAC;QACvB,gBAAgB,EAAE,MAAM,CAAC;QACzB,OAAO,EAAE,OAAO,CAAC;KAClB,CAAC;CACH;AAED;;;GAGG;AACH,eAAO,MAAM,qBAAqB,6jQAgNjC,CAAC;AAEF;;GAEG;AACH,wBAAsB,oBAAoB,CAAC,OAAO,EAAE;IAClD,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,OAAO,CAAC,WAAW,GAAG;IAAE,cAAc,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CA+DrD;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,kBAAkB,CAWxD;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,kBAAkB,CAQxD"}

package/dist/ruler.js

@@ -112,36 +112,46 @@ export const measureElementsScript = `
 
       // Draw dimension labels
       if (showDimensions) {
-        // Background for label
+        // Position the label OUTSIDE the bbox so it doesn't overlap
+        // page content. Default: above the bbox (top); fall back below
+        // when the element is at the very top of the page.
+        const dimLabel = \`\${Math.round(rect.width)}×\${Math.round(rect.height)}\`;
+        const labelHeight = 22;
+        const labelW = Math.max(70, dimLabel.length * 9);
+        const goAbove = rect.top >= labelHeight + 4;
+        const ly = goAbove ? rect.top - labelHeight - 2 : rect.top + rect.height + 2;
+        const lx = rect.left;
+
         const labelBg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-        labelBg.setAttribute('x', rect.left);
-        labelBg.setAttribute('y', rect.top - 20);
-        labelBg.setAttribute('width', '100');
-        labelBg.setAttribute('height', '18');
-        labelBg.setAttribute('fill', 'rgba(0,0,0,0.8)');
-        labelBg.setAttribute('rx', '2');
+        labelBg.setAttribute('x', lx);
+        labelBg.setAttribute('y', ly);
+        labelBg.setAttribute('width', String(labelW));
+        labelBg.setAttribute('height', String(labelHeight));
+        labelBg.setAttribute('fill', color);
+        labelBg.setAttribute('rx', '3');
         svg.appendChild(labelBg);
 
-        // Dimension text
         const dimText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-        dimText.setAttribute('x', rect.left + 4);
-        dimText.setAttribute('y', rect.top - 6);
-        dimText.setAttribute('fill', color);
-        dimText.setAttribute('font-family', 'monospace');
-        dimText.setAttribute('font-size', '12');
-        dimText.setAttribute('font-weight', 'bold');
-        dimText.textContent = \`\${Math.round(rect.width)}×\${Math.round(rect.height)}\`;
+        dimText.setAttribute('x', lx + labelW / 2);
+        dimText.setAttribute('y', ly + 15);
+        dimText.setAttribute('fill', '#ffffff');
+        dimText.setAttribute('font-family', 'system-ui, sans-serif');
+        dimText.setAttribute('font-size', '13');
+        dimText.setAttribute('font-weight', '700');
+        dimText.setAttribute('text-anchor', 'middle');
+        dimText.textContent = dimLabel;
         svg.appendChild(dimText);
       }
 
-      // Draw position labels
+      // Draw position labels (separate, opposite side of dim label)
       if (showPosition) {
         const posText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-        posText.setAttribute('x', rect.left + 4);
+        // Position label below-right outside the bbox.
+        posText.setAttribute('x', rect.left + rect.width + 4);
         posText.setAttribute('y', rect.top + 14);
         posText.setAttribute('fill', color);
-        posText.setAttribute('font-family', 'monospace');
-        posText.setAttribute('font-size', '10');
+        posText.setAttribute('font-family', 'system-ui, sans-serif');
+        posText.setAttribute('font-size', '12');
         posText.textContent = \`(\${Math.round(rect.left)}, \${Math.round(rect.top)})\`;
         svg.appendChild(posText);
       }
@@ -174,24 +184,27 @@ export const measureElementsScript = `
     const midX = (first.centerX + second.centerX) / 2;
     const midY = (first.centerY + second.centerY) / 2;
 
+    const offsetLabel = \`Δy=\${verticalOffset}px  Δx=\${horizontalOffset}px\`;
+    const offsetW = Math.max(140, offsetLabel.length * 9);
+    const offsetH = 28;
     const offsetBg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-    offsetBg.setAttribute('x', midX - 50);
-    offsetBg.setAttribute('y', midY - 12);
-    offsetBg.setAttribute('width', '100');
-    offsetBg.setAttribute('height', '24');
-    offsetBg.setAttribute('fill', 'rgba(0,0,0,0.9)');
+    offsetBg.setAttribute('x', midX - offsetW / 2);
+    offsetBg.setAttribute('y', midY - offsetH / 2);
+    offsetBg.setAttribute('width', String(offsetW));
+    offsetBg.setAttribute('height', String(offsetH));
+    offsetBg.setAttribute('fill', 'rgba(20,20,20,0.95)');
     offsetBg.setAttribute('rx', '4');
     svg.appendChild(offsetBg);
 
     const offsetText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
     offsetText.setAttribute('x', midX);
-    offsetText.setAttribute('y', midY + 5);
+    offsetText.setAttribute('y', midY + 6);
     offsetText.setAttribute('fill', '#ffffff');
-    offsetText.setAttribute('font-family', 'monospace');
-    offsetText.setAttribute('font-size', '12');
-    offsetText.setAttribute('font-weight', 'bold');
+    offsetText.setAttribute('font-family', 'system-ui, sans-serif');
+    offsetText.setAttribute('font-size', '14');
+    offsetText.setAttribute('font-weight', '700');
     offsetText.setAttribute('text-anchor', 'middle');
-    offsetText.textContent = \`Δy:\${verticalOffset}px Δx:\${horizontalOffset}px\`;
+    offsetText.textContent = offsetLabel;
     svg.appendChild(offsetText);
 
     alignment = {
@@ -242,10 +255,18 @@ export async function measureViaPlaywright(options) {
             if (dir && !fs.existsSync(dir)) {
                 fs.mkdirSync(dir, { recursive: true });
             }
-            await page.screenshot({ path: options.output, fullPage: false });
+            // If any measured element extends below the viewport, capture the
+            // full page so all overlays are visible — otherwise users see
+            // half their highlights cut off. (page.viewportSize is missing
+            // from some test doubles, hence the typeof guard.)
+            const vp = typeof page.viewportSize === 'function' ? page.viewportSize() : null;
+            const extendsBelow = vp ? result.results.some((r) => r.elements.some((e) => e.rect.top + e.rect.height > vp.height)) : false;
+            await page.screenshot({ path: options.output, fullPage: extendsBelow });
             screenshotPath = options.output;
-            if (options.verbose)
-                console.log(`[Sweetlink Ruler] Screenshot saved to: ${options.output}`);
+            if (options.verbose) {
+                console.log(`[Sweetlink Ruler] Screenshot saved to: ${options.output}` +
+                    (extendsBelow ? ' (full page — measured elements extend below viewport)' : ''));
+            }
         }
         return { ...result, screenshotPath };
     }

package/dist/ruler.js.map

@@ -1 +1 @@
-{"version":3,"file":"ruler.js","sourceRoot":"","sources":["../src/ruler.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAyC7C;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmMpC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,KAAK,UAAU,oBAAoB,CAAC,OAW1C;IACC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,MAAM,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAExD,IAAI,CAAC;QACH,iCAAiC;QACjC,IAAI,OAAO,CAAC,OAAO;YAAE,OAAO,CAAC,GAAG,CAAC,oDAAoD,CAAC,CAAC;QAEvF,MAAM,cAAc,GAAuB;YACzC,SAAS,EAAE,OAAO,CAAC,SAAS;YAC5B,eAAe,EAAE,OAAO,CAAC,eAAe,IAAI,IAAI;YAChD,cAAc,EAAE,OAAO,CAAC,cAAc,IAAI,IAAI;YAC9C,YAAY,EAAE,OAAO,CAAC,YAAY,IAAI,KAAK;YAC3C,aAAa,EAAE,OAAO,CAAC,aAAa,IAAI,IAAI;YAC5C,KAAK,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;YACzB,MAAM,EAAE,OAAO,CAAC,MAAM;SACvB,CAAC;QAEF,MAAM,MAAM,GAAG,CAAC,MAAM,IAAI,CAAC,QAAQ,CACjC,IAAI,qBAAqB,KAAK,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,GAAG,CAChE,CAAgB,CAAC;QAElB,IAAI,OAAO,CAAC,OAAO;YAAE,OAAO,CAAC,GAAG,CAAC,+BAA+B,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC;QAElF,IAAI,MAAM,CAAC,SAAS,EAAE,CAAC;YACrB,MAAM,EAAE,cAAc,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,MAAM,CAAC,SAAS,CAAC;YACvE,IAAI,OAAO,CAAC,OAAO;gBACjB,OAAO,CAAC,GAAG,CACT,mCAAmC,cAAc,UAAU,gBAAgB,MAAM,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,EAAE,CAC3H,CAAC;QACN,CAAC;QAED,0CAA0C;QAC1C,IAAI,cAAkC,CAAC;QACvC,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;YACnB,0BAA0B;YAC1B,MAAM,GAAG,GAAG,OAAO,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC;YACzE,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC/B,EAAE,CAAC,SAAS,CAAC,GAAG,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;YACzC,CAAC;YAED,MAAM,IAAI,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,OAAO,CAAC,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;YACjE,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC;YAChC,IAAI,OAAO,CAAC,OAAO;gBAAE,OAAO,CAAC,GAAG,CAAC,0CAA0C,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;QAC/F,CAAC;QAED,OAAO,EAAE,GAAG,MAAM,EAAE,cAAc,EAAE,CAAC;IACvC,CAAC;YAAS,CAAC;QACT,IAAI,OAAO,CAAC,OAAO;YAAE,OAAO,CAAC,GAAG,CAAC,sCAAsC,CAAC,CAAC;QACzE,MAAM,OAAO,CAAC,KAAK,EAAE,CAAC;IACxB,CAAC;AACH,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,mBAAmB;IACjC,OAAO;QACL,SAAS,EAAE;YACT,YAAY,EAAE,kBAAkB;YAChC,kCAAkC,EAAE,0BAA0B;SAC/D;QACD,eAAe,EAAE,IAAI;QACrB,cAAc,EAAE,IAAI;QACpB,aAAa,EAAE,IAAI;QACnB,KAAK,EAAE,CAAC;KACT,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,mBAAmB;IACjC,OAAO;QACL,SAAS,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC;QAClC,eAAe,EAAE,IAAI;QACrB,cAAc,EAAE,IAAI;QACpB,aAAa,EAAE,IAAI;QACnB,KAAK,EAAE,EAAE;KACV,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ruler.js","sourceRoot":"","sources":["../src/ruler.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ytspar/sweetlink",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "description": "Autonomous development toolkit for AI agents - screenshots, DOM queries, console logs, and JavaScript execution via WebSocket and Chrome DevTools Protocol",
   "keywords": [
     "autonomous-development",
@@ -23,75 +23,93 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./types": {
       "types": "./dist/types.d.ts",
-      "import": "./dist/types.js"
+      "import": "./dist/types.js",
+      "default": "./dist/types.js"
     },
     "./server": {
       "types": "./dist/server.d.ts",
-      "import": "./dist/server.js"
+      "import": "./dist/server.js",
+      "default": "./dist/server.js"
     },
     "./browser": {
       "types": "./dist/browser.d.ts",
-      "import": "./dist/browser.js"
+      "import": "./dist/browser.js",
+      "default": "./dist/browser.js"
     },
     "./browser/commands/schema": {
       "types": "./dist/browser/commands/schema.d.ts",
-      "import": "./dist/browser/commands/schema.js"
+      "import": "./dist/browser/commands/schema.js",
+      "default": "./dist/browser/commands/schema.js"
     },
     "./browser/commands/outline": {
       "types": "./dist/browser/commands/outline.d.ts",
-      "import": "./dist/browser/commands/outline.js"
+      "import": "./dist/browser/commands/outline.js",
+      "default": "./dist/browser/commands/outline.js"
     },
     "./browser/consoleCapture": {
       "types": "./dist/browser/consoleCapture.d.ts",
-      "import": "./dist/browser/consoleCapture.js"
+      "import": "./dist/browser/consoleCapture.js",
+      "default": "./dist/browser/consoleCapture.js"
     },
     "./browser/earlyConsoleCapture": {
       "types": "./dist/browser/earlyConsoleCapture.d.ts",
-      "import": "./dist/browser/earlyConsoleCapture.js"
+      "import": "./dist/browser/earlyConsoleCapture.js",
+      "default": "./dist/browser/earlyConsoleCapture.js"
     },
     "./browser/screenshotUtils": {
       "types": "./dist/browser/screenshotUtils.d.ts",
-      "import": "./dist/browser/screenshotUtils.js"
+      "import": "./dist/browser/screenshotUtils.js",
+      "default": "./dist/browser/screenshotUtils.js"
     },
     "./urlUtils": {
       "types": "./dist/urlUtils.d.ts",
-      "import": "./dist/urlUtils.js"
+      "import": "./dist/urlUtils.js",
+      "default": "./dist/urlUtils.js"
     },
     "./ruler": {
       "types": "./dist/ruler.d.ts",
-      "import": "./dist/ruler.js"
+      "import": "./dist/ruler.js",
+      "default": "./dist/ruler.js"
     },
     "./playwright": {
       "types": "./dist/playwright.d.ts",
-      "import": "./dist/playwright.js"
+      "import": "./dist/playwright.js",
+      "default": "./dist/playwright.js"
     },
     "./cdp": {
       "types": "./dist/cdp.d.ts",
-      "import": "./dist/cdp.js"
+      "import": "./dist/cdp.js",
+      "default": "./dist/cdp.js"
     },
     "./vite": {
       "types": "./dist/vite.d.ts",
-      "import": "./dist/vite.js"
+      "import": "./dist/vite.js",
+      "default": "./dist/vite.js"
     },
     "./auto": {
       "types": "./dist/auto.d.ts",
-      "import": "./dist/auto.js"
+      "import": "./dist/auto.js",
+      "default": "./dist/auto.js"
     },
     "./next": {
       "types": "./dist/next.d.ts",
-      "import": "./dist/next.js"
+      "import": "./dist/next.js",
+      "default": "./dist/next.js"
     },
     "./daemon": {
       "types": "./dist/daemon/types.d.ts",
-      "import": "./dist/daemon/types.js"
+      "import": "./dist/daemon/types.js",
+      "default": "./dist/daemon/types.js"
     },
     "./daemon/client": {
       "types": "./dist/daemon/client.d.ts",
-      "import": "./dist/daemon/client.js"
+      "import": "./dist/daemon/client.js",
+      "default": "./dist/daemon/client.js"
     }
   },
   "bin": {